Exploratory Analysis of Time Series Clusters with D3.js (Step 2)

This first chart shows all the income data points grouped into lines by individual. The y axis represents the log of the ratio of current income to income at age 25. The x axis represents age.

d3.nest()

The main non-trivial D3.js function here is the use of d3.nest():

var people = d3.nest()
    .key(function(d) { return d.uid; })
    .entries(data);

var person = svg.selectAll(".person")
                .data(people)
                .enter().append("g")
                .attr("class", "person");

person.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); });

Using nest allows you to group your data by one of your variables.

d3.nest() Example

var people = [
    {uid: 1, year: 1990, income: 12},
    {uid: 1, year: 1992, income: 14},
    {uid: 2, year: 1991, income: 13},
    {uid: 3, year: 1989, income: 10}
];

var nestedPeople = d3.nest()
                    .key(function(d) { return d.uid; })
                    .entries(people);

nestedPeople will be the following array:

[
    {
        key: 1, 
        values: [{uid: 1, year: 1990, income: 12}, {uid: 1, year: 1992, income: 14}]
    },
    {
        key: 2,
        values: [{uid: 2, year: 1991, income: 13}]
    },
    {
        key: 3,
        values: [{uid: 3, year: 1989, income: 10}]
    }
]

Once the nest is initialized you need to join it to a selection. Append once to create the group level elements. You access the child members of each group using the values property.

Back Next