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

This second chart adds a 10 x 10 display of the clusters that resulted from applying the k-Means algorithm to the first 13 years of income.

queue.js

queue.js simplifies loading several datasets at once:

Use queue().defer() to add files to the queue.

queue()
    .defer(d3.csv, "income_series.csv")
    .defer(d3.csv, "kmeans_assignment.csv")
    .defer(d3.csv, "mean_income.csv")
    .await(ready);

Pass in a callback to queue().await() that will accept an error object and the queued data objects as arguments.

var ready = function(error, income, kmeans, means) {

d3.nest() with multiply keys

Represent multiple levels of hierarchy by calling key() multiple times. Each subsequent call of key() marks the grouping variable for the next drill-down.

var incomeMeans = d3.nest()
    .key(function(d) { return d.k; })
    .key(function(d) { return d.c; })
    .entries(means);

Call selectAll() and data() to drill down through the nest.

var clusterRows = controlsContainer.selectAll(".cluster-rows")
    .data(incomeMeans)
    .enter().append("g")
    .classed("cluster-rows", true);

var clusters = clusterRows.selectAll("g.clusters")
    .data(function(d) { return d.values; })
    .enter().append("g")
    .attr("clusters", true);

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

Back - Next