Chart design

We talk through a few tips & tricks that I use when designing charts.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack D3 Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Fullstack D3 Masterclass

  • [00:00 - 00:19] All right, so now that we know how to break our data set down into different data types and then how to visualize each of those types in different visual dimensions, I wanted to give a few tips for overall chart design. The first one is just simplify as much as possible.

    [00:20 - 00:55] Edward Tufti calls this the data to ink ratio and it's basically when you're done with your chart or visualization, if there are things that you could do without, then go ahead and do without them because they're just going to distract from the data itself and they're kind of going between the user and the data. So over here on the left you can see our bars are, they have this kind of 3D effect, we have grid lines going all the way across on top of our data.

    [00:56 - 01:18] We have these ticks at the bottom which aren't really serving any purpose in the gray background. We also have this gray border, so if you look at these two charts, you're going to focus on the data way more quickly with the version on the right than if you were presented the version on the left and what is important when you're looking at a chart is usually going to be the data itself.

    [01:19 - 01:34] Okay, the next tip I have is to annotate in place when possible. So something else you'll see a lot is you might have these different bar categories and then have a legend on the right.

    [01:35 - 01:54] Legends are really great, definitely have a legend if you need to have a legend or if a legend would be useful, but when possible put that legend within the chart. So with our bar chart example, instead of having the legend on the right, we can just label each of these bars on the bottom.

    [01:55 - 02:24] I've seen line charts where the lines themselves are labeled instead of having a key with colors that correspond to the lines and this just makes the relationship between that label and the bar really strong and you don't really have to rely on color to have the user go back and forth between the legends and each bar. And then this last one is to add enhancements as long as you're not adding too many.

    [02:25 - 02:50] So if you're doing a scatter plot, adding a trend line would be really helpful if the goal is for your users to be able to see the relationship between the two variables. It's really about focusing on what is the goal, what do I want people to take away from my chart and then facilitating that as much as possible with trend lines or annotations or highlights.

    [02:51 - 02:56] These can all go really far for helping to make your charts digestible and impactful.