Menu Search
Jump to the content X X
Smashing Conf New York

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. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Data Visualization: Modern Approaches

Advertisement

Data presentation can be beautiful, elegant and descriptive. There is a variety of conventional ways to visualize data – tables, histograms, pie charts and bar graphs are being used every day, in every project and on every possible occasion. However, to convey a message to your readers effectively, sometimes you need more than just a simple pie chart of your results. In fact, there are much better, profound, creative and absolutely fascinating ways to visualize data. Many of them might become ubiquitous in the next few years.

So what can we expect? Which innovative ideas are already being used? And what are the most creative approaches to present data in ways we’ve never thought before?

Let’s take a look at the most interesting modern approaches to data visualization as well as related articles, resources and tools.

1. Mindmaps Link

Trendmap 20071

Web Trends 20072

Informationarchitects.jp3 presents the 200 most successful websites on the web, ordered by category, proximity, success, popularity and perspective in a mindmap. Apparently, web-sites are connected as they’ve never been before. Quite comprehnsive.

2. Displaying News Link

Newsmap4 is an application that visually reflects the constantly changing landscape of the Google News news aggregator. The size of data blocks is defined by their popularity at the moment.

Newsmap5

Digg BigSpy arranges popular stories at the top when people digg them. Bigger stories have more diggs.

Digg Big Spy

Digg Stack: Digg stories arrange themselves as stack as users digg them. The more diggs a story gets, the larger is the stack.

Stack

3. Displaying Data Link

Amaztype6, a typographic book search, collects the information from Amazon and presents it in the form of keyword you’ve provided. To get more information about a given book, simply click on it.

Amaztype7

Similar idea is being used by Flickrtime8. The tool uses Flickr API to present the uploaded images in real-time. The images form the clock which shows the current time.

Flickrtime9

Time Magazine10 uses visual hills (spikes) to emphasize the density of American population in its map.

Where we live11

CrazyEgg12 lets you explore the behavior of your visitors with a heat map. More popular sections, which are clicked more often, are highlighted as “warm” – in red color.

CrazyEgg13

Hans Rosling TED Talk14 is a legendary talk of the Swedish professor Hans Rosling, in which he explains a new way of presenting statistical data. His Trendalyzer software (recently acquired by Google) turns complex global trends into lively animations, making decades of data pop. Asian countries, as colorful bubbles, float across the grid — toward better national health and wealth. Animated bell curves representing national income distribution squish and flatten. In Rosling’s hands, global trends — life expectancy, child mortality, poverty rates – become clear, intuitive and even playful.

Hans Rosling15

Three Views shows three views of the earth, in which each country is represented by a circle that shows the amount of money spent on the military (size of circle) and what fraction of the country’s earnings that uses (colour). Compact and beautiful presentation of data.

Three Views

Visualizing the Power Struggle in Wikipedia16 displays the most popular articles and the most frequent search queries in the heatmap.

Wikipedia17
Wikipedia18

4. Displaying connections Link

Burst Labs19 suggests similar or connected items to your search queries (favourite artists, tv shows, movies, genres etc.) in a bubble. Not really new, but still inspiring.

Burst Labs20

Shape Of Song21: What does music look like? The Shape of Song is an attempt to answer this seemingly paradoxical question. The custom software in this work draws musical patterns in the form of translucent arches, allowing viewers to see – literally – the shape of any composition available on the Web.

Shape Of Song22

Musicovery23 displays music taste connections and lets you listen to the song and browse through similar songs.

Musicovery24

Lanuage Poster25 proves that even simple lines can be descriptive enough. The History of Programming Languages as an original timeline.

History of Programming Languages26

5. Displaying web-sites Link

Spacetime27 offers Google, Yahoo, Flickr, eBay and images in 3D. The tool displays all of your search results in an easy to view elegant 3D arrangement. Company promises that the days of mining through pages and pages of tiny thumbnails in an effort to find the item you are looking for are over.

Spacetime28

UBrowser29 is an open source test mule that renders interactive web pages onto geometry using OpenGL® and an embedded instance of Gecko, the Mozilla rendering engine.

UBrowser30

6. Articles & Resources Link

  • Visualcomplexity.com31
    Screenshot32

    The project presents the most beautiful methods of data visualization as well as further references and book suggestions. The gallery has over 450 entries.

