Tag Archives: d3

D3: Binding Multi-Dimensional Arrays and Deep Nested Data

The easiest way to work with D3 data arrays is to create simple arrays. For example, to create a stacked array, represent each stack in a stacked bar by the a comma separated value in a row per bar.

state, males, females
CT, 125, 135
NY, 240, 250

But if you are retrieving data from an open data API via REST for instance or if you want to use dynamic data visualizations where the visualization depends on user input, it is easier to use the built-in d3.nest function. For example, the following data comes from http://www.clinicaltrials.gov and is formatted as a .csv file:

"nct_id","gender","status","phase","city","state","minimum_age","maximum_age"
"NCT00000102","Both","Completed","Phase 1/Phase 2","Charleston","South Carolina","14 Years","35 Years",
"NCT00000104","Female","Completed","N/A","Minneapolis","Minnesota","N/A","N/A",
"NCT00000105","Male","Completed","Phase 3","Charleston","South Carolina","10 Years","14 Years",

If you use a simple nested array with one level of parent-child structure, it is straightforward to bind data to your elements.

var data1 = d3.nest()
  .key(function(d) { return d.state; }).sortKeys(d3.ascending)
  .entries(data);

Using the d3.nest() function with a single key generates the following data array structure. Continue reading