Essentials for data visualization
It’s interesting to see the digital environment change. Our scientific, technical, economic and commercial knowledge is growing daily in order to meet specific requirements or business objectives. Interactive, statistic data systems are growing as well. New models and theories for direct manipulation of visual data analyses are developed as we speak. Lots of data is up for grabs, but companies don’t know what to do with it. We, as digital professionals, can do something about it. In my search for ways to get started with creating interactive data visualizations, I came to some essentials you should know before you start visualizing.
1. Help me understand
The human brain is able to process 1kb of information per second on a two dimensional computer screen. Our brain is inadequate if it comes to the interpretation of large data sets. So let’s help our brains a little bit to process this big data world.
Data visualization is a way to make it easier to understand data. The definition of data visualization is very clear:
Any effort to help people understand the significance of data by placing it in a visual context.
The main purpose of data visualisation is to help you think about information. The primary goal is to communicate information clearly and efficiently.
Data visualization can also:
- Identify areas that need attention or improvement
- Clarify which factors have influence
- Help you understand. Make complex cases intelligible.
2. Know your history
The first data visualization is made in the 2nd century in Egypt. It’s a table with astronomical information with the goal to use it for navigation. Tables were supposed to be seen as textual representations, but because of the whitespace, outline and the vertical and horizontal lines(to create rows and columns), they are visual representations.
In the 17th century, tables evolve into diagrams and soon more forms of visualization follow as more data becomes available.
Charles Joseph Minard created ‘Napoleon’s March to Moscow’ in the 19th century. Edward Tufte, a true authority in the field of data visualization, says the ‘Napoleon’s March to Moscow’ is probably the best statistical visualization ever drawn. That’s because of the amount of information displayed in the visual. As you can see below, the map shows the names of cities and rivers, time, temperature, route, direction of the troops and the losses among the troops.
Late 19th and early 20th centuries there was a notable growth of official agencies in research and statistics in Europe. The importance of numerical information for commercial, industrial, transportation and social planning was recognized. For example, Centraal Bureau voor de Statistiek in the Netherlands was founded.
3. Get inspired by some cool solutions
Nowadays, more and more interactive statistical data systems surge because of the technical development. More data and more systems means more solutions. Let’s have a look at some cool data visualizations of the last few years.
Google maps
The most used data visualization ever. The information is a lot more intelligible than in a traditional chart with lines and points. Google added (360 degrees) pictures and different types of views to help you understand it better.
The Funda House
Funda, a website to find your new home, has built the perfect house of data and dreams. They have used the insights collected from the 1 billion visitors who where searching for their dream house on funda.nl.
Type Directors Club Experience
The Type Directors Club (TDC) asked Collins to design its international typography competition call for entries campaign. Collins came up with a very cool tool. They blended information visualization, context-aware computing, co-creation, branded content, interactive projections, and some design philosophy to introduce the design community to typography’s future. It’s really cool to see how they have used contextual data and data from social media in order to help you create some unique typography.
Showreel Clever Franke
Clever Franke is a dutch design agency focused on data visualization. They tell some key values for data visualization in their showreel.
4. What makes a good data visualization?
As Clever Franke says in their showreel, data can be used to create new perspectives, help organizations to use the power of data to drive change and help people reconnect and explore the world around them. This is only possible if you produce a good visualization, but what makes a good visualization?
Four elements
David McCandless speaks about four elements that are necessary for a successful “good” visualization. Have a look at the graphic below.
If you combine just two of these elements, you get something prototypical and sketchy. Thats okay if you are at an early stage. With just three elements you get boring or useless. For an effective visualization, all four elements are required.
Credibility
Every visualization needs usable and credible data. During a Fronteers meetup at Clever Franke, Gert Franke gave an example of non-credible visualization. They created a micro website in order to CMAP with data visualizations to show the challenges in Chicago’s infrastructure and mobility and how these challenges affect the daily lives of citizens. In their first concept the bridges on the map were positioned in the wrong angle. Clever Franke decided to have a look at the data again and they noticed there was no begin or end point of a bridge notated in the data and there was no angle notated as well. The concept wasn’t going to work, because they don’t want to show untrue information. They had to start over.
Journalists, especially in the USA, do a lot of fact checking. Which is a good thing. This means if your visualization shows untrue information because of wrong assumptions, your visualization is worth nothing.
Almost all of the scientific studies from the past were revoked because they found falsifications in the visualizations. The charts were photoshopped or irrelevant outdated statistics were used. That is not possible with interactive data visualizations and thats what makes them powerful. The data set is loaded directly in to the application which just shows the data in a more understandable way. The development team should off course keep on checking facts during the process.
Interaction and dimensions
The use of multiple layers, 3D, movement and zoom level adjustments barely penetrates the conventional data visualization, but Edward Tufte believes this is the future. Google Maps is a good example with its movement and zoom levels.
The raise of new techniques and higher resolution screens make it possible to display big data sets in an understandable way. It is just a matter of design. This applies to all data visualizations: The closer to reality, the better you can understand.
5. Get your team together
Researchers all over the world are searching for new ways to present large, complicated, growing data sets in a accessible way. Technological developments and increasing data sets offer new possibilities for data visualization, exactly like what happened in the 18th century. It’s up to us designers and developers to visualize this data.
Data visualization is an ongoing collaboration between designers, developers, mathematician and artists. You need to work together as a team and use the skills of every member. Communication is an essential part because you need to talk with the right person at the right time. Reach out to your team members for help instead of doing it on your own.
6. Choose your tools and techniques
It’s possible to create interactive visualizations in different ways, think about websites, virtual reality, games, projections or physical facilities. In most of the cases it’s good to start with a website to make it accessible for everyone on the earth. In some cases you just want to target a specific group. Choose the form that suits best to your target group.
As front-end developer I would like to describe some tools for web.
D3
A JavaScript library for manipulating documents based on data. It allows you to bind data to the DOM and then apply transformations to the document. It makes it possible to create interactive SVG charts with smooth transitions or you can create (3D) graphics and render it to a canvas. Read more about my first experiences with D3 in this article.
Three.js / WebGL
Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Three.js makes it easier to use WebGL. So with Three.js you van met 3D areas with 3D graphics which make data visualizations more interesting.
I hope you got inspired, to get started with data visualization. Let me know if you have any recommendations or suggestions to get started with data visualization.
Happy data visualizing!
