60 Charts to Visualize Your Data
Think about a data visualization related project which you have worked on, either a subtle visual on an app or a dashboard page with a variety of graphs. How did you choose a chart for your data?
Recently I‘ve been working on LinkedIn Talent Insights, a brand new analytics product for talent acquisition professionals. Because of this, people asked me this question over and over again. But I couldn’t find a neat answer. Sometimes, like many people will do, I go through the chart library in my head and choose the most reasonable and well-received one. Sometimes I tell myself to leave my comfort zone and iterate more, but I still cannot help doubting myself. Is there any better chart that I haven’t thought about?
To better answer these questions, I decided to find a way to reveal the full landscape of data visualization. I want to expose myself and designers like me to more possibilities. The outcome is this cheat sheet.
I summarized 60 charts based on three chart libraries that developers usually use — Highcharts, amCharts, and D3. It has a good coverage from the basics to the exploratory charts. Each chart has a quick note for its use. The charts are grouped into eight types of stories that we usually tell about data — trend, comparison, composition, distribution, geo, relationship, sequence, and single values.
8 types for any story you want to tell with data
Every chart has its own story to tell. The line chart’s story is about the trend of a variable while area charts have a similar story about a trend but for an accumulative value.
If you already know what story you want, it’s easy to find matching charts using this cheat sheet, like choosing a Friday night movie, you know you want a drama, not a documentary.
Unfortunately, UX designers do not always have the luck. When I first started designing Talent Insights, I received massive datasets without a clear picture. Most of the time, I was not able to see the real data and had to start with my assumptions. To identify the best story, I investigated the data and experimented with different types of stories.
1 | Is the data related to time? — Trend
2 | Is the data comparable? — Comparison
3 | Does the data have the part-to-whole relationship? — Composition
4 | Is it a data series with an interesting distribution? — Distribution
5 | Can the data be shown in geographical context? — Geo
6 | Is there any relationship among the datasets? — Relationship
7 | Does the data have a sequence? — Sequence
8 | Is there only 1 to 3 values to show? — Single value
Why choose one over the other?
Trend Line, area, and column (in Comparison) charts can all represent trends. But if you have two or more variables, line charts are the clearest visuals. All other trend charts can be seen as line’s variations to depict some characteristics of a variable. With a shaded area, an area chart implies the accumulative value. When multiple shaded areas are stacked, it shows the composition changing over time. A step line means a variable changing intermittently. An area range has a variable which fluctuates within a range.
Comparison Bar and column charts are commonly used for comparing different categories. Both can be stacked to show the composition or compare positive and negative values. Using bar charts is usually because they can grow vertically to support long data series, use in a table, or even show rankings. Using column charts sometimes is for comparing changes over time. Besides comparing length, there are charts comparing bubble sizes and font sizes. Charts with a polar scale are good at pointing out the outliers and the commonality.
Composition Pie and donut charts particularly imply the part-to-whole relationship which people don’t relate to bar or column charts. A donut chart can fit a number inside while a pie usually has the legends outside. Tree and sunburst charts show the composition by categories. A tree chart requires a hover or clicking a segment to see the breakdown. A sunburst chart shows all breakdowns at once in the outer rings. A pyramid chart represents the hierarchy in addition to the composition.
Distribution One way to distinguish distribution charts is to identify the number of variables in your data. For a single variable, choose a histogram. For two variables, choose a 2D scatter or a polar scatter. Polar scatters work better for the data perceived on a radial scale, like directions or 24 hours in a day. For three variables, choose a 3D scatter or a bubble scatter. Various sizes of bubbles on a 2D surface is more legible than dots floating in a 3D space. For more than three variables, try a heat map on a matrix.
Geo When you think about using maps, there’re three things you should consider, the granularity of locations — city/state/country, any quantitive values, and the number of variables. Thematic maps support different levels of granularity, from countries in a world map, states in a US map, to neighborhoods at the city level. Other maps using dots or bubbles are better for more granular location data like cities. If there’s a quantitate value, choose among thematic maps, bubble maps, and pie maps. A thematic map represents one variable with colors while a bubble map represents up to two variables with bubble sizes and colors. A pie map shows the composition by location. If there’s no quantitate value, a map with pins is the first choice. If there’s any relationship among locations, you can use lines or curved lines to connect them.
Relationship This type is relatively easy to choose because each chart represents a unique relationship among datasets. For hierarchy, a node-link tree is the well-known one. If it’s about flows, then you are lucky to have the fancy Sankey chart and chord chart. They illustrate flows with or without quantitive values. In spite of visual similarity, a slopegraph is commonly used for one variable of a data series changing over time while a parallel coordinates is for the correlation among multiple variables. Force-directed graphs tend to be used for the aesthetic reason instead of the practical reason. They visualize ultra complex networks with the strength of relationships.
Sequence A funnel chart represents a variable decreasing stage by stage. A Gantt chart shows a project timeline from left to right phase by phase. A waterfall chart illustrates addition and subtraction step by step.
Single value When you want to emphasize a key metric, you can show it in a large font size or visualize the numerical value with an additional information, like a trend(sparkline), a percentage(solid gauge/progress bar/pie), a benchmark or a target of a value(speedometer, bullet).
A 5-task checklist to guide your thinking
Choosing the right type of chart is just one step of chart design. It’s so complicated that every detail in your design can be a multi-factor decision-making. So I have this checklist to make sure I think through them and keep in my mind throughout my entire design process.
1 Understand your data — How large is your dataset? How many units of measures? What’s the timeframe?
Our example: A company has 600+ locations all over the world. Each location has the number of employees and job posts with the growth rates, the attrition rate, and etc. All the numbers are independent of the duration, except the growth rate which is yoy (year-over-year).
2 Know your users — What’s their domain knowledge? What tools do they use? How frequent will they use your charts?
Our example: Users have already used similar labor market insights products. They use snippet tools to screenshot visuals. They use Excel or PowerBI to make their own charts. They put everything in Powerpoint to curate a story and impact strategic decisions. Depending on their roles, some will use our product every day, others will use it ad-hoc or once a quarter.
3 Clear about your story — Frame it as a question. Can users get the answer from your chart?
Our examples: “What schools are producing this talent?”“What companies have Company A won talent from and lost talent to over the last 12 months?”
4 Iterate and pick the most effective and attractive chart — Have you explored all appropriate charts in the cheatsheet before moving on?
Our example: For distribution of UX designers in the United States, I tried thematic maps, bubble maps, and tables with bars. I finally ended up with a bubble map and a table to highlight top cities with a map and provide detailed data with a table.
5 Validate with real data — Your design will never be done until you validate it with the real data.
My findings: The real data is far more exciting and surprising than the fake data. I’m always excited by the “abnormal” data points in the real data that tell stories. The fake data seems too “normal” to do it. There are also surprises when I put the real data into my design. The inaccurate estimation of data impacts the design details like bubble sizes on a map or x-axis in a histogram.
Interested in this post? Clap or comment to let me know! I also have…
- Tabloid size ready-to-print cheatsheet Download PDF
- 3 Methods to Design for Color Blindness
What’s LinkedIn Talent Insights?
Techcrunch — LinkedIn to launch Talent Insights, a new analytics tool, as it dives deeper into data
