Jul 2, 2023
D3 Timeline for CV (v2)
Recreating my CV timeline with D3.
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.
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
accepts two points and draws a stepped curve between them.
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.