Data visualization on the web – getting started by evaluating existing concepts


Data visualization on the web – getting started by evaluating existing concepts

Data visualization is a hot topic: every day there is more data available in the world wide web that can be interpreted and visualized – the keyword is “big data”. Since the introduction of modern web technologies it is possible to create such data visualizations with HTML5, CSS3, SVG and Javascript. You don’t need to build complex visualizations with flash anymore. In this article I will give an overview of how to get started with data visualization in general. Additionally I will list some resources for the basic understanding of visualizations.

Data visualization – Get started

Before you jump into creating data visualizations for the web, you need a basic understanding of data visualization in general. Good starting points are the following books from:

Furthermore it is important to look at existing data visualizations and try to evaluate them objectively. Don’t be distracted from their look – try to analyse what information you get out of them. One big problem is that there are various different visual concepts for visualizations on design platforms like dribbble. They look really pretty at the concept stage, but if you work with real data the concepts wouldn’t work well or the user wouldn’t get the right information out of the visualization. So focus on the data that should be transported first and then create an aesthetic look afterwards.

Examples: the good, the bad and the ugly

The bad

I’ve tried to find some less-than-ideal examples of data visualization on dribbble and evaluated them with some feedback.

Line Chart

The chart looks nicely at the first glance, but it’s not really self-explanatory. I assume that the numbers on the filled line chart show the numbers of visitors of a page in a specific period of time. It seems that I can hover over one dot in the chart and get the date, but which point shows the current day? I could assume that the current day is the yellow dot, but maybe the yellow dot is currently selected. Furthermore the spaces between the dots aren’t equal. I don’t know why, because there are no captions on both axes. The donut chart in the left corner doesn’t really make sense to me. The donut is filled three quarters, but which number does this value refer to? To the 25 visitors or to the 10 likes? Or are there 10 likes from 25 visitors? But why is the donut then filled by three quarters?

Donut Chart

First of all, you should only use a pie or donut chart if you have a small number of values to compare (suggested are 2-6). Furthermore you should order the different parts of the chart from high to low ratio. This arrangement of parts is very confusing. Normally all pieces of a pie or a donut chart should result in 100%. The pieces of this donut chart result only in 70%. So on the first glance the visualization looks nicely like a tree, but the translation of the data into the visualization isn’t ideal.

Visualization without data

There are even visualizations without data. The colors really look good, but you will never find out if these visualizations will work if you don’t fill them with real data.

The Good

Of course there are a lot of amazing examples of data visualization designs on dribbble too.

Dashboard UI

You don’t really need the donut charts at the left side of the dashboard. They really look pretty, but you don’t really know which numbers they refer to. For example there are 3.145 applicants and the donut chart around the number is filled by I guess 80%, but I don’t really know why, because there is no reference number. But turn to the good, the bar chart about the applicants per day is really cool. You see immediately how many applicants there are on which day. Additionally you can see rising or falling tendencies over the time. The axes are perfectly labeled and the spacing between the bars is well-chosen. Thumbs up for this visualization.

The perfect pie chart

I’ve searched an hour on dribbble and I’ve only found examples of pie or donut charts where something is wrong. Either there are no labels, the sum of the pieces is wrong or they are not ordered by size. Shortly before total desperation I found the perfect example of a pie chart where everything is perfect. Enjoy it 🙂

Most important tool – Sketching

When you learned the basics about data visualization then start sketching your ideas. This technique is fast and easy to evaluate. You can show your sketches to someone and ask them for feedback. You can easily adapt your visualization, e.g. switch axes, and try different concepts. The advantage of sketching is that your are not distracted by visual style. You can completely focus on the illustration of the data.

Conclusion

Try to find a bunch of data visualizations that you like at the first glance and then try to look into them in detail and ask yourself questions about them, e.g. what is the main message of the visualizations? Which data is displayed? Is it logical to you? Learning to create good data visualization means to understand the data at first.

Lisa Gringl

http://lisa-gringl.com

<p>I‘m Lisa, a Visual Designer, with a passion for responsive Webdesign, UX and Typography living in Innsbruck. I love creating something visual, I like coding and I love the board game „settlers of catan“</p>