Visualizations without SVG

In this section, we will create a visualization without using SVG. We will create a bubble chart to show the usage of browser versions in the browser market. A circle will represent each browser version; the area of the circle will be proportional to the global browser usage. Each browser will be assigned a different color. We will use the force layout to group the bubbles on the screen. To follow the examples, open the chapter03/01-bubble-chart.html file.

Loading and sorting the data

To make the processing easier, the browser market data was arranged in a JSON file. The main object will have a name that describes the dataset and an array that will contain the data for each browser version. Refer to the following code:

{
  "name": "Browser Market",
  "values": [
    {
      "name": "Internet Explorer",
      "version": 8,
      "platform": "desktop",
      "usage": 8.31,
  ...