chart = {
const root = treemap(data);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const node = svg.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
const column = node.filter(d => d.depth === 1);
column.append("text")
.attr("x", 3)
.attr("y", "-1.7em")
.style("font-weight", "bold")
.text(d => d.data.key);
column.append("text")
.attr("x", 3)
.attr("y", "-0.5em")
.attr("fill-opacity", 0.7)
.text(d => format(d.value));
column.append("line")
.attr("x1", -0.5)
.attr("x2", -0.5)
.attr("y1", -30)
.attr("y2", d => d.y1 - d.y0)
.attr("stroke", "#000")
const cell = node.filter(d => d.depth === 2);
cell.append("rect")
.attr("fill", d => color(d.data.key))
.attr("fill-opacity", 0.35)
.attr("width", d => d.x1 - d.x0 - 1)
.attr("height", d => d.y1 - d.y0 - 1);
cell.append("text")
.attr("x", 3)
.attr("y", "1.1em")
.text(d => d.data.key);
cell.append("text")
.attr("x", 3)
.attr("y", "2.3em")
.attr("fill-opacity", 1)
.text(d => format(d.value));
return svg.node();
}
treemap = data => d3.treemap()
.round(true)
.tile(d3.treemapSliceDice)
.size([
width - margin.left - margin.right,
height - margin.top - margin.bottom
])
(d3.hierarchy(
{
values: d3.nest()
.key(d => d.x)
.key(d => d.y)
.entries(data)
},
d => d.values
).sum(d => d.value))
.each(d => {
d.x0 += margin.left;
d.x1 += margin.left;
d.y0 += margin.top;
d.y1 += margin.top;
})
format = d => d.toLocaleString()
color = d3.scaleOrdinal(d3.schemeCategory10).domain(data.map(d => d.y))
data = d3.csvParse(await FileAttachment("pet population@3.csv").text(), ({pet, country, value}) => ({x: pet, y: country, value}))
margin = ({top: 30, right: -1, bottom: -1, left: 1})
height = 954
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.
