forked from asielen's block: Violin Plot + Box Plot v2
Movie collaborations between Avengers in the MCU - will get used in tutorial
forked from nbremer's block: Chord Gradients - Final example - Avenger Movie Collaborations
forked from bmershon's block: Context Sensitive Label Visibility
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.
The last chart adds the ability to select a random individual series and see which clusters it had been assigned.
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")
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.
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;
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.
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);
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.