Scott Murray

Tutorials > D3 > The power of data()

The power of data()

Last updated 2015 September 15

These tutorials address D3 version 3. To learn the latest and greatest of versions 4.x, preorder the second edition of my book.

We left off with a simple bar chart, drawn with divs and generated from our simple data set.

var dataset = [ 5, 10, 15, 20, 25 ];
1

This is great, but real-world data never looks like this. Let’s modify our data.

var dataset = [ 25, 7, 5, 26, 11 ];
2

We’re not limited to five data points, of course. Let’s add more!

var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                24, 18, 25, 9, 3 ];
3

25 data points instead of five! How does D3 automatically expand our chart as needed?

d3.select("body").selectAll("div")
    .data(dataset)  // <-- The answer is here!
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        var barHeight = d * 5;
        return barHeight + "px";
    });

Give data() ten values, and it will loop through ten times. Give it one million values, and it will loop through one million times. (Just be patient.)

That is the power of data() — being smart enough to loop through the full length of whatever data set you throw at it, executing each method below it in the chain, while updating the context in which each method operates, so d always refers to the current datum at that point in the loop.

That may be a mouthful, and if it all doesn’t make sense yet, it will soon. I encourage you to save the source code from the sample HTML pages above, tweak the dataset values, and note how the bar chart changes.

Remember, the data is driving the visualization — not the other way around.

Random Data

Sometimes it’s fun to generate random data values, for testing purposes or pure geekiness. That’s just what I’ve done here. Notice how each time you reload the page, the bars render differently.

4
5
6

View the source, and you’ll see this code:

var dataset = [];                        //Initialize empty array
for (var i = 0; i < 25; i++) {           //Loop 25 times
    var newNumber = Math.random() * 30;  //New random number (0-30)
    dataset.push(newNumber);             //Add new number to array
}

This code doesn’t use any D3 methods; it’s just JavaScript. Without going into too much detail, this code:

  1. Creates an empty array called dataset.
  2. Initiates a for loop, which is executed 25 times.
  3. Each time, it generates a new random number with a value between zero and 30.
  4. That new number is appended to the dataset array. (push() is an array method that appends a new value to the end of an array.)

Just for kicks, open up the JavaScript console and enter console.log(dataset). You should see the full array of 25 randomized data values.

7

Notice that they are all decimal or floating point values (14.793717765714973), not whole numbers or integers (14) like we used initially. For this example, decimal values are fine, but if you ever need whole numbers, you can use JavaScript’s Math.round() method. For example, you could wrap the random number generator from this line

    var newNumber = Math.random() * 30;

as follows:

    var newNumber = Math.round(Math.random() * 30);

Try it out here, and use the console to verify that the numbers have indeed been rounded to integers:

8

Next we’ll expand our visual possibilities with SVG.

Next up: An SVG primer

Interactive Data Visualization for the WebThese tutorials have been expanded into a book, Interactive Data Visualization for the Web, published by O’Reilly in March 2013. You can purchase the ebook and print editions from O’Reilly, but a second edition is coming soon, so I really recommend you preorder that. A free, online version includes interactive examples. Download the sample code files and sign up to receive updates by email.

Follow me on Twitter or watch this RSS feed for other updates.

These tutorials have been generously translated to Catalan (Català) by Joan Prim, Chinese (简体中文) by Wentao Wang, French (Français) by Sylvain Kieffer, Japanese (日本語版) by Hideharu Sakai, Russian (русский) by Sergey Ivanov, and Spanish (Español) by Gabriel Coch.

Also see my video courses, “An Introduction to d3.js: From Scattered to Scatterplot” and “Intermediate d3.js: Charts, Layouts, and Maps.”