We will create a simple chart depicting a series of circles that represent fruits and the number of calories we can get from 100 grams of each fruit. To make things easier, we have created a JSON file with information about the fruits. The file structure is as follows:

{
  "name": "Fruits",
  "data": [
    {
      "name": "Apple",
      "description": "The apple is the pomaceous fruit..."
      "amount_grams": 100,
      "calories": 52,
      "color": "#FF5149"
    },
    ...
  ]
}

We will represent each fruit with a circle and arrange them horizontally. We will map the area of the circle to the calories by serving, coloring them with the color indicated in the data item. As usual, we will use the reusable chart pattern, creating a closure function with the chart attributes and a charting function that contains the rendering logic, as shown in the following code:

function fruitChart() {

    // Chart Attributes
    var width = 600,
        height = 120;

    // Radius...