Currently a MSiA candidate at Northwestern University. Experienced Fintech Consultant and Machine Learning Engineer in Fintech and digital development start ups
chart = {
const treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([width, height])
.padding(d => d.height === 1 ? 1 : 0)
.round(true);
// Compute the structure using the average value.
const root = treemap(d3.hierarchy(data)
.sum(d => d.values ? d3.sum(d.values) : 0)
.sort((a, b) => b.value - a.value));
const svg = d3.create("svg")
.attr("viewBox", `0 -20 ${width} ${height + 20}`)
.style("width", "100%")
.style("height", "auto")
.style("overflow", "visible")
.style("font", "10px sans-serif");
const box = svg.append("g")
.selectAll("g")
.data(data.keys.map((key, i) => {
const value = root.sum(d => d.values ? d.values[i] : 0).value;
return {key, value, i, k: Math.sqrt(value / max)};
}).reverse())
.join("g")
.attr("transform", ({k}) => `translate(${(1 - k) / 2 * width},${(1 - k) / 2 * height})`)
.attr("opacity", ({i}) => i >= viewof index.value ? 1 : 0)
.call(g => g.append("text")
.attr("y", -6)
.attr("fill", "#777")
.selectAll("tspan")
.data(({key, value}) => [key, ` ${formatNumber(value)}`])
.join("tspan")
.attr("font-weight", (d, i) => i === 0 ? "bold" : null)
.text(d => d))
.call(g => g.append("rect")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("width", ({k}) => k * width)
.attr("height", ({k}) => k * height));
const leaf = svg.append("g")
.selectAll("g")
.data(layout(viewof index.value))
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
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.name); })
.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.name, formatNumber(d.value)])
.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);
leaf.append("title")
.text(d => d.data.name);
function layout(index) {
const k = Math.sqrt(root.sum(d => d.values ? d.values[index] : 0).value / max);
const x = (1 - k) / 2 * width;
const y = (1 - k) / 2 * height;
return treemap.size([width * k, height * k])(root)
.each(d => (d.x0 += x, d.x1 += x, d.y0 += y, d.y1 += y))
.leaves();
}
return Object.assign(svg.node(), {
update(index) {
box.transition()
.duration(duration)
.attr("opacity", ({i}) => i >= index ? 1 : 0);
leaf.data(layout(index)).transition()
.duration(duration)
.ease(d3.easeLinear)
.attr("transform", d => `translate(${d.x0},${d.y0})`)
.call(leaf => leaf.select("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0))
.call(leaf => leaf.select("text tspan:last-child")
.tween("text", function(d) {
const i = d3.interpolate(parseNumber(this.textContent), d.value);
return function(t) { this.textContent = formatNumber(i(t)); };
}));
}
});
}
chart.update(index)
duration = 2500
parseNumber = string => +string.replace(/,/g, "")
formatNumber = d3.format(",d")
sums = data.keys.map((d, i) => d3.hierarchy(data).sum(d => d.values ? Math.round(d.values[i]) : 0).value)
max = d3.max(sums)
color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeCategory10.map(d => d3.interpolateRgb(d, "white")(0.5)))
function nest(data, ...keys) {
const nest = d3.nest();
for (const key of keys) nest.key(key);
function hierarchy({key, values}, depth) {
return {
name: key,
children: depth < keys.length - 1
? values.map(d => hierarchy(d, depth + 1))
: values
};
}
return nest.entries(data).map(d => hierarchy(d, 0));
}
data = {
const keys = d3.range(1790, 2000, 10);
const [regions, states] = await Promise.all([
FileAttachment("census-regions.csv").text(),
FileAttachment("population.tsv").text()
]).then(([regions, states]) => [
d3.csvParse(regions),
d3.tsvParse(states, (d, i) => i === 0 ? null : ({name: d[""], values: keys.map(key => +d[key].replace(/,/g, "") || 1e-6)}))
]);
const regionByState = new Map(regions.map(d => [d.State, d.Region]));
const divisionByState = new Map(regions.map(d => [d.State, d.Division]));
return {keys, children: nest(states, d => regionByState.get(d.name), d => divisionByState.get(d.name))};
}
width = 954
height = width
d3 = require("d3@5")
import {Scrubber} from "@mbostock/scrubber"
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.
