Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter3/object-as-data.html

JavaScript object literal is probably the most common data structure you will encounter when loading data sources on the Web. In this recipe, we will look at how these JavaScript objects can be leveraged to generate rich visualization. Here is how to do it in code:

var data = [ // <- A
 {width: 10, color: 23},{width: 15, color: 33},
 {width: 30, color: 40},{width: 50, color: 60},
 {width: 80, color: 22},{width: 65, color: 10},
 {width: 55, color: 5},{width: 30, color: 30},
 {width: 20, color: 60},{width: 10, color: 90},
 {width: 8, color: 10}
 ];
    
var colorScale = d3.scale.linear()
.domain([0, 100]).range(["#add8e6", "blue"]); // <- B

    function render(data) {
        d3.select("body").selectAll("div.h-bar")
            .data(data)
            .enter().append("div")
                .attr("class", "h-bar") 
            .append("span");

        d3.select("body").selectAll("div.h-bar")
            .data(data)
            .exit().remove();

        d3.select("body").selectAll("div.h-bar")
            .data(data)
                .attr("class", "h-bar")
 .style("width", function (d) { // <- C
 return (d.width * 5) + "px"; // <- D
 })
 .style("background-color", function(d){
 return colorScale(d.color); // <- E
 })
            .select("span")
 .text(function (d) {
 return d.width; // <- F
 });
    }

    function randomValue() {
        return Math.round(Math.random() * 100);
    }

    setInterval(function () {
        data.shift();
        data.push({width: randomValue(), color: randomValue()});
        render(data);
    }, 1500);

    render(data);

This recipe generates the following visualization:

Data as Object

In this recipe, instead of simple integers as in the previous recipe, now our data array is filled with objects (see the line marked as A with an arrow left to it). Each data object contains two attributes—width and color—that are both integers in this case.

var data = [ // <- A

        {width: 10, color: 23},{width: 15, color: 33},
...
        {width: 8, color: 10}
    ];

The major difference between this recipe and the previous one is how data is handled as shown on line C:

function (d) { // <- C
return (d.width * 5) + "px"; // <- D
}

As we can see in the preceding code snippet, in this recipe the datum associated with each visual element is actually an object, not an integer. Therefore, we can access the d.width attribute on line D.

Similarly on line E, the background-color style can be computed using the d.color attribute with the color scale we defined earlier:

.style("background-color", function(d){
  return colorScale(d.color); // <- E
})
.select("span")
  .text(function (d) {
    return d.width; // <- F
  });

The child element span again inherits its parent's associated datum, and hence, it also has access to the same datum object in its dynamic modifier function on line F setting the textual content to d.width attribute.

This recipe demonstrates how JavaScript objects can easily be bound to visual elements using exactly the same method discussed in the previous recipe. This is one of the most powerful capabilities of the D3 library; it allows you to re-use the same pattern and method to handle different types of data, simple or complex. We will see more examples on this topic in the next recipe.