Public
Edited
Sep 23, 2024
40 forks
126 stars
chart = {
const width = 1152;
const height = 760;
const marginTop = 60;
const marginRight = 10;
const marginBottom = 20;
const marginLeft = 10;
const overlap = 16;
const x = d3.scaleLinear()
.domain(d3.extent(pulsar, d => d[0]))
.range([marginLeft, width - marginRight]);
const z = d3.scalePoint()
.domain(pulsar.map(d => d[2]))
.range([marginTop, height - marginBottom]);
const y = d3.scaleLinear()
.domain(d3.extent(pulsar, d => d[1]))
.range([0, -overlap * z.step()]);
const line = d3.line()
.defined(d => !isNaN(d[1]))
.x(d => x(d[0]))
.y(d => y(d[1]));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
svg.append("g")
.attr("fill", "white")
.attr("stroke", "black")
.selectAll("path")
.data(d3.group(pulsar, d => d[2]))
.join("path")
.attr("transform", d => `translate(0,${z(d[0])})`)
.attr("d", d => line(d[1]));
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:first-of-type text").append("tspan").attr("x", 10).text(" ms"));
return svg.node();
}
pulsar = (await FileAttachment("pulsar.csv").csv({typed: true, array: true}))
.flatMap((Y, z) => Y.map((y, x) => [x * 92 / 299, y, z]))
Plot.plot({
width: 1152,
height: 760,
marginTop: 30,
axis: null,
x: {axis: "bottom", label: "Time (ms) →"},
y: {domain: [0, d3.max(pulsar, ([, y]) => y) / 16]},
marks: [Plot.lineY(pulsar, {x: "0", y: "1", fy: "2", fill: "white", stroke: "currentColor", strokeWidth: 1})]
})
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.
