Scott Murray, code artist

Last updated 2012 January 31

Once you’ve loaded in your data and bound it to newly created elements in the DOM, how can you use it? Here’s our code from last time:

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

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

Let’s change the last line:

    .text(function(d) { return d; });

Check out what the new code does on this demo page.

Whoa! We used our data to populate the contents of each paragraph, all thanks to the magic of the data() method. You see, when chaining methods together, anytime after you call data(), you can create an anonymous function that accepts d as input. The magical data() method ensures that d is set to the corresponding value in your original data set, given the current element at hand.

What “the current element” is changes over time as D3 loops through each element. For example, when looping through the third time, our code creates the third p tag, and d will correspond to the third value in our data set (or dataset[2]). So the third paragraph gets text content of “15”.

High-functioning

In case you’re new to writing your own functions (a.k.a. methods), the basic structure of a function definition is:

function(input_value) {
    //Calculate something here
    return output_value;
}

The function we used above is dead simple, nothing fancy

function(d) {
    return d;
}

and it’s wrapped within D3’s text() function, so whatever our function returns is handed off to text().

.text(function(d) {
    return d;
});

But we can (and will) get much fancier, because you can customize these functions however you want. Yes, it’s the pleasure and pain of writing your own JavaScript. We can define our own custom functions however we want. Maybe you’d like to add some extra text, which produces this result.

.text(function(d) {
    return "I can count up to " + d;
});

Beyond Text

Things get a lot more interesting when we explore D3’s other methods, like attr() and style(), which allow us to set HTML attributes and CSS properties on selections, respectively.

For example, adding one more line to our code produces this result.

.style("color", "red");

All the text is now red; big deal. But we could use a custom function to make the text red only if the current datum exceeds a certain threshold. So we revise that last line to use a function:

.style("color", function(d) {
    if (d > 15) {   //Threshold of 15
        return "red";
    } else {
        return "black";
    }
});

See that code in action. Notice how the first three lines are black, but once d exceeds the arbitrary threshold of 15, the text turns red.

In the next tutorial, we’ll use attr() and style() to manipulate divs, generating a simple bar chart — our first visualization!

Next up: Drawing divs →

Thoughts? Let me know what you’d like to see added, cut, or revised.
Follow me on Twitter or watch this RSS feed for updates.