Published
Edited
Oct 9, 2019
2 stars
Insert cell
md`# The Met Collection, by Department and Classification

This code is a forked version of
Insert cell
Insert cell
chart = {
const root = treemap(prepped_tree);

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");

const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);

leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.title).join("/")}\n${format(d.value)}`);

leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.title); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);

// leaf.append("clipPath")
// .attr("id", d => (d.clipUid = DOM.uid("clip")).id)
// .append("use")
// .attr("xlink:href", d => d.leafUid.href);

leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.title)
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);

return svg.node();
}
Insert cell
Insert cell
// links = d3.csvParse(')
rowdata = d3.csv("https://gist.githubusercontent.com/rl2999/e15594889ee650f0a7ffe238d3c03f0e/raw/1edf08ce77b0a600c16f109a75fef3916926a572/met_highlights_dept_class.csv")

Insert cell
md`
## The treemap() layout function

D3 has a special layout functionality that automatically computes x y coordinates for us, given that we want a particular type of layout. In our case, we want a treemap, so we use D3 treemap.

Because our dataset is comprised of a flat CSV where each row is an object, we must transform this into a tree-like structure for treemap() to compute the values for us.

## Data transformation

There are multiple steps here:
- Pass our rowdata into d3.nest() to make a grouped hierarchal data structure
- Pass the data into d3.hierarchy
-
`
Insert cell
byDepartmentClassification = d3.nest()
.key(d => d.department)
.key(d => d.classification)
.entries(rowdata)
Insert cell
// Pass thingy into hierarchy
hier = d3.hierarchy(prepped_tree, funcChildren)
Insert cell
md`
### Creating the tree structure

When we use nest, it computes almost everything correctly... except it doesn't wrap it into a structure like
{
name: "met",
children: children
}

Therefore, we must create the object ourselves, and *then* pass it into d3.hierarchy.
`
Insert cell
treemap = data => d3.treemap()
.tile(d3[tile])
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data, funcChildren)
.sum(d => 1)
)
Insert cell
// When we run treemap, this function wraps up stuff
// and mutates the input, computing values that
// will be passed into root for the chart all the way above...
// The code below is called in chart but you can remove it from this here.
// This line is only included so we can inspect the output above...
treemap(prepped_tree);
Insert cell
// There is probably an easier way to do this in JS
// but this way uses a constructor
obj = function(name, children) {
this.name = name;
this.values = children; }
Insert cell
prepped_tree = new obj("metStuff", byDepartmentClassification);
Insert cell
funcChildren = d => d.values
Insert cell
width = 975
Insert cell
height = 1060
Insert cell
format = d3.format(",d")
Insert cell
color = d3.scaleOrdinal(d3.schemeCategory10)
Insert cell
d3 = require("d3@5")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more