Footnotes Link

  1. 1 http://www.informationarchitects.jp/ia-trendmap-2007v2
  2. 2 http://www.informationarchitects.jp/ia-trendmap-2007v2
  3. 3 http://www.informationarchitects.jp
  4. 4 http://www.marumushi.com/apps/newsmap/
  5. 5 http://www.marumushi.com/apps/newsmap/
  6. 6 http://amaztype.tha.jp
  7. 7 http://amaztype.tha.jp
  8. 8 http://www.hottoast.org/convexstyle/flickrtime/
  9. 9 http://www.hottoast.org/convexstyle/flickrtime/
  10. 10 http://www.time.com/time/covers/20061030/where_we_live/
  11. 11 http://www.time.com/time/covers/20061030/where_we_live/
  12. 12 http://www.crazyegg.com
  13. 13 http://crazyegg.com/
  14. 14 http://www.ted.com/index.php/talks/view/id/92
  15. 15 http://www.ted.com/index.php/talks/view/id/92
  16. 16 http://www.abeautifulwww.com/2007/05/20/visualizing-the-power-struggle-in-wikipedia/
  17. 17 http://www.abeautifulwww.com/2007/05/20/visualizing-the-power-struggle-in-wikipedia/
  18. 18 http://www.abeautifulwww.com/2007/05/20/visualizing-the-power-struggle-in-wikipedia/
  19. 19 http://www.burstlabs.com
  20. 20 http://www.burstlabs.com
  21. 21 http://www.turbulence.org/Works/song/gallery/gallery.html
  22. 22 http://www.turbulence.org/Works/song/gallery/gallery.html
  23. 23 http://www.musicovery.com
  24. 24 http://www.musicovery.com
  25. 25 http://www.oreilly.com/pub/a/oreilly/news/languageposter_0504.html
  26. 26 http://www.oreilly.com/pub/a/oreilly/news/languageposter_0504.html
  27. 27 http://www.spacetime.com
  28. 28 http://www.spacetime.com
  29. 29 http://ubrowser.com/
  30. 30 http://ubrowser.com/
  31. 31 http://www.visualcomplexity.com/vc/
  32. 32 http://www.visualcomplexity.com/vc/
