The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Dec 15, 2023
8 forks
63 stars
Plot.plot({
width: 500,
projection: {
// equal-area is crucial to maintain comparability of the slices,
// but it could be any other equal-area projection
type: "azimuthal-equal-area",
rotate: [0, rotation - 90],
},
marks: [
pie(industries.slice(0, 10), { value: "unemployed", fill: "industry" }),
structure ? Plot.graticule({strokeOpacity: 0.2}) : null
]
})
pie = (data, { value, ...options }) => {
const cs = d3.cumsum(data, (d) => d[value]);
const r = 360 / cs[cs.length - 1];
for (let i = 0; i < cs.length; ++i) cs[i] *= r;
for (const d of data)
return Plot.geo(
{
type: "GeometryCollection",
geometries: data.map((d, i) => {
const a = -(cs[i - 1] || 0);
const b = -cs[i];
return {
type: "Polygon",
...d,
coordinates: [
[
[0, 90],
[a, 0],
[(2 * a + b) / 3, 0], // add intermediate points for sectors larger than a half-circle
[(a + 2 * b) / 3, 0],
[b, 0],
[0, 90]
]
]
};
})
},
{ ...options }
);
}
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.
