Charts built with D3
Published
Edited
Aug 25, 2020
partition = d3.partition().size([height, width])
chart = {
let svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`).style("cursor", "help")
let chart = svg.append("g").classed("chart", true);
let parts = chart.selectAll("g.part")
.data(partitionRoot.descendants())
.join("g")
.classed("part", true)
.attr("transform", (d)=>`translate(${d.y0}, ${d.x0})`)
parts.append("title")
.text((d)=>(`Name: ${d.data.name}\nTotal Population: ${numberFormat(d.value)}`))
parts.append("rect")
.attr("height", (d)=>(d.x1 - d.x0))
.attr("width", (d)=>(d.y1 - d.y0))
.attr("stroke", "gray")
.attr("stroke-width", 0.5)
.attr("fill", (d,i)=>d3.schemeSet3[d.depth])
return svg.node();
}
dataset = FileAttachment("kenya-population@1.json").json()
height = 400
numberFormat = d3.format(" ,");
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.
