By Michael Lange on Feb 17, 2016

Using Data Visualization to Enhance the Narrative

Data visualization comes in many shapes and sizes. Many, many varying shapes and sizes. Often over-the-top, and definitely heavy on the aesthetics. But what meaning do they give to viewers?

And is that meaning what their authors intend on delivering?

When browsing through galleries and demos of data visualization, it’s easy to get the impression that data visualization has no purpose other than to look flashy. This is the unfortunate side-effect of demos (which shouldn’t be a shock, considering most data-viz demos are made with fabricated or altered data).

Things that demo well and things that work well are often at odds.

There is another unfortunate aspect at play: good design goes unnoticed. If you want to use the strict definition of data visualization being the visual encoding of information, then this stuff is everywhere.

We use it a lot at Lytics in some subtle and other not-so-subtle ways. While the service and platform garner attention and drive value for customers, it’s this subtle design and display of information that does just as much heavy lifting.

Data Visualization at Lytics

Since Lytics is largely a planning tool, a core value of ours is finding the interesting facets of your data. Traditionally, a reporting tool may provide tables of data with the key differentiator being which columns are available or how reliable their PDF export is.

This is uninteresting to me and mostly uninteresting to Lytics. We could give you the data, but is that helpful? What value does that give you?

To us, the harder, but more valuable, thing to do is distill this data into digestable information. Information that you could actually take action on.

In this way, displaying the information is closer to telling customers a story than it is tallying facts and figures. Data visualization is a part of this storytelling.

We want to express the interesting parts of data as effectively as possible. This means displaying the information in a way that matches the desired tone of the message.

This is best explained with examples.

Just the Basic Facts

These are quickly digested messages that are meant to be direct. They are good for urgency, when it’s important to immediately show purpose, and for greetings, when it’s important to ease the user into the conversation.

Numeric Metrics

An example of Numeric Metrics

Some may say this isn’t data visualization at all, but I think it’s arguable. It’s still a thoughtful display of the information, even if it’s simple. It gets the most important point across as quickly as possible.

Note that the data is larger than the label. The data is the interesting part, and it is also what will change from visit to visit. It deserves more attention.

Delta Metrics

An example of Delta Metrics

A slightly more sophisticated display will show a delta arrow. This is still quick to consume and it forces the story. This information may be available in a line chart, but in this context, it is the only information available.

Simple Metrics

Here's a work card example

Simple metrics make for great segues into a more detailed view. If you aren’t interested in the simple metric, it is unlikely that you are interested in the details.

Put That into Perspective for Me

Often times, a simple visualization can go a long way towards expressing a relationship that would tie tongues when talked about.

Progress Bars

Here are progress bars from our user profile

I don’t think there is anything more successful at showing proportions than the age old progress bar. There are only two things to read here: how much is green? how much is gray? This can be read faster than a sentence explaining the same thing.

Bubble Charts

Here's a bubble chart example

In addition to being a quickly read visualization of the proportional differences between device types, this viz encourages segmentation by this field. This may not always be true, for instance the data may look exactly as expected, and that isn’t very exciting.

When thinking about storytelling with dynamic information like this, you must think in terms of dynamic opportunities as well. Here I think, "well that’s a lot more iOS events than I expected," and I am given the chance to immediately take action on that thought.

Focal Points

A traditional story has a main arc. Likewise, products are designed around common tasks. These common tasks serve as the focus of a page or a workflow, and when they are data-driven, this is an opportunity to tell a more detailed story to a more involved reader.

A rule of thumb at Lytics is to only include one focal point visualization per page.

Visualizing Trends

An example of Segment Size Trends

This graph, although simple by all means, has much more going on than anything else up to this point. It also has the most opportunity for dynamic opportunities.

Over time, an involved reader of this graph will pick up on the nuance of the shape of the line and find insights or clarity within it. Is it flat? Should it be flat? Did it go up? When did it go up?

Since this chart shows a lot of information, it is reserved for places where we expect a user to give it more time.

Punchcard Activity Charts

An example of a Punchcard

There are many things that could go on a profile page, but the focus of this story is how much the user engages with your brand. This is best expressed in the form of an activity chart.

Like any good chart of this purpose, it first leads the reader in by immediately providing information. By processing how much blue there is, you already have a good idea of how active this user is. If you are further interested in this user’s activity, each circle can be inspected for more insights and clarity.

Data Streams Bar Chart

An example of Data Streams Bar Chart

Similar to the line chart above, this chart shows a bunch of time series information in a small space. It’s front and center with the detailed table view beneath it for storytelling reasons that have been discussed by now.

Although unrelated to enhancing the narrative, it’s important to point out why this is a bar chart instead of a line chart. Either could be used here, but they tell slightly different stories.

Line charts are good for visualizing changes, like "The size of the segment went down from 54,300 to 51,500". Bar charts are good for visualizing discrete values, even when plotted on a linear x-axis, "11,300 events were processed in the hour of 12PM, 250 were processed in the hour of 4AM."

Ostentatiousness

Sometimes we use graphs because they look good. Although this is often seen as unjust or ill-advised, there is an emotional effectiveness of shiny things that shouldn’t be disregarded.

Content Donut

Here's a Content Donut

This may not be the purist, truest visualization of this information, but the accuracy of the interpretation also doesn’t need to be pure or true. There are other tools for getting granular. The intent here is to be pleasing and personable without going too far, resulting in pandering or lying.

User Fields Table

An example of our User Fields

Do these all need visualizations like this? No. Is it fun to look at like this? Yes. This page doesn’t have a single purpose. We want this page to be like window shopping. If you see something neat, look into it. If you don’t, bounce out and enjoy the sunshine.

Mood Pieces

Those more involved in the data visualization scene may have read thought pieces on data art versus data visualization. I personally don’t think there needs to be a distinction, and that it’s this kind of overclassification that pigeonholes great artists and designers.

Data can be visually encoded in cold, sterile ways for the purpose of optimal readability, and it can be visually encoded in far out ways that border unintelligible babble. But, it can also be visually encoded anywhere in between.

Mood pieces fall closer to the "far out" end of the spectrum.

Content Graph

An example of Content Graphing

The primary purpose of this graph isn’t to act as navigation, even though it can be used that way. This is a mood piece. It was made to really express the vastness of content and the complexity of the subject. Content topics aren’t a simple list, they are interelated and everything you write will ripple through this web.

The reactions we have gotten have actually been spot on. They range from the "woah…cool…" science exhibit awe to the "oh geez, what is this" I’m-in-over-my-head anxiety. To me, this means we were successful.

Since mood pieces are meant to be emotional, it is more important here than anywhere else to really put effort into usability. Any small hiccup can break immersion.

Getting Here

How do we go about building these? How do people create great visual displays of information? The most important thing to remember when considering data visualization is that it is an antidisciplinary field.

There has been a lot written on the topic and plenty of tools have been made to facilitate development, but ultimately only a lot of creative play and deep care for the data you are visualizing will determine your success.

So the next time you are in powerpoint’s chart tools or you’re knee-deep in d3 examples, take a step back, study your data, and think deeply about your message. That’s how it begins.


By Michael Lange Front-End Engineer

Michael works hard on our front-end web team to make sure our users have a solid product experience. He digs climbing, great food, video games, and euphony.