Elijah Meeks emeeks

An experiment with encoding the change over time of a value in a treemap. Each rectangle represents the imports to the United States from the countries shown in 2015. Within each rectangle, the "corners" from a rectangle of the same ratio are drawn according to the value of imports from an earlier decade (2005, 1995, 1985) and these corners are connected to form a vector of change. This works pretty well for progressive growth. It "overflows" a bit when an earlier value is higher than the current but other than that it suffers a bit for representing change that's negative.

Found the data for this chart via cmgiven's cool Treemap Bar Chart

Data Sources: Census

This demonstrates how to use d3-annotation() with bboxCollide to procedurally place node labels. After using the nodes data to create a network visualization of the Les Miserables play, we filter the nodes to leave out the side characters and pass that array to d3-annotation. We then create a second forceSimulation, this time using the size of the notes as the property in our bounding box collision detection, to move the labels out of each others' way.

d3-annotation by Susie Lu.

This demonstrates how to use d3-annotation() with d3.forceSimulation to draw a Venn Diagram. In this the Venn shows a population of data visualizers (a semi-mythical and apparently controversial profession) that describe their organization as having data visualization professionals either embedded in other teams (green) or in a dedicated data visualization team (tan) or having both (green and tan). This uses d3.packEnclose to determine the size and location of the annotation subject, which utilizes d3.annotationCalloutCircle.

d3-annotation by Susie Lu.

A diagram of student performance grouped by final grade for the class and socio-economic status.

This demonstrates how to use d3-annotation() to draw a Circle Pack. Because circle packing as a diagram uses enclosure to signal hierarchy (in other words, you draw a circle around all of a parent node's children) it might make more sense visually to signal the containers as annotations and only the leaf nodes using traditional data visualization methods. Here I use d3.circlePack to format the data but I only instantiate the leaf nodes (the colored and filled circles) and pass the remaining parent nodes (except for the root node) to d3-annotation for use as annotations.

d3-annotation by Susie Lu.

An attempt to procedurally draw the amazing data visualization of African-American demographics in 1890 by W. E. B. Du Bois based on census data. Rural/Small Town/Suburban/Urban is just a threshold for pop density of less than 10, 10 to 100, 100 to 1000 and 1000 plus people per square mile from census land area of counties.

This version uses the second-most populous area (the top line) as the baseline for the scale to draw the spiral, emphasizing with the spiral the vast difference between where the majority of that group lives compared to where else that group resides.

Celebrate Black History

An attempt to procedurally draw the amazing data visualization of African-American demographics in 1890 by W. E. B. Du Bois based on census data. Rural/Small Town/Suburban/Urban is just a threshold for pop density of less than 10, 10 to 100, 100 to 1000 and 1000 plus people per square mile from census land area of counties.

Celebrate Black History

Simple proof of concept showing how you can use the D3 partition layout to draw a tree.

This is using d3v3 because I needed to make it quick and I had a d3v3 icicle chart sitting around.

Taking advantage of the forceSimulation-based nature of the cartogram to switch to a bubble chart using the same data.

Demographics from http://library.duke.edu/data/collections/popest

Cartograms distort geography to encode data. In this case, we're looking at the demography of US counties laid out using the constraints available d3's forceSimulation. Counties are positioned based on their centroid but sized based on demography, so more populated counties of that demographic will deform the position of nearby counties.

Demographics from http://library.duke.edu/data/collections/popest