Published
Edited
Dec 2, 2020
Importers
2 stars
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg
.append("g")
.attr(
"transform",
`translate(${width / 2}, ${height / 2 +
innerRadius}) rotate(180) scale(-1, 1)`
);
g.selectAll("path")
.data(data.map(d => d.value))
.join("path")
.attr("d", arc)
.attr("fill", (d, i) => color(i));
return svg.node();
}
data = FileAttachment("population-by-age@1.csv").csv({ typed: true })
height = 300
r = perimeter / (2 * Math.PI)
perimeter = Math.min(width, 640)
perimeterDifference = d3.scaleLinear().range([perimeter, 0.1])
diff = perimeterDifference(t)
innerRadius = r * (perimeter / diff) - r
wedgeAngle = diff / r
arc = d3
.arc()
.startAngle((d, i) => angle(i))
.endAngle((d, i) => angle(i) + angle.bandwidth())
.innerRadius(d => radius(0))
.outerRadius(d => radius(d))
radius = d3
.scaleRadial()
.domain([0, d3.max(data, d => d.value)])
.range([innerRadius, innerRadius + r])
angle = d3
.scaleBand()
.domain(d3.range(data.length))
.range([Math.PI + wedgeAngle / 2, Math.PI - wedgeAngle / 2])
color = d3
.scaleOrdinal()
.domain(d3.range(data.length))
.range(
d3
.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length)
.reverse()
)
d3 = require("d3@6")
import { Scrubber } from "@mbostock/scrubber"
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.
