x = d3.scaleLinear()
.domain([d3.min(data.years), d3.max(data.years) + 1])
.rangeRound([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(data.names)
.rangeRound([margin.top, margin.top + innerHeight])
color = d3.scaleSequentialSqrt(
[0, d3.max(data.values, d => d3.max(d))],
d3.interpolateOrRd
)
xAxis = g => g
.call(g => g.append("g")
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(null, "d"))
.call(g => g.select(".domain").remove()))
.call(g => g.append("g")
.attr("transform", `translate(0,${innerHeight + margin.top + 4})`)
.call(d3.axisBottom(x)
.tickValues([data.year])
.tickFormat(x => x)
.tickSize(-innerHeight - 10))
.call(g => g.select(".tick text")
.clone()
.attr("dy", "2em")
.style("font-weight", "bold")
.text("Measles vaccine introduced"))
.call(g => g.select(".domain").remove()));
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call(g => g.select(".domain").remove())
format = {
const f = d3.format(",d");
return d => isNaN(d) ? "N/A cases"
: d === 0 ? "0 cases"
: d < 1 ? "<1 case"
: d < 1.5 ? "1 case"
: `${f(d)} cases`;
}
innerHeight = height * data.names.length
height = 16
margin = ({ top: 100, right: 1, bottom: 40, left: 40 })
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
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.
