Most of the time when we find data resources on the Internet, it has a flat data structure just as a comma separated list. But often, it contains hierarchical structured data. In D3, it is very easy to group data together by creating nested tree structures of the dataset. To achieve this, we can use the d3.nest()
operator. This operator creates a nest object, which can further define a grouping key via the .key()
method and a sorting function via the .sortKey()
method. These functions can also be repeated to create multiple nested layers of the flat data structures. Let's take a look at the dataset:
var values = [ { date: "04/23/12", key: "Group1", value: "37" }, { date: "04/23/12", key: "Group2", value: "12" }, { date: "04/23/12", key: "Group3", value: "46" }, ... ];
First, we create a nest
function that will then group our data accordingly:
var nest = d3.nest() .key(function(d, i){ return d.date; });
A nest now implements...