Smashing Magazine - #463: Data Visualization

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 July 2, 2024 View in the browser

Smashing Newsletter

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.

Practical Charts Masterclass with Nick Desbarats

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!


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.

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 Polaris

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.

From Data to Viz

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.

Which color scale to use when visualizing data

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.

Smashing Online Events
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.

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.

Fundamentals of Data Visualization

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?

A Guide To Getting Data Visualization Right

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.

How your colorblind and colorweak readers see your colors

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
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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#462: Dashboards UX

Tuesday, June 25, 2024

Dashboard design patterns, designing for experts, real-life dashboard examples, UX guide for data dashboard design. Issue #462 • June 25, 2024 • View in the browser Smashing Newsletter Manuia le afiafi

#461: Accessibility And Inclusive Design

Tuesday, June 18, 2024

EU Accessibility Act, how to make a strong case for accessibility and accessibility in design systems. Issue #461 • June 18, 2024 • View in the browser Smashing Newsletter Good morning Smashing Friends

#460: Storytelling

Tuesday, June 11, 2024

Free storytelling masterclass, how to design with product storytelling and storyboarding for designers. Issue #460 • June 11, 2024 • View in the browser Smashing Newsletter Dobra večer Smashing Friends

#459: UX Motion and Motion Design Systems

Tuesday, June 4, 2024

Motion design systems, UX motion choreography, motion audits and how to document motion. Issue #459 • June 4, 2024 • View in the browser Smashing Newsletter Kalí méra Smashing Friends, How do we design

#458: Design Systems

Monday, June 3, 2024

Design systems for healthcare, car interfaces, insurance companies, digital publications and universities. Issue #458 • May 28, 2024 • View in the browser Smashing Newsletter Dobré odpoledne Smashing

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