Hello Smashing Friends,
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:
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)
From our sponsor
Transform Your Workflow With A Fully Integrated Form Management Platform. Build Better Forms, Faster.
Discover SurveyJS, an open-source JavaScript library suite for secure form creation and data collection in your application. Build enterprise-grade JSON-driven surveys and forms quickly and without manual coding. Collect and store responses while retaining full control over your data. Integrate with any backend system. Start with the free, full-featured demo.
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.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s a quick overview:
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 you 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)
From our sponsor
Join UX Expedition This August
Discover the future of UX and Product Design in a 4-day journey through London’s leading product companies. Explore Product Design Strategy, Data Design, Gen AI, Product Branding during office visits, keynote presentations and workshops. 4 days. Only 30 spots.
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 the step through four essential questions you need to ask yourself in order to be able 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)
From our sponsor
SVGator’s New Lottie Support Feature Is Out!
Now it takes only one tool to create or edit Lottie animations and export them instantly. SVGator, the web-based animation app has come up with a new feature that lets you import and export Lottie files without the need of any 3rd party apps or libraries.
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?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
11. Recent Smashing Articles
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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
