Old school D3 from simpler times

jonpage

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

This third chart adds a little interactivity. Clicking on a line in the matrix on the right highlights those income series that were assigned to the given cluster.

d3.classed()

Here I added an event listener and took advantage of d3.classed() which allows you to pass either a string of class identifiers and a boolean or an object that maps classes to whether or not they should be displayed.

clusters.on("click", function(d) {
    var k = d.values[0].k;
    var c = d.values[0].c;
    // set highlight for cluster background
    clusters.selectAll("rect").classed("highlighted-cluster", false);
    d3.select("#rect-" + d.values[0].k + "-" + d.values[0].c).classed("highlighted-cluster", true);
    // set which lines are visible in the main chart
    d3.selectAll(".line").classed({"hidden": true, "highlighted": false});
    d3.selectAll(".k" + k + "-c" + c).classed({"highlighted": true, "hidden": false});
});

Back - Next