jonpage

Clustering algorithms exist to assign observational units to relavant groups. A major problem is identifying the ideal number of groups if the true number is not known in advance.

This is the first in a series of blocks where we will create a visualization designed to help a domain expert identify the ideal number of groups for a set of time series observations.

The images above were created in R as part of the data analysis process. We'll use D3 to create an interactive version.

Next Step

jonpage

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);

jonpage

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()

jonpage

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;

jonpage

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")

jonpage

Slave Voyages - Embarking

This is an attempt at visualizing the relative scale of the slave trade by country. The data comes from slavevoyages.org.

The visualization is inpsired by the Mountains-out-of-molehills visualization. The focus is to communicate the relative scale over time, giving us a sense of activity over time of this attrocious part of our history.

jonpage

forked from bmershon's block: Context Sensitive Label Visibility

jonpage

Movie collaborations between Avengers in the MCU - will get used in tutorial

forked from nbremer's block: Chord Gradients - Final example - Avenger Movie Collaborations

jonpage

forked from asielen's block: Violin Plot + Box Plot v2

jonpage

forked from pnavarrc's block: Earthquake Map