Published
Edited
Aug 31, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// DATA
Insert cell
root = d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
.eachAfter(d => d.index = d.parent ? d.parent.index = d.parent.index + 1 || 0 : 0)
Insert cell
Insert cell
x = d3.scaleLinear().range([margin.left, width - margin.right])
Insert cell
Insert cell
Insert cell
color = d3.scaleOrdinal([true, false], ["steelblue", "#aaa"])
Insert cell
barStep = 27
Insert cell
barPadding = 3 / barStep
Insert cell
duration = 750
Insert cell
Insert cell
max_width = 1024
Insert cell
margin = ({top: 30, right: 30, bottom: 0, left: 100})
Insert cell
d3 = require("d3@6")
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