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

The last chart adds the ability to select a random individual series and see which clusters it had been assigned.

One-to-Many Mapping with the classList DOMTokenList

d3.classed() generally uses the underlying classList property of a DOM element which returns a DOMTokenList. We can iterate through the list of classes using its length and item properties.

I have given lines classes like k3-c2 which would map to the cluster with the background rect #rect-3-2. This makes highlighting which clusters contain the selected individual a breeze.

var randomSelector = d3.select("body").append("p")
    .append("button").text("Select Random Individual");
randomSelector.on("click", function() {
    // unhighlight all individuals
    d3.selectAll(".k1-c1").classed("selected-individual", false);
    d3.selectAll(".line-matrix-background").classed("matrix-outline", false);

    // highlight selected individual
    var individuals = d3.selectAll(".k1-c1")[0];
    var selectedIndividual = individuals[Math.floor(Math.random()*individuals.length)];
    d3.select(selectedIndividual).classed("selected-individual", true);
    
    // returns a DOMTokenList
    var selectedClassList = selectedIndividual.classList;
    var clusterName = "";
    var clusterIds = [];
    for (var i = 0; i < selectedClassList.length; i++) {
        // for each class that identifies a cluster, outline that cluster
        clusterName = selectedClassList.item(i);
        if (clusterName.indexOf("k") === 0) {
            clusterIds = clusterName.split(/k|-c/);
            d3.select("#rect-" + clusterIds[1] + "-" + clusterIds[2]).classed("matrix-outline", true);
        }
    }
});

Back