Lloyd Richards Design
D3

Jul 2, 2023

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.

Simple Timeline

2020AprilJulyOctober2021AprilJulyOctober2022AprilJulyOctober2023AprilJulyOctober2024AprilJulyOctoberGraphic Designer

Created visual designs for print and digital media

Customer Support Specialist

Provided technical support to customers via phone and email

Data Analyst

Analyzed customer data to identify trends and insights

Project Manager

Managed software development projects using Agile methodologies

Content Writer

Wrote blog posts and articles for a variety of industries

Software Engineer

Developed and maintained web applications using React and Node.js

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.