View profile

Level Up Your Data Viz: Part 3

I think this will be the final data viz breakdown, so I hope you enjoy! This time we’re looking at @im_akeelah’s fantastic data viz, Energy Transition, and seeing if we can take the design to the next level.

Energy transition
Like our previous two data vizzes, this work deals with an important subject. What I noticed straightaway was the very graphical treatment of the title, reminiscent of a Russian constructivist poster. I’m addicted to colour, and this viz stood out instantly with a great palette. 
Redesign
While I loved the colours, one of the main things I sought to address was the accessibility issues around using white text on such a bright green. 
Colour
By flipping the role played by the dark and bright green, so the bright colour acts as an accent and our darker green provides more contrast for our text as a background. Use an online colour contrast tool to check your text is accessible. 
Pure white on a coloured background is an intense reading experience, so I used a soft pastel green for the supporting text. White is used sparingly to draw attention to the title or add extra clarity to the labels. We have a new brown colour representing the fossil fuels that we need to keep in the ground. 
Typography
The original title treatment was great, but I thought there was definitely an opportunity to further refine the style. By right aligning the text, the dynamic marks are now propelling both words from left to right. In the original we have a slightly uncomfortable feeling that Energy is flying backwards and Transition forwards. I also cleaned up the cut away effect on those bars.
I closed up the line height and was able to increase the size of the title. I used white on Energy to immediately draw attention to the general subject. And we have a nice white-green-white switch between Energy-Transition-Subtitle.
The sans-serif used was perfectly acceptable, but I opted to switch to Exo, a Google web font, “a contemporary geometric sans serif typeface that tries to convey a technological/futuristic feeling”. 
The goal of a data viz is to achieve something that can’t be done with raw data and words alone. I like to work with the idea that no explanatory text should be needed in order to make your data viz as accessible and impactful as possible. With that mindset, we should look to edit down and limit any use of supporting text.
With an interactive data viz like this example, we don’t need to display all information at all times. By optionally revealing supporting or secondary information we can save space and avoid cognitive overload. I would challenge the author to explore options such as a tooltip explainer, a movable modal, or even a slide out tray.
Chart
While it’s obvious the x-axis represents the year, it’s not clear until you read the supporting text that the y-axis is Terawatt Hours, so I added labels to the axes. I also increased the size of the axes’ text for increased clarity. 
It was possible if you hovered where the axes meet in the original to change the x-axis to 2 year increments, but I still felt the chart benefitted from giving the user every year. I angled the labels at a diagonal and used an abbreviated year as a cleaner solution that would also take less height. 
I added dashed vertical lines for each year, so a more accurate view could be had without necessarily having to hover to dig into a specific year. I also used the pastel green instead of pure white, so those guidelines were dropped right back and didn’t compete with the main lines charting the data. I moved the label for Forecast to the top of the chart and gave it a background for better contrast, so that it wasn’t so easily missed. 
The original included a tooltip for each point on the chart, providing the exact figures for each year. I redesigned this text box, restructuring the hierarchy. The main info we want is the Terawatt Hours, so we put this as the stand out text using scale and positioning. The exact day doesn’t really add anything and I felt “Total Energy Generated” was redundant information we could cut. 
Et voilà! 
Thanks for reading and I hope you enjoyed this. If so, please show some love on the original Twitter thread (which is also a better way to see the images at a larger size on desktop)…
Pascal Barry
Level up your data viz: part 3

New week, new viz. This time we’re looking at @im_akeelah’s fantastic data viz, Energy Transition, and seeing if we can take the design to the next level.
🧵👇
Did you enjoy this issue? Yes No
Pascal

Design tips straight to your inbox 💙

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Laumière 75019 Paris France