July 2, 2024 Smashing Newsletter: Issue #463
This newsletter issue was sent out to 199,304 subscribers on Tuesday, July 2, 2024.
Editorial
When designing data visualization, the most damaging thing we can do is to oversimplify a complex domain or mislead the audience. Our data must be complete and unbiased, our insights accurate and up-to-date, and our UI must match users’ varying levels of data literacy.
The value of data visualization is measured by useful actions it prompts. In this newsletter, we look at data viz from different angles — charts vocabulary, data visualization in design systems, accessibility, color scales, and everything in between. If you are designing charts or dashboards, you’ll find a few gems in here.
If you’d like to dive deeper, we’ll run a full-day workshop on Practical Charts Masterclass with Nick Desbarats, with all the fine details of data visualization, in our lovely SmashingConf Antwerp later this year. We’d love you to join us there! And if you can’t, we have some other workshops starting in July:
- Advanced Modern CSS with Manuel Matuzović,
- Design Patterns for AI Interfaces with Vitaly Friedman,
- Fast And Budget-Friendly UX Research, with Paul Boag,
- SmashingConf Freiburg 🇩🇪 — The Web, Sep 9–11
- SmashingConf NYC 🇺🇸 — Front-End & UX, Oct 7–10
- SmashingConf Antwerp 🇧🇪 — Design/UX, Oct 28–31
Happy designing, everyone — and sending a lot of good vibes and positive thinking your way!
— Vitaly
1. Financial Times Visual Vocabulary
Violins, doughnuts, pies, slopes — data can be visualized in many ways. But which type of chart should you pick? To help you select the optimal visualization type for your data, the Financial Times Visual Journalism Team published the Financial Times Visual Vocabulary.
Available as a poster and website, the visual vocabulary summarizes the characteristics of different types of data relationships and the charts that can be used to tell their stories. The poster is available in English, Spanish, French, German, Japanese, traditional Chinese, and simplified Chinese. A useful starting point for making informed and meaningful data visualizations. (cm)
2. Data Viz In Design Systems
If you are looking for some real-world examples of how to define data visualizations in a design system, here are some design systems you might want to check out.
Shopify’s Polaris design system defines core traits of effective data visualization, do’s, and don’ts, and highlights practical examples.
The MetLife Global Design System includes guidelines for accessibility, as well as color and typography to ensure data visualizations are in line with the brand.
The design system for the WHO includes a chart library, design guidelines, color and typographic style specifications with usability guidance for internationalization and accessibility. Another great example is the GOV.UK design system, with principles for text, annotations, and interactive charts.
And, last but not least, the If Design System: It has been archived by now, but still offers valuable insights into things like color, type, and accessibility. Kudos to the creators for publishing the design systems so we all can learn from their wonderful work! (cm)
3. Data Viz Decision Tree
You’re looking for a quick and easy way to find the right chart for your data visualization? From Data to Viz has got your back. It leads you to the most appropriate graph for your data, links to the code to build it, and lists common caveats to avoid.
The only thing you need to do is pick the main type of data you have, and a decision tree will guide you towards the possible options for your data and context. For each potential solution, you get real-life examples using R, Python, React, and D3. (cm)
4. Color In Data Visualizations
Color plays a crucial role when visualizing data. So, what do you need to keep in mind when choosing and using color for your data visualizations? Lisa Charlotte Muth wrote a four-part article series explaining all the fine little details.
The first article in the series gives an overview of the different color scales and how they map to data. Part 2 answers the question of when to use hues and when to use gradients. Part 3 is dedicated to the peculiarities of sequential and diverging color scales, and part 4 explores when to use classed and when to use unclassed color scales. A comprehensive guide that takes the guesswork out of working with color. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23 - Fast and Budget-Friendly User Research and Testing workflow
with Paul Boag. Jul 11–25 - Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Aug 22 – Sept 5 - Creating and Maintaining Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Jump to all workshops →
6. Data Viz Project
We all know pie charts, bar charts, and waterfall charts, but what about alluvial diagrams, sankey diagrams, or choropleth maps? The world of data visualization is even more diverse than one might assume. To help you find the right visualization for your project and explore rather unknown types of data visualizations, the team at the infographic agency Ferdio created the Data Viz Project.
The Data Viz Project presents all relevant data visualizations, those you see often, just like the rather unknown ones. You can browse them by family, input, function, and shape, or just scroll through the complete list for some inspiration. Each data visualization comes with a short explanation that highlights potential use cases as well as real-world examples. (cm)
7. Fundamentals Of Data Visualization
As objective as data might be, there’s a human factor that is easily overseen when it comes to creating visualizations that accurately reflect it: bias and misunderstandings. Having worked with students and postdocs on thousands of data visualizations over the years, Claus O. Wilke, Professor of Integrative Biology, knows from experience that the same issues arise over and over when it comes to visualizing data.
In his book Fundamentals of Data Visualization, he collected his accumulated knowledge from these interactions to help everyone create clear, attractive, and convincing data visualizations. You can read the complete manuscript for free on the author’s website. (cm)
8. Getting Data Visualization Right
A wonderful comprehensive guide to getting data visualization right comes from Sara Dholakia. She takes you step by step through four essential questions you need to ask yourself in order to be able to choose the right type of data visualization: What message am I trying to communicate with the data? What is the purpose of the data visualization? Who is the audience? And what type and size of data am I working with?
To accompany the guide, Sara also created two resources you might want to keep close. One of them is a chart reference guide with information on over 30 of the most commonly used charts, including what they are, when to use, examples, and design tips. The other is a cheatsheet providing an at-a-glance overview of which chart is suited for which use case. (cm)
9. Accessible Data Viz
Data visualizations can quickly become an accessibility bottleneck, particularly for users with vision impairments. So, how can we do better? Kent Eisenhuth and Kai Chang wrote a case study in which they share precious insights into how an accessibility-first approach led them down the path of creating better charts, with a better outcome for everyone.
Another wonderful read on data viz accessibility comes from Lisa Charlotte Muth. She explores how colorblind and colorweak readers see color and what this means for your data visualizations.
To close knowledge gaps around accessible data visualizations, the Office of National Statistics in the UK offers a free data viz accessibility course. It includes 11 modules, which you can take at your own pace.
For more resources, also be sure to check out the resources list by the DataViz Accessibility Advocacy and Advisory Group and Silvia Canelón’s collection of resources on how and why to make accessible data visualizations. (cm)
10. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.