Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

Data Visualization and Infographics

Advertisement

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.

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.

Infographics Screenshot3

Independent: Infographic4
Middle-East: who backs immediate cease-fire? The infographic below was published on the front page of the “Independent” magazine during the Middle-East crisis in July 2007.

Infographics Screenshot5

Virtual countries6
This stand present the largest virtual countries according to the gross domestic product of the countries and world’s largest companies.

Infographics Screenshot7

Infographics Screenshot8

Corporate connections:9
An extremely compact and useful source of information.

Infographics Screenshot10

DIZZIA, Gregory M.11
This is the documentation of every intimate relationship Gregory Dizzia has ever had. The data spans 23 years.

Infographics Screenshot12

Amadana Infographics13
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.

Infographics Screenshot14

The Japanese Wii Safety Manual15
This Japanese Wii safety manual is pretty much indicative of Japanese people’s general insanity. [via Gizmodo]

Infographics Screenshot16

Virtual Water17
Simple, clean, elegant and effective. A double-sided poster visualizing the water footprint of products and nations.

Infographics Screenshot18

Apple’s Tipping Point: Macs For The Masses19
Very calm, soft and appealing colors within a clearly presented context. Design by Paul Nixon.

Infographics Screenshot20

AT&T/Bell System Pre- & Post-Divestiture Chart21
Peter Ross. 1985.

Infographics Screenshot22

Flickr User Model23
A slightly more complex data infographics, however still clear and well-presented.

Infographics Screenshot24

Journey into the Universe25 (1985)
Information design, 1985.

Infographics Screenshot26

Megan Jaegerman27
A review of Megan Jaegerman’s work by Edward Tufte. Notice how clean and legible the infographics are.

Infographics Screenshot28

Infographics Screenshot29

Good Magazine Infographics30
In each of its issues Good magazine offers good, even excellent, infographics related to aspects of our life. Some excellent examples below.

Infographics Screenshot31

Infographics Screenshot32

Infographics Screenshot33

Infographics Screenshot34

Infographics Screenshot35

Who Participates and what people are doing online36
A slightly different presentation of usual charts gives it some uniqueness and appeal. [via Kottke.org37]

Infographics Screenshot38

The Cost of Living on the Bleeding Edge of Gadgetry39
Price and market penetration of consumer electronics over the past 50 years. By Arno Ghelfi. Infographics from a quite different perspective.

Infographics Screenshot40

A year in Iraq41
An unusual data visualization which gives information on the type and location of each attack responsible for the 2,592 recorded deaths.

Infographics Screenshot42

Cubism and Abstract Art43
Clean, informative and elegant. Alfred Barr’s work, found in Edward Tufte’s book.

Infographics Screenshot44

MyMap45
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.

Screenshot46

When Bots Attack47
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.

Infographics Screenshot48

Mapping the Blogosphere49
This is what the blogosphere looks like…

Infographics Screenshot50

Globalization51
…what about globalization?

Infographics Screenshot52

George W. Bush Speech Infographics53
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.

Infographics Screenshot54

yHaus55: BookScape56, Query Bursts57. 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.

Infographics Screenshot58

Sources and Resources Link

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/
  2. 2 http://www.historyshots.com/OtherArtists/4015.cfm
  3. 3 http://www.historyshots.com/OtherArtists/4015.cfm
  4. 4 http://www.kottke.org/06/07/independent-infographic
  5. 5 http://www.kottke.org/06/07/independent-infographic
  6. 6 http://flickr.com/photos/watz/162393041/
  7. 7 http://flickr.com/photos/watz/162393041/
  8. 8 http://flickr.com/photos/watz/162393041/
  9. 9 http://www.kottke.org/remainder/06/02/10423.html
  10. 10 http://www.kottke.org/remainder/06/02/10423.html
  11. 11 http://dizzia.deviantart.com/art/DIZZIA-Gregory-M-PDF-59770086
  12. 12 http://dizzia.deviantart.com/art/DIZZIA-Gregory-M-PDF-59770086
  13. 13 http://gadgets.boingboing.net/2008/01/02/amadanas-wonderful-c.html
  14. 14 http://gadgets.boingboing.net/2008/01/02/amadanas-wonderful-c.html
  15. 15 http://gizmodo.com/gadgets/home-entertainment/the-japanese-wii-safety-manual-is-crazy-219119.php
  16. 16 http://gizmodo.com/gadgets/home-entertainment/the-japanese-wii-safety-manual-is-crazy-219119.php
  17. 17 http://www.traumkrieger.de/virtualwater/
  18. 18 http://www.traumkrieger.de/virtualwater/
  19. 19 http://www.nixlog.com/apple/
  20. 20 http://www.nixlog.com/apple/
  21. 21 http://designarchives.aiga.org/
  22. 22 http://designarchives.aiga.org/
  23. 23 http://www.flickr.com/photos/bryce/58299511/
  24. 24 http://www.flickr.com/photos/bryce/58299511/
  25. 25 http://designarchives.aiga.org/
  26. 26 http://designarchives.aiga.org/
  27. 27 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4&topic_id=1&topic=
  28. 28 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4&topic_id=1&topic=
  29. 29 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4&topic_id=1&topic=
  30. 30 http://www.goodmagazine.com/section/Transparency/getting_to_know_the_homeless
  31. 31 http://www.goodmagazine.com/section/Transparency/tell_me_more
  32. 32 http://www.goodmagazine.com/section/Transparency/girl_power
  33. 33 http://www.goodmagazine.com/section/Transparency/hard_time
  34. 34 http://www.goodmagazine.com/section/Transparency/retail_real_estate
  35. 35 http://www.goodmagazine.com/section/Transparency/student_debt
  36. 36 http://www.businessweek.com/magazine/content/07_24/b4038405.htm
  37. 37 http://www.kottke.org
  38. 38 http://www.businessweek.com/magazine/content/07_24/b4038405.htm
  39. 39 http://www.wired.com/gadgets/gadgetreviews/magazine/test2007/st_infoporn
  40. 40 http://www.wired.com/gadgets/gadgetreviews/magazine/test2007/st_infoporn
  41. 41 http://www.nytimes.com/2008/01/06/opinion/06chart.html?_r=2&oref=slogin&oref=slogin
  42. 42 http://www.nytimes.com/2008/01/06/opinion/06chart.html?_r=2&oref=slogin&oref=slogin
  43. 43 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001TV&topic_id=1&topic=a
  44. 44 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001TV&topic_id=1&topic=a
  45. 45 http://christopherbaker.net/projects/mymap/
  46. 46 http://christopherbaker.net/projects/mymap/
  47. 47 http://www.wired.com/politics/security/magazine/15-09/ff_estonia_bots
  48. 48 http://www.wired.com/politics/security/magazine/15-09/ff_estonia_bots
  49. 49 http://datamining.typepad.com/gallery/blog-map-gallery.html
  50. 50 http://datamining.typepad.com/gallery/blog-map-gallery.html
  51. 51 http://qed.princeton.edu/index.php/MG/Data_and_Analysis
  52. 52 http://qed.princeton.edu/index.php/MG/Data_and_Analysis
  53. 53 http://www.lifeclever.com/the-new-york-times-impressive-infographics/
  54. 54 http://www.lifeclever.com/the-new-york-times-impressive-infographics/
  55. 55 http://infosthetics.com/archives/2007/11/yahoo_design_yhaus_query_bursts_bookscape.html
  56. 56 http://design.yahoo.com/project.php?pid=8
  57. 57 http://design.yahoo.com/project.php?pid=9
  58. 58 http://design.yahoo.com/project.php?pid=9
  59. 59 http://www.goodmagazine.com/section/Transparency
  60. 60 http://infosthetics.com/archives/2007/11/sugar_batteries_infographic_movie.html
  61. 61 http://www.techcrunch.com/2007/08/17/iccarus-three-dimensional-data-visualization/
  62. 62 http://www.mentalfloss.com/blogs/archives/11068
