data visualization developer, runner, musician
chart = {
const root = treemap(data);
const context = DOM.context2d(width, height)
const leaves = root.leaves();
const getColor = (d) => { while (d.depth > 1) d = d.parent; return color(d.data.name); }
leaves.forEach(leaf => {
context.save(); // For clipping the text
context.globalAlpha = 0.7;
context.beginPath();
context.rect(
leaf.x0, // x
leaf.y0, // y
leaf.x1 - leaf.x0, // width
leaf.y1 - leaf.y0 // height
)
context.fillStyle = getColor(leaf)
context.fill();
context.clip(); // Generate the Clip Path
context.font = "10px sans-serif";
const textData = leaf.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(leaf.value));
context.globalAlpha = 1;
textData.forEach((d, i, nodes) => {
let offsetY = 12; // Some simple logic to set the y of the text
if(i > 0) {
offsetY += i * 12
}
context.fillStyle = "black";
context.fillText(d, leaf.x0, leaf.y0 + offsetY)
});
context.restore(); // Restore so you can continue drawing
})
return context.canvas;
}
data = FileAttachment("flare-2.json").json()
treemap = data => d3.treemap()
.tile(d3[tile])
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
width = 975
height = 1060
format = d3.format(",d")
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5")
md`## Easy to Import Function`
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.
