The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. It doesn’t mean that data visualization needs to look boring to be functional or extremely sophisticated to look beautiful. To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, providing insights into a rather sparse and complex data set by communicating its key-aspects in a more intuitive way. Yet designers often tend to discard the balance between design and function, creating gorgeous data visualizations which fail to serve its main purpose — communicate information.
In both print and web design infographics — visual representations of information, data or knowledge — are often used to support information, strengthen it and present it within a provoking and sensitive context, depending on designer’s creativity.
This article presents some spectacular data visualizations and infographics which manage to combine a strong visual appeal with the effective presentation of information.
- You might want to take a look at the article Data Visualization: Modern Approaches1 we’ve written few months ago.
Data Visualization and Infographics Link
Country Codes of the World2
Country Codes of the World maps 245 top-level domain country codes encompassing all United Nations countries as well as numerous islands and territories. Each two-digit code is aligned over the country it represents and is color coded with the legend below for quick and easy reference.
Amadana is a Japanese company, which explains why they might not have realized that a scapegoat isn’t the same as an “acuarium.” The first row is for that toaster oven, the second and third rows are for an air purifier, while the last is for a hot plate.
Apple’s Tipping Point: Macs For The Masses
Very calm, soft and appealing colors within a clearly presented context. Design by Paul Nixon.
Good Magazine Infographics
In each of its issues Good magazine offers good, even excellent, infographics related to aspects of our life. Some excellent examples below.
The Cost of Living on the Bleeding Edge of Gadgetry29
Price and market penetration of consumer electronics over the past 50 years. By Arno Ghelfi. Infographics from a quite different perspective.
A data visualization application capable of rendering the relationships between the user and individuals in the address book by examining the TO:, FROM:, and CC: fields of every email in the 60,000-large email archive.the intensity of the relationship is determined by the color intensity of the line. “My Map” allows to explore different relational groupings and periods of time, revealing the temporal ebbs and flows in various relationships. My Map thus becomes a veritable self-portrait, a visual reflection of personal associations and relationships.
When Bots Attack37
Using rented botnets, you can launch hundreds of thousands — even millions — of infobombs at a target, all while maintaining total deniability. In this hypothetical scenario, a single attack launched by China against the US lasts only a few hours, but a full-scale assault lasting days or weeks could bring an entire modern information economy to its knees. This infographic is supposed to illustrate it.
George W. Bush Speech Infographics43
An interactive infographic, compares the number of times certain words appear in the address. Both are a nice example of how information design can give readers more ways to evaluate and contextualize a given text or set of data. So simple, but extremely intuitive and clear.
yHaus45: BookScape, Query Bursts46. Experimental projects by Yahoo! Design Innovation Team. These query bursts depict individual IP numbers that start very popular bursts of search queries. each particle shows a query from a unique location worldwide. bookscape represents about 250,000 illustrations taken from children books, originally collected by the Open Library Project. The experimental interface uses dynamic resampling of image data to place all the images in a single zoomable space, arranged alphabetically by title.
Sources and Resources Link
- Good Magazine Infographics48
- Sugar Batteries Infographic Movie49
- Iccarus: 3D Data Visualization50
- 6 Less-Than-Helpful Infographics51
- 1 https://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/
- 2 http://www.historyshots.com/OtherArtists/4015.cfm
- 3 http://www.historyshots.com/OtherArtists/4015.cfm
- 4 http://www.kottke.org/06/07/independent-infographic
- 5 http://www.kottke.org/06/07/independent-infographic
- 6 http://flickr.com/photos/watz/162393041/
- 7 http://flickr.com/photos/watz/162393041/
- 8 http://flickr.com/photos/watz/162393041/
- 9 http://www.kottke.org/remainder/06/02/10423.html
- 10 http://www.kottke.org/remainder/06/02/10423.html
- 11 http://dizzia.deviantart.com/art/DIZZIA-Gregory-M-PDF-59770086
- 12 http://dizzia.deviantart.com/art/DIZZIA-Gregory-M-PDF-59770086
- 13 http://gadgets.boingboing.net/2008/01/02/amadanas-wonderful-c.html
- 14 http://gadgets.boingboing.net/2008/01/02/amadanas-wonderful-c.html
- 15 http://gizmodo.com/gadgets/home-entertainment/the-japanese-wii-safety-manual-is-crazy-219119.php
- 16 http://gizmodo.com/gadgets/home-entertainment/the-japanese-wii-safety-manual-is-crazy-219119.php
- 17 http://www.traumkrieger.de/virtualwater/
- 18 http://www.traumkrieger.de/virtualwater/
- 19 http://designarchives.aiga.org/
- 20 http://designarchives.aiga.org/
- 21 http://www.flickr.com/photos/bryce/58299511/
- 22 http://www.flickr.com/photos/bryce/58299511/
- 23 http://designarchives.aiga.org/
- 24 http://designarchives.aiga.org/
- 25 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4&topic_id=1&topic=
- 26 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4&topic_id=1&topic=
- 27 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4&topic_id=1&topic=
- 28 http://www.kottke.org
- 29 http://www.wired.com/gadgets/gadgetreviews/magazine/test2007/st_infoporn
- 30 http://www.wired.com/gadgets/gadgetreviews/magazine/test2007/st_infoporn
- 31 http://www.nytimes.com/2008/01/06/opinion/06chart.html?_r=2&oref=slogin&oref=slogin
- 32 http://www.nytimes.com/2008/01/06/opinion/06chart.html?_r=2&oref=slogin&oref=slogin
- 33 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001TV&topic_id=1&topic=a
- 34 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001TV&topic_id=1&topic=a
- 35 http://christopherbaker.net/projects/mymap/
- 36 http://christopherbaker.net/projects/mymap/
- 37 http://www.wired.com/politics/security/magazine/15-09/ff_estonia_bots
- 38 http://www.wired.com/politics/security/magazine/15-09/ff_estonia_bots
- 39 http://datamining.typepad.com/gallery/blog-map-gallery.html
- 40 http://datamining.typepad.com/gallery/blog-map-gallery.html
- 41 http://qed.princeton.edu/index.php/MG/Data_and_Analysis
- 42 http://qed.princeton.edu/index.php/MG/Data_and_Analysis
- 43 http://www.lifeclever.com/the-new-york-times-impressive-infographics/
- 44 http://www.lifeclever.com/the-new-york-times-impressive-infographics/
- 45 http://infosthetics.com/archives/2007/11/yahoo_design_yhaus_query_bursts_bookscape.html
- 46 http://design.yahoo.com/project.php?pid=9
- 47 http://design.yahoo.com/project.php?pid=9
- 48 http://www.goodmagazine.com/section/Transparency
- 49 http://infosthetics.com/archives/2007/11/sugar_batteries_infographic_movie.html
- 50 http://www.techcrunch.com/2007/08/17/iccarus-three-dimensional-data-visualization/
- 51 http://www.mentalfloss.com/blogs/archives/11068
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.