SmashingConf Oxford

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 Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Fantastic post.
    Phenomenal post.
    Splendiferous post.
    Supercalafragilisticexpialadocious post.

    Keep up the great work (as always).

    -2
  2. 2

    Data is what makes the world turn and to make it look good… is good

    0
  3. 3

    GREAT POST!!!

    -1
  4. 4

    There’s some beautiful examples here – in particular MyMap. Loving the wii safety manual btw!

    -1
  5. 5

    Amarjeet Sinh Rai

    January 14, 2008 4:53 am

    Please fix the link for “When Bots Attack” goes to a wrong page.

    Thanks.

    -1
  6. 6

    very interesting collection, thanks!

    -1
  7. 7

    Thanks nice collection!

    -1
  8. 8

    Nice collection. The Japanese Wii safety manual is hilarious!

    -1
  9. 9

    Vitaly Friedman & Sven Lennartz

    January 14, 2008 5:05 am

    @Amarjeet Sinh Rai: thank you, fixed.

    -1
  10. 10

    I only knew a couple of these. It’s a great list: thoughtful and interesting. It really shows how images can easily deliver a powerful message. It’s not always the case, but when it’s well done and well thought, it works great.

    -1
  11. 11

    Great post, as usual, but “communicating information clearly and effectively” is something that several of these examples don’t really do (there are great infographics in the NYT, but the one presented here is not one of them, imho).

    0
  12. 12

    Certainly inspirational but also containing quite some chartjunk and samples for rather bad information design. It would be interesting to see what at least Kaiser Fung thinks and makes of these samples.

    -1
  13. 13

    Amazing post, love the information. and so many examples :)

    -1
  14. 14

    I love this list! Thanks! I must get a copy of the Country Codes of the World map for my home office.

    -1
  15. 15

    This is a pretty awesome post! Thanks!

    -1
  16. 16

    COOOOOOOOL. :-D

    -1
  17. 17

    The Cubism and Abstract Art diagram is not by Edward Tufte, although he’s included it as an example in his books. The diagram is by Alfred Barr, as Tufte himself says here.

    -1
  18. 18

    Practically everything the Times produces is top notch, and GOOD magazine’s transparency section is always enjoyable. Probably why I subscribe to both.

    -1
  19. 19

    Vitaly Friedman & Sven Lennartz

    January 14, 2008 9:42 am

    @Andrew: thank you, fixed.

    -1
  20. 20

    For more great infographics (and some not-so-great), check out http://www.visualcomplexity.com
    That site and Edward Tufte give me all the inspiration I need. Great post!

    -1
  21. 21

    Awesome, it’s nice to see non web examples mixed in. Thanks

    -1
  22. 22

    Its really Funny and Informative..

    -1
  23. 23

    Cool and inspiring post. I love the clean approach of Virtual Water, brilliant design!

    -1
  24. 24

    I am very impressed with this post and hope to see more like it!!

    -1
  25. 25

    Some truly inspiring examples. Thanks for putting this together. This one is being bookmarked twice :)

    -1
  26. 26

    Whats a creative post!!
    Thank you! really inspired me :)

    -1
  27. 27

    Usually, Great article
    Can’t wait for the next one to come

    -1
  28. 28

    Great!!

    -1
  29. 29
  30. 30

    thank you, awesome! i mean, really.
    nothing in the near future will be able to cope with this list, but for the interested:

    -1

↑ Back to top