Experimenting with data visualization

Data visualization as you might of guessed is the study the visual representation of data. Currently, the most popular form of data visualization that demonstrates creativity would have to be infrographics. The most simplest form would most likely be the table. Now when it comes to web design, designers tend to stick with what they know. Tables are used to produce pricing pages, pie charts to demonstrate percentage and proportion, bar charts to display discrete or discontinuous data and so on.

What we have to come to terms with is that data visualization can be used anywhere. Navigation is filled with data. It contains a list of links to pages on your website or to other websites. So why do the web designers of today always display these list of links in the same way? Why not develop a pie chat type navigation or line graph? Not only this but there seems to be a lack of creativity when it comes to data visualization. When was the last time you saw a ‘new’ type of graph. This article will highlight some of the brilliant data visualizations we see around the web along with some that we could or should see.

Current popular methods

Now I am no expert when it comes to data visualization and if I say there very few ways to represent data, a table, a pie chat, a bar/line graph, I am most likely wrong. For one these are two dimensional. However, the current forms of data visualization of today are probably the most efficient ways of representing data, hence why there have been no new developments.

Tables

Take the table for example, a simple representation of data using rows and columns to arrange data. Websites that use tables and their default CSS stylings in web design are not particularly exciting. However, when you visit websites such as wufoo you can see the potential of beautifully styled tables. Bare in mind a table does not have to use the dedicated tags supplied by W3.

Pie charts

A further example of data visualization is a pie chart. I shall always remember who invented the pie chart thanks to QI. Florence Nightingale, a nurse during the Crimean War needed a way to better represent her data. She devised a circular graph known today as the pie chart. (After visiting wikipeida it would seem William Playfair has been credited for the first pie chart). I’m unsure if the name has anything to do with it’s origins but It would make sense if it does. Few websites tend to use the pie chart to represent data but the few that have pay close attention to the colour scheme. A section can be emphasized even if it is not the largest.

Bar and line graphs

Probably one of the most popular forms of data visualization is the bar or line graph. You will see these everywhere. In the newspaper, on the television, in books, everywhere. I feel the clarity of bar and line graphs have led it to be the most popular.

In todays websites these types of graphs find themselves on analytic websites. It is clear to see when you get a spike or a fall in traffic without any labelled axis.

Mint’s gorgeous bar graph displays the number of visits each day, the attention to detail here is outstanding. This graph also uses tabbed navigation to alter the data used.

Below are a couple more bar graphs used in web design. The right bar graph displays how many posts were published each month. Have you ever thought of displaying your blog’s archives like that?

Venn Diagram

Very rarely used in web design. However, when pulled off in excellent fashion (as we can see here from analog.coop) I can only see a rise in the use of Venn Diagrams. The team at Analog have inspired me to explore Venn Diagrams and I hope they have inspired you as well.

Incorporating these into your designs

It’s (relatively) easy to incorporate graphs into your designs. If you are experienced in Photoshop you can mock one up manually paying close attention to all the small details or if you’re not I guess you could save graphs produced in Excel as images and upload. There are also a number of JavaScript solutions for online graph drawing. It’s interesting to see that tables have been given the necessary HTML properties yet other visualization methods have not.

When staring a large chunk of data try and forget about lists. Instead delve deeper into a single list item. Say you want to display the latest comments from your blog. What could be displayed for each list item: the author name, the gravatar, the time and the comment itself. Now take a step back and think how this data could be displayed. Firstly, the first latest comment could be more prominent then the second, perhaps by size or colour. The length of the latest comment could determine the width of the containing div.

Experimenting

I think the time has come for all web designers or designers in general to begin experimenting with data visualization. The few that do, I would suggest moving away from infographics and print design. Make infographics interactive. Turn infographics into websites..

Analyzing what data you have

If you would like to design your own graph then first you must gather all the data that you would like to display. Group and categorize the data through abstraction until you have data that in it’s simplest form can be sorted into a table. Then analyze what each bit of data is, is it a colour, a place, a thing. Begin to think visually how each bit of data could be displayed. For example a place, such as a city could be displayed by the size of it’s population or by it’s geographical size.

Being creative

When visualizing data one doesn’t have to be entirely creative and reinvent the wheel. It is easier to experiment with current methods. Instead of using rectangles in bar graphs use an image, a skyscraper for example, each floor could represent a value. If you try to be creative you will undoubtedly fail however if you forget about everything but remain focused on visualizing data I’m sure you will succeed. Get off the computer, go outside. Spend twice as long looking at things that just pass you by on a normal day. I’m sure a number of designers will be familiar with analyzing every font/typeface used in a shop’s logo, looking at the layout of a restaurant’s menu or even looking at person’s dress sense.

Creative examples of data visualization

I assure you, you will find more inspiration from the world around you than from your computer. Nonetheless I have gathered a number of examples that demonstrate creativity when it comes to data visualization. Use these as inspiration but remember the real inspiration is away from computer.

Further Examples

15 Stunning Examples of Data Visualization
50 Great Examples of Data Visualization
30 new outstanding examples of data visualization
Grid Accordion with jQuery
Digg Labs

  

Written by Liam McCabe

The almighty creator of CreativityDen. Loves every bit of design as well as going out with friends, playing golf and enjoying life!