#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: - [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](. [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. [SurveyJS]( 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 Workshops]( 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: - [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 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 [FUTURE LONDON ACADEMY]( 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! [SVGATOR]( 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]( by Addy Osmani - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Check out all books →]( [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 - [Tales Of An Eternal Summer (July 2024 Wallpapers Edition)]( - [How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers]( - [How To Make A Strong Case For Accessibility]( - [So Your Website Or App Is Live… Now What?]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](