Visualization is a relatively new field, but we seem to be developing an understanding of what it is and what it can be used for. This year, we refined existing methods. With less emphasis on novelty of visual forms, we focused more on what we wanted to communicate.
I’m looking forward to what the next decade brings.
As I do every year, I picked my ten favorite visualization projects. Here they are in no particular order.
Best Blend of New and Vintage
3D elevation 1878 USGS Yellowstone Geology Map
Just look at it. It’s a blend of tools and a blend of new data and vintage documents. Scott Reinhard found the perfect balance. [See the Project / On FlowingData]
Best Font Doubling as Commentary On Gerrymandering
Gerrymandering is often presented as a technical topic that sometimes makes people’s eyes glaze over. Gerry, a font by Ben Doessel and James Lee that used actual district boundaries for letters, distilled the topic down to its WTF-ness. [See the Project / On FlowingData]
Best Climate Change Alarms
Climate Coverage by The New York Times
Climate change is difficult to cover for many reasons, but from a data point of view, you have to deal with scale, reader preconceptions, relatability, and immediacy. The New York Times came at it from many angles. I hope they keep going. [See the Project / On FlowingData]
Skittles packages say the following: “No two rainbows are the same. Neither are two packs of Skittles. Enjoy an odd mix.” Possibly Wrong was like, yeah right. They did the math and put it to the test. [See the Project / On FlowingData]
Mapping America’s wicked weather and deadly disasters
For The Washington Post, Tim Meko made a series of maps, each conjuring the aesthetic of the natural disaster it represented. [See the Project / On FlowingData]
Best Atlas of Things in Space
The Atlas of Moons
National Geographic went all out to show the interesting moons in our solar system. Spinning things, orbits, craters, oh my. You might want to run this on a modern browser and a good computer for maximum effect. [See the Project / On FlowingData]
Best County-to-Bubble Transition
Try to impeach this? Challenge accepted!
There was an election map going around that was meant to represent strength in numbers. Karim Douïeb used an apt shape transition to show a different perspective. [See the Project / On FlowingData]
Best Unexpected Use of R
I thought I knew what you could do with R visually. Thomas Lin Pedersen’s generative art experiments surprised me. [See the Project / On FlowingData]
My original plan was to pick my favorites for the decade, but I just couldn’t bring myself to do it. There’s too much good work. It felt too permanent, and my favorites can easily change based on when you ask me. If I liked something, I posted it.
A few rules of thumb for designing with charts and graphs
You’ve got a credible statistic or two, and you’re ready to share that information with your audience. Do you write it out? Draw a picture? Use a chart? To make sure your audience understands and retains the information, it needs to be compelling and accurate.
But the choice of what type of visualization to use isn’t purely aesthetic, nor is it entirely personal. The wrong choice can lead your viewer to boredom, confusion, or both. Even worse, visualizing data inaccurately can constitute a breach of trust between you and your audience.
So let’s take a look at how to choose the most accurate and engaging way to visualize your data.
For data sets that evolve over time or are grouped by multiple categories—like different industries or foods—or both, a bar graph is a solid choice. A few tips will help ensure your bar graph is easy to read:
Order your bars chronologically.
Use one axis to label the time frames, and use the other to label the quantities.
Never order the data from most to least or least to most—chronology is the better measurement for your viewer.
For bar graphs that involve multiple categories, you can either make individual graphs for every category or keep it as one by including multiple bars (one for each category) at each time label. These bars can be side-by-side or stacked on top of each other, as in this graph from an interactive annual report for Bluetooth:
If your data set is grouped into multiple categories andis NOT bound by time, you should organize the bars from most to least, or least to most. This type of organization helps viewers to draw conclusions quickly. However, if it adds up to a whole—such as total revenue by category—that won’t be apparent in a bar graph. For this type of information, you should use a pie chart instead. I’ll get to those shortly.
Much like bar graphs, line graphs are useful for showing data over time or grouped by category. But a line graph allows for nuance. It’s a great choice for showing information over very long periods or a wealth of incrementally changing data. That’s because the organic nature of a line allows it to bend and change with more detail.
A beautiful chart that no one can read is just abstract art.
In fact, you should be careful when using line graphs to show only a few points in time. Without knowing how to accurately fill in the data in between the time periods for which you have data, you’ll presumably draw a straight line. However, the rate of growth or decline between those times may not have been so linear. For this reason, line graphs should be used carefully and with complete data sets to avoid distorting data.
Allen Downey offers up a great example of when to use a line graph in his article about whether first-born babies are more likely to be born late. He uses a line chart to map the likelihood of birth over a nine-week window:
Given that this chart is based on over 30,000 data points — each a single recorded live birth — there’s more than enough data to account for all the incremental changes over time and to arrive at an average distribution.
If you aren’t showing data over time or by category, a line graph is not for you. Categorical data has many helpful graph applications, though. The following is another option that works well for showing portions of a whole.
The circle chart is one of the most commonly used forms of data visualization. There are pie charts (filled in) and donut charts (hollow, with a circular bar containing the data).
This type of chart is so popular that, unfortunately, it’s also one of the most misused types of data visualization.
A circle chart can only be used when you are showing portions that add up to a whole. For example, “75% of all caterpillars like apples” could be shown with a pie chart because it’s referring to 75% out of a total 100% of all caterpillars.
You can also convert proportions to percentages for this goal. If your data point is three out of four caterpillars, that’s equal to 75% of caterpillars.
Visualizing data inaccurately can constitute a breach of trust between you and your audience.
Unlike bar and line graphs, circle charts cannot be used on their own to show an increase or decrease. To see an example of what I mean, let’s take a look at a stat about video marketing from Tubular Insights.
Between 2016 and 2017, there was a 99% increase in branded video content views on YouTube. A circle chart showing 99% would be incorrect. That would make it appear that 99% of video views were of branded video, which is wrong. Instead, you need a bar chart with two bars, one representing our baseline number of views from 2016, and one representing a 99% increase over that baseline:
This may not feel intuitive. Percentage changes can be tricky if you don’t work with them all the time. This cheat sheet from Investopedia can help you work with these kinds of numbers.
If you want to use pie charts to show changing data over time, you’d create a new chart for every time period you’re measuring and display them together for comparison.
A quantagram is a repeated pictogram or icon used to show quantity. A common example is using multiple characters to show a number of people. You’ve probably seen this technique using the classic male and female icons from bathroom doors.
Quantagrams are great for small numbers (like “12 new restaurants opened on our street”). They also work well for small percentages or proportions where a pie chart could work. An example would be “three in four restaurants [75%] on our street serve pizza.”
If you need a key to explain it, a quantagram isn’t the right choice.
Quantagrams generally don’t work well for larger numbers. Imagine your stat was “11,214 items sold in 2018.” You don’t have space for 11,214 icons in your design — and if you think you do, I recommend you think again! That’s a massive number to count out one by one. So, it’s tempting to add a key — “1 shopping bag = 1,000 items” — and just show 11 shopping bags. Right?
You’re probably trying to show that this is a big, impressive number. But when you reduce it like this, this visualization now has the opposite effect. Eleven shopping bags don’t look or feel that large, even with a key. The number “11,214” is more powerful on its own. (I’ll talk about why typography is the better fit for stats like these in a minute.)
The same thing happens with ratios. For example, imagine visualizing the stat “8,370 of the 11,214 items sold in 2018 were mugs” using quantagrams. No thanks! So if you need a key to explain it, a quantagram isn’t the right choice.
If your stat fits the bill for a quantagram so far, think about what pictogram you should use. Be careful: Because they’re so simple, pictograms can feel too reductive for serious topics. You don’t want to appear to be trivializing a serious topic by using simple icons.
If your stat is too large or not suited to pictograms, there’s an easy fix: typography. Here’s how and when to incorporate it into your design.
I bet you didn’t expect to see a section on typography in an article about data visualization. But when used correctly, typography does have the capacity to bring information to life.
The truth is, there are limited cases in which typography really is the best solution. To be clear, it should never be used just because you don’t want to create visuals. Don’t go back to the old text-only solutions of the past! Instead, use typography intelligently to achieve a successful and effective piece of content.
Your data point or number is probably a good candidate for typography if:
It’s large (greater than 100)
It isn’t a percentage of a whole or a percentage increase/decrease
It’s standalone — that is, it’s not being compared to another number
Before settling on typography, check your data against each of the points above and consider the other types of data visualization I’ve already discussed. You should eliminate all other possibilities before using type. That’s because visuals are simply more compelling and more effective at engaging your audience. Yet, visuals are only effective insofar as they’re accurate. If you face confusion or inaccuracy by visualizing your number, just go with text.
One way to enhance your typography is to combine it with a pictogram (like you would use in a quantagram, but just a single one), an icon, or an illustration. This will help provide the viewer with visual context as to the subject matter of the stat, while letting the number speak for itself.
Here’s an example of intentional choices for different types of data visualization, including typography:
In this example, it makes sense to visualize the number 16 using quantagrams — it’s a small number and therefore easy to add up visually. But the 1.8 million stat would be incomprehensible using a quantagram with a 1-to-1 ratio. And we’ve already learned that if you feel the need to use a key, such as equating every icon to quantities of 100 or 1,000, then a quantagram just isn’t the right choice. That’s why very large numbers are generally best left to typography.
No matter what solution is best for your data, aesthetic considerations span all forms of data visualization. Beyond simply choosing the right data visualization technique to use, you must pick the right aesthetic to represent your information and reach your audience. A fun neon line graph with modern type might not work for a report to investors and the C-suite. A flat, grayscale pie chart is probably the wrong choice for a summer camp pamphlet.
So always ensure that form and function are equally considered — because a beautiful chart that no one can read is just abstract art.
Organizations like Google and London City Intelligence recently extended their design systems to include standards specifically for data visualization. This speaks to the growing importance of using data and metrics in an organization’s decision making and the value of branding them appropriately.
In 2014, I created one of the first ever data visualization style guides for the Sunlight Foundation and then another one for the Consumer Financial Protection Bureau (CFPB) in 2017. I’m excited to see more organizations devote resources into standardizing their data visualization work.
The first step is defining what exactly a data visualization style guide is. As part of the Data Visualization Society, I’ve begun collecting examples of guides across multiple types of organizations. I will be taking a deep look at what is common practice, how this differs across organization types, and identifying innovative extensions that others might consider incorporating into their own guides. The more examples I have for this process, the better, so please submit guides and add to the spreadsheet!
Definition: Data visualization style guides are standards for formatting and designing representations of information, like charts, graphs, tables, and diagrams. They include what (e.g. types of charts) and why (e.g. reasons for using specific colors). Templates for various tools (like Excel, R, D3.js or Tableau) often accompany a guide to show the how and to make it easy for people to apply the standards from the guide.
Data visualization style guides fit within an organization’s larger design system. They include how other guidelines, like brand standards or editorial guidelines, apply to data visualization. For example, they specify how elements like a logo, brand colors, and language tone specifically apply to charts, tables, and diagrams.
Style guides maintain uniformity across different tools and software that produce charts. An organization’s charts should be consistent across tools and look visually similar to the rest of the blog or report it’s part of. Having a style guide with principles and components that work across multiple tools, rather than just one template for one tool, helps achieve this consistency.
Designing for data is a unique challenge. It requires considerable precision and numeracy, but also careful thinking about audience, perception and accessibility constraints. Because the information needs to be conveyed accurately and understood properly, there are additional design constraints when it comes to writing chart titles and displaying connection between labels and data. Styles and colors that may work when applied to illustration do not always work when applied to the density of information data visualization often needs to convey.
As mentioned above, I’ve collected data visualization style guidelines from a variety of organizations in a spreadsheet. Often these guides are used internally as part of a larger design system, but it’s helpful to look at examples across multiple organizations when creating one of your own. Different types of organizations have different types of information, audiences and needs. I’ve organized the examples by type, and will highlight especially effective features of each. Not all organizations release their style guides publicly, although publishing them can help build brand integrity and attract talent.
These guidelines spec out what colors should be used for and define particular palates that signify common meanings tended to re-occur in Sunlight’s work (like when used for political parties or pro/con charts). There’s also a detailed specification for basic chart structure and how to include branding to ensure that all Sunlight charts were consistent.
This guide includes examples of how to most accurately show data visualizations for their audience and a section on how to implement different categories across types of charts. The guide clearly explains some charting best practices that may not be obvious to everyone within the organization that might make a chart if they haven’t had training.
The Dallas Morning News guide includes details about color and style choices for maps to keep the displays consistent. It also includes a map of how the graphics process works at the organization. A style guide isn’t useful if people at the company don’t know how to use it properly and work with the system.
The BBC design system has a “How to design infographics” section. Notable points include a variety of examples of labels and a section on how to design responsive graphics that work for different devices.
This guide has lots of examples of dos and don’ts with explanations of why the examples work or fail. It also a section specifically about dashboards with a unique layout for dashboards to help standardize them.
IBM’s guide includes sections to help chart creators think about who the intended audience is as well as examples of common chart types and what type of data they should be used for.
If you know of a data visualization style guide that’s not on this spreadsheet, please take a moment and add it by filling out this form!
There are many different types and categories of style guidelines. It’s useful to be aware of the various types and who uses them to understand where data visualization fits into the broader design system.
Design systems are the full set of standards and documentation. All the other examples below can live together within the complete design system. They can also include code libraries and packages for developers to build with, as well as design components. The US government has a full design system with many of these systems and UX Pin has an amazing table of design systems that categorizes their components. A data visualization style guide fits into the broader design system.
Brand manuals or style guidelines are documents traditionally created by designers to document how to keep the integrity of a company’s brand across multiple implementations. They define things like brand colors with color values, typography style and usage and how to use the logo. They’re important to keep the brand consistent across materials created by different people, and to help contractors understand the core system. The design blog Brand New often pulls examples from style guides when they review new logos. One of my favorites is a spoof on brand guidelines for “Santa”. Brand manuals will influence what colors and typography is used for data visualization, as well as how the logo is used on charts.
Editorial guidelines or content style guides define the voice and tone of the brand as well as specific language usage, like how and when to abbreviate or capitalize words. Mailchimp is a great example of a brand with a consistent unique tone and a thorough guide to accompany it. Editorial guidelines are usually written by content writers and are useful to anyone at the organization or outside contractors and consultants who write or edit anything about the company. Lauren Girardin wrote How to Create an Editorial Style Guide for Your Agency specifically for governments, but the content is applicable beyond the public sector. Data visualization style guides pull content from editorial style guide for title and labeling usage. It’s helpful to have consistent messaging around errors and how notes or qualifications are worded for clarity.
Pattern libraries document how design elements are used together across a website like specific page types or in navigation.The BBC GEL has a great example in their guidelines. Paul Boag wrote How to create a pattern library and why you should bother, which gives a good overview of pattern libraries and why they’re useful for UX. Data visualization is in itself a pattern that has its own set of components like titles, subtitles, charts, data, sources and legends. These all work together to create a visualization pattern.
“Charts of charts” (which is what I’m calling them for lack of a better name) show a variety of visualization types for specific kinds of data. These can be part of a larger style guide, but on their own don’t include enough information to show the specifics of a style and why decisions were made to be categorized as a style guide. Examples include Visual Vocabulary, Chart Chooser cards, Graphic Continuum poster, and the Data to Viz website.
Standardizing data visualization in a guide can help mature this aspect of an organization and allow visualizations to fit into the broader branding and design systems that are already established. Collecting examples of these guides across multiple types of organizations and increasing this collection will show what’s standard and useful across this particular type of style guidelines.