12 Data Visualization Lessons Priceonomics Taught Me
What makes a data visualization great? That is the question I ask myself almost every time I work on a new data-driven article.
And like many people in this industry, I am looking to get better.
This need to be better all started at the Priceonomics Content Marketing Conference in early November.
At the conference, we listened to some of the best data people at Priceonomics and other top startups talk about data. And boy did they talk.
While I was listening to them speak it was like they were letting me in on some of their secret code that will lead to great data visualizations. And little did I know that they were actually setting the groundwork for me to figure out the rest.
But after the conference, I was still left with a few nagging questions, so I decided to do a deep dive into their articles and process.
After painstakingly studying over 100 articles from the Priceonomics writers, I found something incredible. Hidden deep in articles about credit scammers and the yoga capital of America, I learned what made their data visualization approach better than the rest.
What made me so angry was that I could see it the whole time, I just was not paying attention to the right parts. I knew I could not keep all this information to myself, so I broke down the code for effective data visualization for you below.
1. Don’t overwhelm the reader with too many charts
When writing about data-heavy topics, your job should be to help the reader understand your points with visualizations. But with access to so much data, it is sometimes hard to decide what the most important things to visualize are. And many–myself included–use way too many graphs.
Don’t overwhelm the reader with too many visuals.
There is no need to visualize every piece of somewhat interesting data to tell a compelling story. Or to include every single point from your data set.
Simplicity and focus should be used when approaching a data-driven article. And that was the first thing I noticed while reading Priceonomics: they kept not only their visualizations simple, but also made sure the whole article was easy to follow. Even if someone were to skim the work, they could unearth some interesting factoids or figures.
Priceonomics keeps their visuals sparse and only visualize points that add to the story. In fact, Priceonomics average only about three graphs or charts per article, with 20 out of the top 25 most viewed articles having three visualizations or less.
And the most viewed articles have between one to four charts, tables or graphs in total. After four visualizations, the average views drop off a cliff–like, a huge cliff with rocks at the bottom.
For example, “Ranking the Most Beloved TV Shows That Got Canceled” only had three visualizations and garnered 330k views. And in each visualization, they kept it simple and only included things that would enhance the article.
In this case, the visualization pointed out that Firefly is a cult classic and should never have been canceled. When all three graphs are combined, you can see that they form a coherent story without much extra context.
Additionally, a large chunk of these articles only had one visualization. Which I think really shows how well the Priceonomics team have mastered storytelling with data visualizations.
2. Keep your visualizations simple
But what does simple even mean in this case?
After looking at hundreds of Priceonomics graphs and charts, I found that the most successful visualizations were the ones that conveyed their meaning in a few seconds. And the information included in the graph or chart added to the overall story.
That means that when creating your own charts and graphs, you will have to make some hard decisions about what to include and what not to include. Those decisions will most likely be influenced by the text.
For example, in this graph about how TIDAL was HUGE flop, they use a simple line graph to show how little of the market TIDAL captured:
This is an extremely simple data visualization but it gets the point across in seconds. That should be your goal with each visualization.
Or take this simple but powerful example from an article about Trump Hotels seeing a decline in bookings since his election campaign:
The Priceonomics writers could have, like so many of us do, included ALL the data points, but they decided to focus on only two. And that made it a lot easier for the reader to absorb the information that was pertinent to the narrative.
3. Use a data visualization as a featured image in your article
The people at Priceonomics do this frequently and I personally think that it is a great idea. It is such a simple thing to do and should attract curious readers who see the data visualization.
Take this visualization about refugees in the United States:
The article touches on Nebraska being the refugee capital of America, but it also shows that not many refugees settle in states that you would expect like Texas or New York. They actually settle in more Midwestern states, and an interesting factoid like that will bring in more shares and views. And this was all done with just a featured image!
Using a chart as a featured image makes it easier to share the article across social media and according to HubSpot, tweets with images received 150% more retweets than those without no images. And this is especially true for interesting visuals like charts or graphs!
This also works very well with maps as featured images, because everyone loves to see where their state or city ranks. And they will share that with all their friends, which are most likely from the same area!
4. Double up on chart titles
Some people seem to think that graphs and charts should not have any text on them other than a simple title and the legend. But if you have been following along with the graphs I have shown as examples so far, Priceonomics does not fall into that camp.
In fact, with almost all of their visualizations, Priceonomics uses both a title and subtitle. This is done to further clarify what the chart is trying to say.
For example, in this graph from an article about height across the world they use the subtitle to add context to the information:
Instead of just assuming that all countries started at 5’2” in 1900, the subtitle clarifies that only the people that were over 5”2 were included in the graph. So, instead of giving the reader incorrect information, they use the subtitle to clarify exactly what their data set is.
I would recommend doubling up on titles when you are presenting an interesting sample of the full data set. For example, in an article on basketball players going to the NBA from each school, you could use a subtitle to clarify in a visualization that it was only players who stayed in college one year. Which basketball fans know that usually the great ones go pro after only one year and is an interesting piece of data.
Now take this table showing the most vegetarian-friendly cities:
Another reason for using subtitles is so that people can understand graphs without context. When labeled properly, each visualization doesn’t need an explanation or introduction. You know exactly what the chart trying to say, which makes it extremely easy to share it across social media.
This best practice really stuck with me. I mean, why can’t we use text to help the reader understand what we are trying to say with each visualization? It’s not like data points and text can not coexist on the same graph.
5. Include ALL of the data in your article
During my research, I noticed that the Priceonomics writers do a very interesting thing when organizing ranked data in a table or graph. Instead of just presenting the top or bottom chunk of data to support their conclusions, they included all of the data.
This, as they put it so eloquently, increases their “shots on goal” for each article. Which means it increases the number of people that will think it is neat or want to share it because they see something they identify with in the data. It could be the college they went to, the car they purchased or the city they live in.
Whatever it may be, the more interesting data points you can include, the better. Plus, it immediately increases the number of journalists or new outlets that you can pitch your story to during the promotion stage!
Take this example from an article about the distribution of American cars across different cities they used all 81 cities. Which gives them a greater opportunity for organic and enthusiastic shares than if they would have included only the top 10:
Or take this one that ranks the top 100 colleges by diversity, which uses a large stacked bar chart to get the point across. This is also the graph I saw at the confrence that changed my whole approach to data visualizations:
It not only increases their shots on goal with the colleges on the list, it also brings in people who want to see if their college made the cut.
It may sound a bit excessive to include all those data points, but it helps paint a complete picture. And helps people understand how well the top colleges, in this case, are doing against the rest of the world.
6. Use maps very sparingly
Sometimes the best map is no map at all.
I guess that many people would automatically pick a map to visualize their location data. I mean, it makes sense to use a map of the United States if your data is from all 50 states.
Or does it?
The best answer I could come up with after reading all 100 articles is….maybe. As in that sometimes they use maps to present data like we saw in the refugee example but other times they avoid it like the plague.
Using a map works if there are a few key insights that readers can pull directly from the visual. Otherwise, it’s better to use a graph or a chart.
For example, in their article on refugee resettlement, Priceonomics wanted to highlight that Nebraska was a key refugee state, and show that no many people would have predicted this:
And the data was grouped in such a way that the difference between the color designations was large enough to make it easy to read.
But that does not work when the data is similar or if there is not an easy way to show that difference. Like in this data set about yoga in different states, where the data points are just too close to be visualized effectively on a map:
There is a map used in the article, but this chart is a lot easier to read and puts a numbered value on each of the states. Honestly, the only thing I was able to pull from that map is that Montana loves yoga!
And finally, here is an example from an article about which countries have the best coders in the world. The Priceonomics writers used a simple chart instead of a map to illustrate the top code countries:
This chart ranks the top 50 countries, which would have looked out of place in map form. If you decided to take the geographical approach, there would be a massive map with only about 50 countries filled in. Additionally, it would not be a very useful or easy to read data visualization because some of the values are only different by .01%.
7. Highlight specific points you want readers to know on your charts
As I have stated many times throughout this article, a visualization should make the data easier to understand. And the Priceonomics team are great at this, as we know. But I saw them do something extremely subtle, that makes their visualizations better than many:
They point out what they want the reader to focus on directly in the visualization!
Check out this graph from an article about the incarceration rate in America, where they point out how the rate increased in 25 states and decreased in 25 states:
Without this small hint, the reader would be left trying to count the number of states–or just confused and gave up. I probably would have been in the later category if they choose to not point it out!
Or take this graph examining the success of A/B testing:
If you are a marketer, you probably know that A/B tests are used to compare the performance differences between two versions of a web page to see which one performs better.
Writing out exactly what percentage the page views increased by is what makes this graph so useful. The writers have taken the time to lay out exactly what they want to reader to take away from this visualization.
If you eyeballed the difference between the two columns, you know that one is better than the other. But no one is going to pull out their calculator to do that math. So you need to do the math for them and spell out that difference, or any other important info on the graph itself. Or they will just keep on scrolling and your visualization will have failed.
And labeling specific points on the graph also helps the data visualizations to stand on their own, without context. With these small additions to visualizations, you can make sure that it is understood no matter where it is shared!
8. Make bar graphs landscape to conserve space on the page
Have you ever presented a bar graph that took up a large chunk of your article just because of its height? I know it has happened to me a few times and it is probably annoying for readers.
The Priceonomics team have found a way to get around this problem. It’s as simple as going horizontal with your bar graphs!
Take this landscape-oriented graph about the percentage of women earning STEM degrees:
This makes the visualization, in my opinion, both more aesthetically pleasing and easier for the reader to understand. Additionally, you are not sacrificing precious screen space to empty space. The visualization instead fits right into the flow of the article and does not look out of place.
If this visualization was presented in a portrait orientation, the flow of the article would be off. There would be a ton of wasted screen or white space. Based solely on how large the graph would have been, the readers would not actually be able to read it without scrolling.
Another reason for dropping the vertical orientation could be because there is a large difference between the data points. In the example above, one data sample was half of the other data sample. And that would have led to a pretty large bar graph that only excels in taking up space.
Here is another example of using horizontal graphs in a piece about what political parties are more likely to go solar:
In this example, the difference between the two parties is so large that a horizontal approach fits the data very well. Check out the difference in screen space the two orientations take below:
You could fit two of the horizontal graphs in the same space that one of the vertical graph takes up. And that should be all you need to know about using horizontally oriented graphs, they use screen space effectively!
9. Include legends and labels on every graph
You don’t know where your chart will be shared without the rest of the article. So why skip such an important step?
The Priceonomics writers are label and legend masters. Every single one of the visualizations that I studied could exist out in the world by itself; be it a featured image, an Instagram post, or in another article.
In this graph from an article about mean tourists, they check off all the boxes. The writers included a legend, did the math for the reader, and even pointed out the most important information in the graph! This visualization could definitely exist on Twitter or in another blog post without any extra information from the article.
Now, let’s break down exactly how they did it so well.
First, there is a labeled legend at the top that explains what each of the colors indicate. Then, they labeled each axis very clearly, which some people forget to do. And they even went above and beyond by adding the “Net Happiness” score to explain why the countries are ranked in that fashion.
If you were to see this graph on a separate site you would be able to understand it without any outside context. Just like you are able to understand it when it is presented by itself in this article!
I would recommend using a legend on every visualization that is included in your articles. Like we have been stressing throughout this piece, each visual you produce should be able to exist on its own. And if you only introduce a legend on the first graph in the article, that can not happen.
Again, it may seem like a small thing but it can make all the difference on Twitter or Facebook! Especially when there are hundreds of thousands of new visuals created each day.
For example, in this graph from the article about bad tourists the writers still included a legend. Even though they had already explained the ranking system on another graph:
10. Brand your charts
I am guessing that you would like your data visualizations to be shared across the internet. But how will all of those readers know where those great graphs came from? And how will you be able to claim your team created them once they blow up on social media?
Priceonomics has gotten around this problem by adding branding to their client work. In their sponsored posts, the writers help other brands create compelling content using interesting internal data that the brand has access to. Then they share it with the world but only after they add branding to each visualization.
For example, in this map about the cost of being a bridesmaid, Weddington Way’s branding is quite prominent:
Although this visualization was shared on a myriad of different sites, people always knew where the data came from. And with just a simple watermark like this one, you can increase your brand’s reach significantly!
To brand each visualization, I would recommend using a simple logo in the lower right-hand corner, like Priceonomics did below. You also can include a few pieces of relevant information like a Twitter handle or website to increase your brand association.
CREATE BEAUTIFUL DATA VISUALIZATIONS
11. Use contrasting colors to differentiate between data sets
When an article deals with data at different levels or locations, it can be a little tricky for readers to follow. For example, if you were writing about the difference between a topic at the state and city level and had a many of visualizations. It is easy for your audience to get lost in the charts and end up more confused than ever.
Priceonomics avoids confusion by using color to show the difference between the data sets.
In this example, they use colors to differentiate between cities and states:
It may seem like a small thing but it can help make your visualizations even easier to understand. And as we know, when a visualization is easy to comprehend it leads to a more powerful article. So it may seem like something that does not matter, but for your readers it could make all the difference.
And this article uses color to differentiate between where people are defrauded and where the defrauders are actually located. Again it is a small thing to include but made the article much easier to follow. Especially when the titles are so similar.
12. Break up tables with alternating colors
You know how it is hard to see if you are in the right column or row in Excel when it just a massive white screen? Well, imagine how hard it is to see on a table that has been shrunk down so it can fit in your article.
Do your readers a favor and use alternating colors on all of your tables. It can be as subtle as using white and an extremely light gray, just make sure it spits up the rows.
The people at Priceonomics have done this for all of their tables. Like every table. I mean scroll up just a bit and you can see four examples of it in the previous section.
In this table showing the average commute time by occupation type, the alternating colors make the table easy to read and effective:
Just that little thing makes the 24 professions and commute times easy to read.
Even this table showing which schools have the most women in STEM courses is not overwhelming, despite having 100 data points:
I really do not feel like I would get a headache trying to read all 100 universities.
Can you imagine what it would look like without the alternating colors? It would be a mess and your reader would not be able to wade through the unorganized data.
How do you visualize data?
And that is how the data pros at Priceonomics visualize data to tell a compelling story. If you need a recap of all the tips, here they are!
To visualize data correctly:
- Don’t overwhelm the reader with too many charts
- Keep your visualizations simple
- Use a data visualization as a featured image in your article
- Double up on chart titles
- Include ALL of the data in your article
- Use maps very sparingly
- Highlight specific points you want readers to know on your charts
- Make bar graphs landscape to conserve space on the page
- Include legends and labels on every graph
- Brand your charts
- Use contrasting colors to differentiate between data sets
- Break up tables with alternating colors
If you follow those simple tips I can guarantee that your data visualizations and stories will be incredible! And if you need a few extra tips on creating compelling visuals I recommend starting with these:
Originally published at venngage.com on December 6, 2016.
