Lessons about data visualization from the US elections.
This is not a political post.
The 2020 US Presidential elections were one of the closest in the history of the US. There’s a small problem regarding how the data of these elections is portrayed. Although being statistically correct, the way the data is shown can heavily be misrepresented in different ways, thereby changing a common man’s perception and his decisions about critical topics. Before diving deeper into it, let’s first understand how the votes for the US elections are judged.
In the U.S., the citizen s directly vote for their president. However, instead of a total nationwide vote majority, the winner is determined by votes cast by electors of the Electoral College. Each state has a set amount of electors, amounting to a total of 538 electors across all the 50 states. Most of the states have a ‘winner-take-all’ system that awards all electors to the Presidential candidate who wins the majority of votes. The candidate winning the majority of electoral votes, that is 270 of the 538 votes, is elected as the President.
Red vs Blue States: An inaccurate representation
The above image of the 2016 US election was gaining popularity on Twitter, which caught the eye of Karim Douïeb, a designer from Belgian. The very basic problem he found was that the map didn’t represent individual votes. “I told myself, this is completely wrong in terms of data visualization, I’m not so into politics or anything, but I had to correct this visual mistake”, Douïeb recalls. He took upon himself to solve this problem and here’s what he came up with.
This was an amazing approach that not only depicts an accurate representation of the votes but also smoothly transitions from the problematic representation.
The problem in the previous version was that it colored a US state county based on what the majority of voters voted there ignoring how many voters voted. Certain regions are more densely populated than others. So a region occupying more space on the map, but not having a relatably large population, would misguide the viewer. Karim Douïeb perfectly portrayed this in his representation by considering the geography as well as the population. Representing each county by a dot sized proportionally to the number of its associated voters, offers a much different reading of the situation. Someone shared this with the words “ Land doesn’t vote. People do “, which articulates the entire concept very well.
Bubble charts to showcase Election Results
These bubble charts like in the example we saw above were introduced by Fernanda Viegas and Martin Wattenberg. They are pioneers in data visualization and analytics. Their research has helped shape the field, and the systems they’ve built are used daily by millions of people. Bubble charts are optimal for showing the relationship between data using the size of the data plot as one of the visual elements. In traditional graphs, the position of the data plotted can indicate 2 values, one each on the x and y axes. In comparison to that, a bubble chart can be used to represent 2 more dimensions by varying the colour and size of the bubbles. But bubble charts are not always constrained to these rules, their dynamic nature opens up a lot of possible ways for designers to exhibit information in interesting ways.
Let’s take a look at some of the conventions followed when designing these.
1. Scale bubble area by value
When deciding on the sizes of the bubbles for different values, it is important to realize that you should not scale the radius corresponding to the data value. Instead, the area of the circle should be ratioed to the value.
2. Packed or Overlapping
Bubble charts can either be presented in a packed way, with all the bubbles packed together. Or they could be overlapping in case their position depends on an axis. Commonly, overlapping bubbles are presented with transparency to differentiate between them clearly. The overlapping also puts a limitation on the number of data points that can be plotted while keeping enough readability.
3. Context
If you are using a visualization application with interactive capabilities, it can be a good idea to turn on the feature so that values are visible when individual points are selected or hovered over. For print, it is a good idea to label key points to improve a bubble chart’s communication abilities.
4. Incorporating negative values
Obviously, a shape can not have a negative area, so generally, such use cases are avoided. However, if demanded, such information can be depicted in other ways. For example, you might have filled circles indicate positive values and unfilled circles indicate negative values. As another alternative, you might have different colors to show positive and negative values. Another idea could be to have positive and negative values on separate sides of an axis just like a regular graph.
Different ways to represent the US Election Results
The earlier representation that we discussed of using dots does give a better picture of how the country voted or the ‘Popular Vote’. However, as we learned, the winner of the election is decided by the electoral votes of each state as a whole and not the individual votes. So, an alternative state-wise colored map as shown below is used, which is also not free of problems. The state of Montana, for example, that takes up a bigger chunk of space has in-fact lesser electors than the smaller New Jersey.
Various attempts have been made to solve this problem of relating population density with landmass. Cartograms, in particular, have been very popular that use shapes to show the relation between population and region. For the elections, the number or size of the shapes indicates or relates to the number of electors in that particular region. Some of those attempts are as stated below.
The above map by a portal FiveThirtyEight is an hexa-map with each state having a surface area corresponding to the number of electors shown with hexagons. The advantage is that it shows the important information while still preserving some familiar geographical references such as the position of the states and their boundaries. They have also used another interesting way of showing the race by using what they call a snake chart that we have shown below. This makes it easy to state what states have an ongoing competition and what states are less likely to flip during the counting process.
Drawbacks of cartograms
The Cartograms too are not flawless. Many people would argue they look weird or downright ugly. But during a sensitive time like the elections, when the audience of these maps is the entire country, if not several other parts of the world as well, using these maps can be dangerous. They distort geography and do not have the same level of intuitiveness and familiarity as the geographical maps.
A news portal, Bloomberg, in particular, have defaulted their election graphics to cartograms.
“I’m of the opinion that audiences won’t become familiar with different kinds of forms unless we put them out there,”
— McCartney, the graphics developer at Bloomberg said.
Tips for better Data Visualization
1. Easy Accessibility
You might get inspired by innovative and trendy stuff but you need to make sure that the top priority should be that the users get the information they need. And so even if you use different interactions, you need to make sure that all the information should not rely on these interactions and at least the most important information is depicted directly without hiding behind any elements.
2. Visual Hierarchy
You need to make sure that the user does not get too overwhelmed by looking at a complex data chart. You should add visual hooks and give the users a direction to follow while reading the chart, and not scatter your data all over the place. The example we discussed about bubbles emphasizes this very well. In that case, the size of the bubbles created a good distinction and led the viewers’ eyes from the most critical information to the least.
3. Responsive
One of the most important tips is to resist the temptation of directly copying your desktop content to mobile. The user experience on mobile is different from the desktop approach. You need to take into account, for example, the screen size of the device to avoid messy and unreadable data. For example, a bar chart with a few data points may be more suitable for the portrait mobile version, whereas line charts would be preferable for the landscape desktop version. There could be variation in available interactions like hovering vs zooming. Depending on the audience, special attention needs to be given to make the data be visualized responsively.
Closing Thoughts
While discussing the elections, we saw a perfect example of how data visualization, when done correctly, reveals critical information accurately. It is not uncommon to see poor graphs and maps that propagate misinformation by stretching things out of context. It is therefore very important to put the correct narrative out there and do so in interesting ways, that make an impact on people’s lives. Designers can do a fantastic job of empowering this ethicality. Even the smallest of visuals can influence a convincing story and we at Pineapple, always thrive for such detailing.
If you like what you read, do clap for us and check out the articles recommended by us below :)
This is how Netflix, Snapchat, and Microsoft break UX Design principles
The future of Social Media experience
A quick guide to an effective design handoff
Want to say hi? Drop us a line on hello@pineapple.design
Check out our work
