PSR B1919+21

const width = 960;
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"));

display(svg.node());

const pulsar = FileAttachment("data/psr-b1919-21.csv")
  .csv({typed: true, array: true})
  .then((data) => data.flatMap((Y, z) => Y.map((y, x) => [x * 92 / 299, y, z])))
  .then(display);