Book Image

Mastering D3.js

By : Pablo Navarro Castillo, Pablo Navarro Castillo
Book Image

Mastering D3.js

By: Pablo Navarro Castillo, Pablo Navarro Castillo

Overview of this book

Table of Contents (19 chapters)
Mastering D3.js
About the Author
About the Reviewers

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,
      "current": "false"
    // more items ...

We will use the d3.json method to load...