Guten Tag Smashing Friends,
When we think about charts, we often perceive them as a way to visualize data. However, charts usually are more than just that. They have a job to do. They must explain, highlight, point out, invite conclusion — and they must do so with accuracy in mind, avoiding bias and misleading representation.
In this newsletter, we explore practical techniques and resources to design honest, accessible and accurate data visualization. From accessibility guidelines and reference sheets to Figma kits and how to prevent misleading charts.
Are you ready to talk about all things CSS? Get your free ticket.
And here’s our latest line-up of workshops and conferences we’ve been preparing:
Happy designing, everyone — and sending a lot of good vibes and positive thinking your way!
— Vitaly
1. Defense Against Dishonest Charts
Data visualizations aren’t as objective as one might assume. Quite the contrary is true: a chart can be technically correct and misleading at the same time. It can make something good look bad, significant changes can look like nothing, or a decrease can look like an increase.
Flowingdata published a helpful guide that raises awareness for how small changes in the design can skew the message of a chart. Using interactive examples, it explains the anatomy of a chart and how different choices in combining visual encodings and scales lead to different charts that reflect different points of view.
A must-read for anyone designing data visualizations but also for anyone who wants to learn how to spot misleading narratives. (cm)
2. 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, and Chinese. A great starting point for making informed and meaningful data visualizations. (cm)
3. Data Visualization Cheat Sheet
A good chart doesn’t just visualize data. It provides accurate and meaningful insights, and it’s accessible and easy to understand. To help us make the most out of our data visualizations, Lisa Charlotte Muth regularly shares valuable data visualization tips and best practices on the DataWrapper blog.
For easy reference, Anastasiya Kuznetsova and Alex Barakov now distilled Lisa’s guidelines and best practices down into a single Miro Board cheat sheet. It covers everything from color choice and color scale to color blindness and text. A resource you might want to keep close. (cm)
From our sponsor
WAS 2025: The Largest Online Event For Agencies Is Back!
Do You Want To Learn from top designers and agency leaders, discover
new tools, and take your business and to the next level for free? Join 10,000+ web professionals at the free Web Agency Summit! Register now ↬
4. Ideas For Better Data Visualization
With applications becoming increasingly data-driven, the need for quality data visualizations is high as ever. Luckily, getting data visualizations right isn’t rocket science, and sometimes, it takes just a few small tweaks to take a chart to the next level.
Taras Bakusevych shares 20 simple rules you can follow to design better data visualizations. They cover everything from choosing the right chart type to labeling, bringing order to the data, making the right color choices, and ensuring the content is accessible. As easy as the rules are to apply, they’ll make a huge difference for your users. (cm)
5. Upcoming Workshops and Conferences
Heads up! We run online workshops on frontend and UX, 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. Avoid Misrepresenting Data
Cognitive biases and analysis mistakes are the worst enemies of communicating accurate insights from data. So what can we do to avoid them? In his free web book “Avoid Misrepresenting Data,” Matt David explores the biases and common mistakes that people make when analyzing data and how to prevent these costly errors.
The book gets you familiar with different kinds of biases to ensure they won’t affect the interpretation of data. You’ll learn how to provide more nuance to your data, why overall statistics can be misleading, how to accurately interpret trends, and more. Tips for predicting and reviewing outcomes and increasing trust in results are also covered. Happy reading! (cm)
7. Making Data Visualizations Accessible
Accessibility should be at the heart of every product, and it’s not any different for data visualizations. By making your graphs accessible, you not only ensure that everyone can use them but also that they are easier to understand. And that can be crucial to preventing harmful errors, for example in medical software where a confusing graph could result in a patient receiving wrong medicamentation.
Developing and designing software for the education sector and having worked in cancer research, Sarah L. Fossheim knows first-hand how accessible data impacts more than just the user. To help us build data visualizations that prevent confusion and misunderstandings, Sarah summarized ten dos and don’ts to keep in mind whenever you’re designing a chart or graph.
For more guidelines and useful tools and resources for making your charts and tables accessible, also be sure to check out Vitaly’s LinkedIn post. (cm)
From our sponsor
Seamlessly Integrate Your Tools And Services On HubSpot
CopyHubSpot’s developer platform helps teams connect new and existing software, unifying their tech stack. You can build apps with HubSpot APIs and extensibility. From listing your app in the HubSpot Marketplace to building custom solutions, there’s something for everyone to grow better.
8. Useful Figma Kits For Charts
We came along some useful Figma kits to help you tackle the data visualization challenges you might encounter in your work. One of them is Semrush’s Intergalactic Design Systems Charts Library. It includes more than a dozen easy-to-use and fully flexible chart components and also features links to guides and hints about usage for the different charts.
Another handy helper is the Ethr Design System. Focused on reusable components for fintech products, it includes more than 300 responsive components, among them line graphs, area graphs, bar charts, and pie charts. Another Figma kit you might want to check out is the open-source dYdX Design System.
Last but not least, there’s the City of London Data Design Guidelines. The PDF includes guidelines, best practice examples, working processes, and links to tools to help you understand the basic principles of data visualization. Four wonderful resources with lots of inspiration to make your data visualizations more straightforward. (cm)
9. 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?
Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.
10. 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
