Line Chart Remake

Everything starts with a pretty classic line chart. Each line shows the proportion of a group of comments. The comments advising the break up the relationships are in red, the ones advising to communicate better in blue and so on.

From the graph style, I'm pretty sure it's been made using Python and Matplotlib.

My first step was to reproduce this graph. Not easy, as the underlying data is not available anywhere. In a perfect world everything would be hosted on Github together with the code but hey 🤷‍♂️

I gave the chart to a LLM to extract approximate data and rebuilt it using Javascript and D3. The result is quite close isn't it? Now the fun starts.

The legend forces readers to jump back and forth to understand the lines. It creates unnecessary cognitive load.

Direct labeling fixes it.

A simple improvement: remove the spine. It adds clutter without conveying any information.

I’m not a big fan of dense grid lines. In our decluttering mission, removing the horizontal ones is an easy win.

Let's improve the Y axis. The axis title is kind of useless, we just have to add a % next to the numbers and everything gets more obvious, with less clutter!

Now it's obvious that the X axis needs an improvement too! The nuber 20 was repeated so many times! Let's show only what matters shall we?

Also, it's pretty obvious that it's a year, so the Axis title isn't really useful was it?

The author name label at the top right was annoying. It's competing with the most interesting part of the chart: the location where the "end relationship" line spikes.

Let's show it as a caption instead, with a bit of formatting.

The title and subtitle don't work: they are descriptive instead of telling a story. You're reader is in a hurry, he wants to understand instantly what's going on here. And you want them to be hooked.

Let's change the wording to something that'll make people stop scrolling and still understand what the graph shows.

A few design golden rules: everything must be aligned with something. Use hierarchy of information. What's important must be big and obvious. Alignment matters.

Title looks better now doesn't it?

Hey, let's add a slight background with some good margins around!