Data Visualization Infographics v.s. Products

Takuma Kakehi
Sep 8, 2018 · 8 min read

I was fortunate to participate in a panel discussion concerning data science hosted by Toptal. As a designer, my contribution was to share examples on how data presentations can mislead one when presented as real facts, and how data visualization products require high sets of personalization. When data is used for presentations, designers and/or data scientists have to be selective with its range and subject to make their points to the audience, however, the act of extracting also risks adding bias. With that considered, when we provide tools for users to analyze data by themselves, the key is to make the tools easy to personalize, so individual stories from data can be more accessible. Since the time was limited during the discussion, I wanted to share some follow up here.

Framing Data

Years ago, I heard about a fascinating artist exhibition on from a podcast. The artist collected data and studied the taxonomy of shape profiles from objects in nature. The same profile analysis was done with alphabets in various languages. By comparing two results, the artist found that the distribution pattern for each study showed similarities. From the story, the exhibition seemed to conclude with a beautiful hypothesis; our languages evolved based on humans’ pattern recognition capabilities that have been cultivated through nature.

One question later stuck in my head. What if the artist had the hypothesis even before running this analysis. The data presentation could be biased to come to the conclusion. Once a solid hypothesis was made with small sets of data, the choice of in-depth analytical methods as well as presentations can be biased, leading to support the hypothesis. As a result, numbers, which are an extremely powerful amplifier to back theories, could confound the fact.

Infographics are visual representations to convey information in data quickly and clearly. The common argument in misleading infographics is when limited x or y-axis are shown in charts. For example, the below graph about “If Bush Tax Cuts Expire” visually appears as if “Jan 1, 2013” on left is about 5 times larger than “Now” on right. However, the actual numeric gap between “35%” and “39.6%” is not as steep as how it is represented. The misrepresentation is not only about the y-axis in that is not starting from 0 but also we also could question about tax in successive presidencies, which should be represented in the x-axis further along. With the context of historical tax rates, such as in the 70s and 60s, the argument that the chart is trying to make may not be that relevant.

The famous chart shows how the graph is deceiving from the actual numbers “35%” and “39.6%”. (Source: Media Matters)

However, starting a chart from 0 is not always helpful. The change in body temperature may not be as visible if the graph started at 0. In the context of health monitoring, it is better to ignore the bottom to catch the sensitive changes. In charts to change differences, they even need to capture negative values as well.

In the example below, the marks on the x-axis are not placed accurately. The graph gives the impression that the job loss increases steadily, but the correct data is showing that the up-trend slows down after March ’09, which is completely ignored in the chart.

The graph represents a steady increase, but the shift in trend can be seen if the marks were placed accurately along the x-axis. (Source: Media Matters)

The 2008 MacWorld was a significant milestone for Apple to project greater hope in the iPhone 1 year from the initial iPhone announcement. In the keynote, Steve Jobs showed the pie-chart representing Apple’s smartphone shares at the time, which was a rewarding second place in the market. However, there is a catch. The chart was tilted forward in a way to visually exaggerate Apple’s share; According to Gizmodo, the area representing Apple appeared to be about 21.5%, while the actual number was 19.5%. Apple’s second place was clear but the market share was misleading. In the end, the keynote was successful and lead to the MacBook Air announcement of the year, later the iPad, and the continuous evolution of the iPhone series. Some biases of Infographics may be inevitable to tell a story more clearly, but it is true that misleading facts with tweaked representations are not hard if the presenter intends to do so.

WIRED demonstrated how the pie chart at Mac World 2008 would look like without the tilt. (Source: WIRED)

Edward Tufte

Edward Tufte, a statistician noted as a pioneer in data visualization, emphasizes telling the truth from the data. One of his design principles, “graphical integrity”, covers the attribute. For example, numbers and visual scales should match the true proportions of the data, labeling should be clear and detailed, and representations should not imply unintended context.

For example, the 2012 electoral map from the New York Times, shredded the geographical accuracy to reflect electoral vote counts for each state. Most common maps of this nature simply color each state, but this visual deceives which party is predominant because the area size has no correlation to electoral significance. Instead, the New York Times created a map with squares of sizes reflecting electoral votes. Each square is relatively placed based on the actual geographical location for discoverability, but its accuracy is not relevant.

