Published
Edited
Apr 22, 2019
Insert cell
Insert cell
viewof tile = html`<select>
<option>treemapBinary</option>
<option>treemapDice</option>
<option>treemapSlice</option>
<option>treemapSliceDice</option>
<option selected>treemapSquarify</option>
</select>`
Insert cell
chart = {
const root = treemap(data);

const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("max-width", "620px")
.style("height", "auto")
.style("font", "20px 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.name).join("/")}\n${format(d.label)}`);

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("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.name.split(/(?=[A-Z][^A-Z])/g).concat(String(d.data.label.toFixed(1)).concat("¢")))
.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", 1)
.text(d => d);

return svg.node();
}
Insert cell
data = d3.json("https://raw.githubusercontent.com/greencracker/georgia-budget-2020/master/ga-budget-2020-simplified-for-treemap.json")
// data = d3.json("http://greencracker.pythonanywhere.com/budget-2020/ga-budget-2020-simplified-for-treemap.json")
Insert cell
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))
Insert cell
width = 975
Insert cell
height = 1100
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