SmashingConf New York

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 New York, on June 14–15, 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

    Awesome! Whoa, didn’t think math could be so pretty :o

    Wonder if any of these are open source and easily applied to other projects….

    0
  2. 3

    criticalerror

    August 2, 2007 9:51 am

    one more time a nice list…

    Keep going!

    0
  3. 4

    Holy crap! That flickr clock is wicked and the Ubrowser is tripped out. Nice find on these.

    0
  4. 5

    Until this article I was really unaware of how big “data visualization” was…to be honest…I’d never really heard the term. Great work!!

    0
  5. 6

    Amazing! Where to learn some methods of data visualisation?

    1
  6. 7

    i think you have put a wrong screenshot for musiclens ?

    0
  7. 8

    Great!

    0
  8. 9

    Michael Blix

    August 2, 2007 6:56 am

    Very cool indeed. I’d love to replicate some of them. ‘Experimental’ might be a better word than ‘modern,’ until they catch on and show their utility above a more standard (‘traditional’) approach.

    I don’t know if any are open source but some of the visuals are made with the help of Processing, which you should check out if you’re interested in doing something similar without a ton of programming.

    4
  9. 10

    Another great piece on Smashing :)

    0
  10. 11

    This is a pretty good list! I wasn’t aware of many of these sites. I also posted a collection of unique data/infoviz links last year:

    Dataesthetics: The Power and Beauty of Data Visualization

    0
  11. 12

    Wow! That’s a great list! I’d never seen a lot of those before! Thanks for putting it together – can’t wait to look into them some more!

    1
  12. 13

    Balakumar Muthu

    August 2, 2007 3:17 pm

    great!

    0
  13. 14

    Brilliant list. I had no idea there were such ideas floating around. This isn’t just a smart way of displaying data but I think it is rather inspirational for other mediums.

    0
  14. 15

    Nice list guys! Great work!
    This is a pretty cool project to I found a couple weeks back, Human Brain Cloud, not quite as extensive as some of the above examples, but cool none the less.

    0
  15. 16

    back in 90x – http://textarc.org/
    Java applet representing most usable words in book by it’s size. Before tag clouds were invented (discovered).
    Check it out.

    0
  16. 17

    i never knew data visualisation was such a big thing. We are manipulating so much of data daily [more the data, more happy we are :) ] and i never thought about its options…..

    wonderful resource. so much to learn and understand. you have been doing a very nice job. its blocked here[they say you are a ‘download’ site :P ], sometimes i have to use a proxy site. but its worth.

    thanx a lot :)

    0
  17. 18

    Vitaly Friedman & Sven Lennartz

    August 2, 2007 5:30 pm

    2Angga: thank you, fixed!

    0
  18. 19

    Absolutely great!

    0
  19. 20

    Alberto Tellez

    August 2, 2007 6:07 pm

    A really nice list of graphic data models and interactivity.
    Congrats!

    1
  20. 21

    Very good article, thanks all

    0
  21. 22

    Superb. Your best list yet.

    0
  22. 23

    Uuuuu, great article..

    0
  23. 24

    Whenever SmashingMagazine so much as coughs it makes it to the Digg homepage, Delicious popular and generates hoards of comments and linkbacks.

    Very nice!

    1
  24. 25

    Stunning collection – thanks for all the work you put into it…

    0
  25. 26

    Wow! All sorts of ways to render data impossible to read! Fantastic!
    “As you can see by this picture, Chicago’s got a bigger circle than Boston. How much bigger? I’m not really sure. Pretty big. That means Chicago’s like 50 billion times betterer than Boston when it comes to widgets in the scuzzypond. Are widgets good or bad? I don’t know, but they’re represented in funny circles with hard-to-read overlapping text, so it MUST mean something important!”

    The only thing these graphs show is what data looks like when it is completely disorganized. Quit acting like this is a revolution in data representation.

    1
  26. 27

    Wonderful post, I love inventions in the field of data visualization. I think I will have to write a post referring to your post — it’s a great read!

    0
  27. 28

    Excellent article!! I worked on a Hurricane Katrina data-visualization project last year for my agency in New Orleans. It’s an oral history with compelling, raw video that offers an unedited look at people’s memories of the storm and the fallout. As each video plays, a simple visual device displays recurring themes by keyword; commonalitites between experiences are presented via lists of names headed by recurring topics. Thought your readers might be interested.

    0
  28. 29

    Thank you, these are great visualization&(great view point). We”l live and see.

    0
  29. 30

    You guys just don’t stop! Nice research, you guys dig like them google folks.

    1
  30. 31

    There was a visualization of the history of Linux distros…
    http://www.cyberciti.biz/tips/linux-kernel-history-and-distribution-time-line.html

    And also about the Linux kernel…
    http://funhouse.bubble.ro/569/3D_View_of_Linux_Kernel/

    1
  31. 32

    I loved this stuff, I think if will be a tremendous resource for K-12 teachers especially for learning disabled students, please try to present this material in teachers conventions and teachers publications.

    0
  32. 33

    Jorge Camoes

    August 3, 2007 5:20 am

    Traditional graphics are dead, because they can’t handle the vast amounts of data we have today and they must be replace by a new set of tools.

    There are some interesting examples here, but a large majority is more a form of art than useful tools, visualization -wise. We need data density, context, interaction and data integrity. Do they provide that? I am not sure.

    0
  33. 34

    If any are interested in the Hurricane Katrina data-visualization project, here is the url:

    http://livesconnected.com

    1
  34. 35

    Smashing is the best!

    -1
  35. 36

    Thank you, these are grrreat!

    -1
  36. 37

    Terinea Weblog

    August 3, 2007 2:02 am

    That is a fantastic list, very impressive.

    -1
  37. 38

    Mike Robinson

    August 3, 2007 2:56 am

    Despite the fact that my head exploded looking at some of these, thanks for the list :D

    1
  38. 39

    fascinating collection. thanks for taking the time to pull it together.

    0
  39. 40

    Dennison Uy - Graphic Designer

    August 3, 2007 2:15 pm

    This is the first time I’ve been to some of these sites. A lot of them like Newsmap totally blew my mind!

    0
  40. 41

    I thought by the title that this one would be a bit boring..How wrong I was! Facinating and sometimes beautiful stuff. Cheers

    0

↑ Back to top