Plot.plot({
aspectRatio: true,
inset: 10,
y: { ticks: null },
// color: { scheme: "YlGnBu" },
color: { scheme: "Reds" },
marks: [
// Plot.frame(),
// Plot.gridX({ ticks: 20, strokeDasharray: 4 }),
// Plot.gridY({ ticks: 20, strokeDasharray: 4 }),
pulsar.map((line, n) =>
Plot.line(
line,
radial({
radius: (d) => 20 + d,
angle: (d, i) => (i / (line.length - 1)) * 2 * Math.PI,
strokeOpacity: 0.5,
strokeWidth: 1,
stroke: n,
curve: "natural"
})
)
),
// Plot.dot([[0, 0]])
]
})
function radial({ radius, angle, ...options }) {
const [X, setX] = Plot.column();
const [Y, setY] = Plot.column();
options = Plot.transform(options, (data, facets) => {
const R = Plot.valueof(data, radius);
const A = Plot.valueof(data, angle);
const X = new Float64Array(R.length);
const Y = new Float64Array(R.length);
setX(X);
setY(Y);
for (let i = 0; i < R.length; ++i) {
const [x, y] = d3.pointRadial(A[i], R[i]);
X[i] = x;
Y[i] = y;
}
return { data, facets };
});
return { x: X, y: Y, ...options };
}
// https://gist.githubusercontent.com/borgar/31c1e476b8e92a11d7e9/raw/0fae97dab6830ecee185a63c1cee0008f6778ff6/pulsar.csv
pulsar = FileAttachment("pulsar.csv").csv({ array: true, typed: true })
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.
