Web Datavis researcher by day, Indie Game designer by night
chart = {
const root = cascade(
d3.treemap()
.size([width, height])
.paddingOuter(2)
.paddingTop(14)
.paddingInner(0)
.round(true)
(tree.sort((a, b) => b.value - a.value)),
2 // treemap.paddingOuter
);
const svg = d3.select(html`
<svg viewBox="0 0 ${width} ${height}">
<style>
svg {
overflow: visible;
}
.leaf {
stroke: gray;
stroke-width: 0.25;
}
.node:hover {
fill: yellow;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
.root {
fill: white;
}
</style>
</svg>`)
const shadow = DOM.uid("shadow");
svg.append("filter")
.attr("id", shadow.id)
.append("feDropShadow")
.attr("flood-opacity", 0.3)
.attr("dx", 0)
.attr("stdDeviation", 3);
const node = svg.selectAll("g")
.data(d3.nest().key(d => d.height).entries(root.descendants()))
.join("g")
.attr("filter", shadow)
.selectAll("g")
.data(d => d.values)
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
node.append("title")
.text(d => `${d.data.label}\n${format(d.value)}`);
node.append("rect")
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr('class', 'node')
.classed('leaf', d => !(d.children))
.attr("fill", d => color(d.depth))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
node.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.nodeUid.href);
node.filter(d => d.children).append("text")
.attr("clip-path", d => d.clipUid)
.text(d => d.data.label)
.attr("dx", 3)
.attr("y", 10)
.classed('root', d => d == root);
return svg.node();
}
function cascade(root, offset) {
const x = new Map;
const y = new Map;
return root.eachAfter(d => {
if (d.children) {
x.set(d, 1 + d3.max(d.children, c => c.x1 === d.x1 - offset ? x.get(c) : NaN));
y.set(d, 1 + d3.max(d.children, c => c.y1 === d.y1 - offset ? y.get(c) : NaN));
} else {
x.set(d, 0);
y.set(d, 0);
}
}).eachBefore(d => {
d.x1 -= 2 * offset * x.get(d);
d.y1 -= 2 * offset * y.get(d);
});
}
width = 954
height = 1060
format = d3.format(",d")
color = d3.scaleSequential([4, -1], d3.interpolateGnBu)
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.