Vox’s Liz Scheltens adapted this 2012 electoral map from the New York Times. (Source: Vox)

Digital Products v.s. Infographics

Infographics help communicate stories that are uncovered from data. In order to keep clarity, infographics tend to limit the range and/or subject matter, which inevitably risks detaching audiences from the story’s larger context. In contrast, designing data visualization products is about creating tools for users to uncover stories by themselves. In the process, framing data-range and/or choosing subject matter are up to users.

Providing an enormous amount of data and giving full flexibility seem to be the most neutral solution, however, excess data simply does not help ordinary users. Instead, the tool should help users to easily map correlations between each different data set.

Here is a simple example. When I worked on market data charts at a media company, the company was careful not to add any bias suggesting what to buy or sell. On the other hand, finding what to buy or sell is ultimately what users are looking for from the tool. The chart is essentially a line graph that tracks stock prices- it is hard to differentiate from other market tools. So the differentiator was to overlay published stories on the graph; each story is represented with a dot along the graph line. The density of dots could lead users to make decisions but it is up to them to interpret and decide. Overlaying the right sets of information could be useful but we need to be mindful not to make it too cluttered, with the aid of filtering functions.

Market data with dots on line indicating important headlines.

Personalization

The timing of information is also critical when dealing with live data. Personalizing the alert system takes an important role for users to interface with the data. For example, the previous stock app could alert users for big price movements for each stock or group of stocks. Advanced users can set different a threshold for each index. (For example, the stock A should alert the user for a specific target price but other general stocks should only alert if the price movement surpasses 5%). A similar alert system was incorporated into a hospitality business analytic dashboard to alert for underperforming locations. It also incorporated the regular reportings as a part of the system. The importance of push alerts is increasing, as users need access to data even with smaller screen devices like mobile phones and wearables.

Personalized watchlist

AR/VR

As a new visualization technique, AR and VR are still viewed as potential next media for data visualization. However, it’s not a great platform for data visualization, at least for now.

Current common AR/VR applications are about placing conventional 2D or 3D data in the real and virtual environment respectively. It provides an opportunity for observers to see the 3D visualizations from different perspectives. It is an alternative way to interface 3D visualizations in contrast to using a mouse or swiping. Even if the technology allows data to be shown in complex forms, the complexity loses intuitiveness to communicate data. For example, linear lengths are easy to compare, but it significantly gets harder to compare angles or areas. 3D visualizations are good to express general tendencies but it is not instrumental to assess precise quantities.

Adobe’s VR Application. (Source: VR/focus)
Virtualitics (Source: VR/focus)

3D data visualization relies heavily on interactions. Features like tapping to show more details or the filter mechanism to adjust the focal point are crucial to the readability. However, current VR technology still struggles to provide an intuitive mechanic to cursor precisely in 3D space. In the flat browser environment, users interface 3D visualization with the combination of keys and cursors and are limited to move along a 2 axis. The latter still provides more precise control in contrast to the free motion in the 3D virtual space. In the meantime, I still believe that the fundamental concept of AR, which is to project a virtual information layer over real objects, still has the potential to leap data visualization to the next level.

Original post: http://www.ta-kuma.com/product-design/data-visualization-infographics-v-s-products/

References

This “bad” election map? It’s not so bad. | Vox

Edward Tufte: 6 Principles of Graphical Integrity | Study.com

Shut up about the y-axis. It shouldn’t always start at zero. | Vox

Macworld’s Iphone Pie Chart: Perspective Trick Makes 19.5% Look Bigger Than 21.2% | WIRED

Mastering data visualization in D3.js | Udemy

Colors for Data Science A-Z: Data Visualization Color Theory | Udemy

NYC Design

A publication for designers in New York and followers all around the world. Design thinking is what makes us write here on Medium to share with the designers of the world.

Takuma Kakehi

Written by

NYC Design

A publication for designers in New York and followers all around the world. Design thinking is what makes us write here on Medium to share with the designers of the world.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade