The first step in refactoring the Timeline from my old CV was to create a simple version of the chart. To move over the logic for how the offsetting works and how to draw the lines, its easier to start with a simple version of the chart.

Simple Timeline

It was quite easy to get the helper functions for lookupInRange() and using it to map over the data to add the channel property. This can be used with a xScale() to get the x position of the line.

More tricky was the line which is drawn using a path element. I had to remember how to use the d3.line() function created a lineConnector() which accepts two points and draws a stepped curve between them.

const lineConnector = line()
  .curve(curveStep)
  .x((d) => d[0])
  .y((d) => d[1]);
 
<path
  d={
    lineConnector([
      [xScale(d.channel) + 48, y1 - height / 2],
      [textMargin, idx * textBlockHeight + textBlockHeight / 2],
    ]) || ""
  }
  stroke={cScale(d.category) || "black"}
  fill="none"
  strokeWidth={2}
/>;

Next step will be to add some interaction and animation to the chart. I want to be able to hover over the lines and have the text block highlight. I also want to be able to filter and organize the data by category.