data = {
const attachment = await FileAttachment("iowa-2016-results.csv").text();
const data = await d3.csvParse(attachment, d3.autoType);
data.forEach(
d =>
(d['parent'] =
d['total_bachelors_or_higher'] / d['universe'] > 0.25 ? 'high' : 'low')
);
data.push({ parent: "state", fips: "high", margin: 0 });
data.push({ parent: "state", fips: "low", margin: 0 });
data.push({ parent: null, fips: "state", margin: 0 });
return data.sort((a, b) => b.margin - a.margin);
}
stratify = d3
.stratify()
.id(d => d.fips)
.parentId(d => d.parent)
stratify(data).sum(d => d.margin)
treemap = data =>
d3
.treemap()
.tile(d3.treemapBinary)
.size([width, height])
.paddingInner(1)
.paddingOuter(10)
.round(true)(
stratify(data)
.sum(d => d.margin)
.sort((a, b) => b.margin - a.margin)
)
// width = width
height = 450
format = d3.format(",d")
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5")
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.
