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

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

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

Voyage6 is an RSS-feader which displays the latest news in the “gravity area”. News can be zoomed in and out. The navigation is possible with a timeline.

Voyage7

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

Digg Big Spy9

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

Stack11

3. Displaying Data

Amaztype12, 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.

Amaztype13

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

Flickrtime15

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

Where we live17

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

CrazyEgg19

Hans Rosling TED Talk20 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 Rosling21

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

We Feel Fine22 shows human feelings, calculated from a large number of weblogs.

We Feel Fine23

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

Wikipedia25

Wikipedia26

Websites as graphs27. An HTML DOM Visualizer Applet, which displays sites as graphs depending on the amount of links, tables, div tags, images, forms and other tags.

Websites as graphs28

Interactive History Timeline29 presents the history of Great Britain, divided into interactive data blocks. The density of events is displayed on the map.

Timeline30

Winning Lotto Numbers31 is supposed to present the frequency of appearance of every number from one year to the next one. This graph is definitely not one of the most clear ones.

Lotto32

Elastic Lists33 demonstrates the “elastic list” principle for browsing multi-facetted data structures. You can click any number of list entries to query the database for a combination of the selected attributes. The approach visualizes relative proportions (weights) ofmetadata by size and visuzalizes characteristicness of a metadata weight by brightness. Author’s blog34 regularly informs about new experiments in the area of data visualization. Nice to observe, useful to bookmark.

Elastic Lists35

The JFK Assassination Timeline36An Ajax-based approach vor visual presentation of historical events. John F. Kennedy assassination as timeline with numerous presentation options. The related article37 with further examples38.

4. Displaying connections

Munterbund39 showcases the results of research graphical visualization of text similarities in essays in a book. “The challenge is to find forms of graphical and/or typographical representation of the essays that are both appealing and informative. We have attempted create a system which automatically generates graphics according to predefined rules.”

Text similarities40

Text similarities41

Text similarities42

Burst Labs43 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 Labs44

Universe DayLife45 displays events, connections and news as circles which gravitate around the topic they are related to.

Universe46

Musiclens gives music recommendations and presents your current mood and musical taste as a diagram.

Musiclens

Figd’t Visualizer47 allows you to play around with your network. You interface with the Visualizer through Flickr and LastFM tags, using any tag to create a Magnet. Once a Tag Magnet is created, members of the network will gravitate towards it if they have photos or music with that same Tag. Available for Mac OS X, Windows and Linux. Alpha-version.

Fidgt48

What have I been listening to?49: Lee Byron describes his approach of creating a histogram about his music listening history.

Last.FM50

Shape Of Song51: 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 Song52

Musicmap53: connections are represented as connected lines; they create a web.

Musicmap54

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

Musicovery56

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

History of Programming Languages58

5. Displaying web-sites

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

Spacetime60

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

UBrowser62

6. Articles & Resources

  • Visualcomplexity.com63
    Screenshot64
    The project presents the most beautiful methods of data visualization as well as further references and book suggestions. The gallery has over 450 entries.
  • In his article Infosthetics: the beauty of data visualization65 Andrew Vande Moere, well-known through his blog Infosthetics66, discusses the aesthetics of data visualization and modern apparoaches in this area. Creative design ideas combine form and content and generate fascinating graphs – is it a new area in the art of next generation?Infosthetics67Infosthetics68Infosthetics69The article presents 13 new techniques of data visualization, with examples and further references.
  • 16 Awesome Data Visualization Tools70
    “From navigating the Web in entirely new ways to seeing where in the world twitters are coming from, data visualization tools are changing the way we view content. We found the following 16 apps both visually stunning and delightfully useful.” An extensive overview by Mashable.com.
  • Dataesthetics71
    Eric Blue provides some references to unusual Data Visualization methods.
  • infosthetics – information aesthetics
    72Screenshot73
    Andrew Vande Moere about data visualization, latest development and design ideas.
  • Visualizing Delicious Roundup
    An overview of Del.icio.us tools you can use to visualize your bookmarks.
  • Periodic Table74
    A periodic table of visualization methods.
    Periodic Table75

7. Tools and Services

  • You can create your own timelines with Xtimeline76 and Circavie77.
  • IBM Many Eyes78
    Screenshot
    79
    This Java-based service visualizes data online and helps to create pie charts, diagrams, tree maps, bar charts and histograms. Registration is required. Some examples80 are simply amazing.
  • prefuse | the prefuse visualization toolkit81
    Presents the beta-version of a Java-based toolkit for programming of application with integrated data visualization methods
  • Swivel82
    This service creates pie charts, diagrams and histograms “on the fly”. It also provides a Swivel API83 you can use to improve already existing visualization methods.
  • You can find even more tools for designing your own diagrams and charts online in our article Charts and Diagrams Tools84.

Footnotes

  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://rssvoyage.com
  7. 7 http://rssvoyage.com
  8. 8 http://labs.digg.com/bigspy/?popular
  9. 9 http://labs.digg.com/bigspy/?popular
  10. 10 http://labs.digg.com/stack/
  11. 11 http://labs.digg.com/stack/
  12. 12 http://amaztype.tha.jp
  13. 13 http://amaztype.tha.jp
  14. 14 http://www.hottoast.org/convexstyle/flickrtime/
  15. 15 http://www.hottoast.org/convexstyle/flickrtime/
  16. 16 http://www.time.com/time/covers/20061030/where_we_live/
  17. 17 http://www.time.com/time/covers/20061030/where_we_live/
  18. 18 http://www.crazyegg.com
  19. 19 http://crazyegg.com/
  20. 20 http://www.ted.com/index.php/talks/view/id/92
  21. 21 http://www.ted.com/index.php/talks/view/id/92
  22. 22 http://www.wefeelfine.org/movements.html
  23. 23 http://www.wefeelfine.org/movements.html
  24. 24 http://www.abeautifulwww.com/2007/05/20/visualizing-the-power-struggle-in-wikipedia/
  25. 25 http://www.abeautifulwww.com/2007/05/20/visualizing-the-power-struggle-in-wikipedia/
  26. 26 http://www.abeautifulwww.com/2007/05/20/visualizing-the-power-struggle-in-wikipedia/
  27. 27 http://www.aharef.info/2006/05/websites_as_graphs.htm
  28. 28 http://www.aharef.info/2006/05/websites_as_graphs.htm
  29. 29 http://www.bbc.co.uk/history/interactive/timelines/british/index.shtml
  30. 30 http://www.bbc.co.uk/history/interactive/timelines/british/index.shtml
  31. 31 http://www.microsiervos.com/archivo/azar/loto-estrella.html
  32. 32 http://www.microsiervos.com/archivo/azar/loto-estrella.html
  33. 33 http://well-formed-data.net/experiments/elastic_lists/
  34. 34 http://well-formed-data.net/
  35. 35 http://well-formed-data.net/experiments/elastic_lists/
  36. 36 http://simile.mit.edu/timeline/examples/jfk/jfk.html
  37. 37 http://simile.mit.edu/timeline/
  38. 38 http://simile.mit.edu/timeline/examples/
  39. 39 http://www.munterbund.de/visualisierung_textaehnlichkeiten/essay.html
  40. 40 http://www.munterbund.de/visualisierung_textaehnlichkeiten/essay.html
  41. 41 http://www.munterbund.de/visualisierung_textaehnlichkeiten/essay.html
  42. 42 http://www.munterbund.de/visualisierung_textaehnlichkeiten/essay.html
  43. 43 http://www.burstlabs.com
  44. 44 http://www.burstlabs.com
  45. 45 http://universe.daylife.com/
  46. 46 http://universe.daylife.com/
  47. 47 http://www.fidgt.com/visualize
  48. 48 http://www.fidgt.com/visualize
  49. 49 http://megamu.com/lastfm/
  50. 50 http://megamu.com/lastfm/
  51. 51 http://www.turbulence.org/Works/song/gallery/gallery.html
  52. 52 http://www.turbulence.org/Works/song/gallery/gallery.html
  53. 53 http://www.dimvision.com/musicmap/
  54. 54 http://www.dimvision.com/musicmap/
  55. 55 http://www.musicovery.com
  56. 56 http://www.musicovery.com
  57. 57 http://www.oreilly.com/pub/a/oreilly/news/languageposter_0504.html
  58. 58 http://www.oreilly.com/pub/a/oreilly/news/languageposter_0504.html
  59. 59 http://www.spacetime.com
  60. 60 http://www.spacetime.com
  61. 61 http://ubrowser.com/
  62. 62 http://ubrowser.com/
  63. 63 http://www.visualcomplexity.com/vc/
  64. 64 http://www.visualcomplexity.com/vc/
  65. 65 http://pingmag.jp/2007/03/23/infosthetics-form-follows-data/
  66. 66 http://infosthetics.com/
  67. 67 http://pingmag.jp/2007/03/23/infosthetics-form-follows-data/
  68. 68 http://pingmag.jp/2007/03/23/infosthetics-form-follows-data/
  69. 69 http://pingmag.jp/2007/03/23/infosthetics-form-follows-data/
  70. 70 http://mashable.com/2007/05/15/16-awesome-data-visualization-tools/
  71. 71 http://eric-blue.com/blog/2006/10/dataesthetics_the_power_and_be.html
  72. 72 http://www.infosthetics.com/
  73. 73 http://www.infosthetics.com/
  74. 74 http://www.visual-literacy.org/periodic_table/periodic_table.html
  75. 75 http://www.visual-literacy.org/periodic_table/periodic_table.html
  76. 76 http://xtimeline.com/index.aspx
  77. 77 http://www.circavie.com
  78. 78 http://services.alphaworks.ibm.com/manyeyes/home
  79. 79 http://services.alphaworks.ibm.com/manyeyes/home
  80. 80 http://services.alphaworks.ibm.com/manyeyes/browse/visualizations
  81. 81 http://prefuse.org/
  82. 82 http://www.swivel.com/
  83. 83 http://www.swivel.com/api/early_access
  84. 84 http://www.smashingmagazine.com/2006/09/01/test-aosu/

↑ 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 performance problems in large companies. Get in touch.

Advertising
  1. 1

    Marcus | Culturemaking

    August 4, 2007 7:21 am

    Love it. Nice one

    0
  2. 52

    Again a great collection of wonderful “Must see’s” out on the internet. I didn’t know that data can be such faszinating. Thank you for your great work, folks – I’m new to this blog but I must say: I really like it :-)

    All the best from Salzburg, Austria

    0
  3. 103

    Too many advertisement on this site. Won’t read it again. Sorry.

    0
  4. 154

    Wow, I wonder how long did it take to pull that list. Thanks for the resources.

    0
  5. 205

    interesting as always, but show some fucking restraint.

    the outrageous magnitude of content in one article renders the entire thing useless. give us highlights of what you think is the best, not a list of everything under the sun.

    0
  6. 256

    Outstanding list!

    0
  7. 307

    Excellent list, The musicovery link is awesome!

    0
  8. 358

    Another good site for data visualization is Radical Cartography, which is not so much radical as informative. Example: mapping income to population of the largest 25 metro areas shows that some cities have “income donuts” of wealthier suburbs surrounding a poorer city core, while others have wedges that radiate out from one area:

    http://www.radicalcartography.net/?cityincome

    0
  9. 409

    thanks a lot! this list is a dream of PR-manager doing a couple of presentations a week)))

    0
  10. 460

    Wow that was brilliant,a good piece of collection.

    0
  11. 511

    Check out a few ‘old visualizations’ dating 1997 (1rst year post grad year …fooling around experimenting with stuff)

    some viz look digg big spy

    http://www.youtube.com/watch?v=K3wcLHMWd_Y

    implemented in good old javascript

    0
  12. 562

    Wow, this is an amazing resource. I have recently become interested in this field, and I am very excited about the directions that it is going.

    0
  13. 613

    rssvoyage is beatiful!

    0
  14. 664

    Cristian Ionitoiu

    August 6, 2007 9:33 pm

    Hi,

    I’ve been passioned by data visualization for quite some time. Thanks for putting together this data, it’s quite useful to me. I think that you should add the Idea Line of Martin Wattenberg: http://www.whitney.org/arport/commissions/idealine.shtml
    to the list.

    This is a very beatiful and concise method to display chronological information.
    Best Regards,

    Cristian

    0
  15. 715

    Juan Manuel Lemus

    August 7, 2007 5:08 am

    Good, this is fantastic for design inspiration and turn-off for convensional design.

    0
  16. 766

    Wow!!
    thanks for this list !!
    simply fab!

    0
  17. 817

    Bravo !!!!

    0
  18. 868

    One I liked very much was this one: mapping all sorts of data to a world map, sizing countries to show the values for each country: http://www.sasi.group.shef.ac.uk/worldmapper/index.html

    0
  19. 919

    Excellent list – thank you

    0
  20. 970

    Robert Christensen

    August 9, 2007 11:46 pm

    This is an excellent site for visual information. What I don’t see is something like FYI Visual or Fractal Edge. These would make for nice additions.

    Along these lines, I have been noting a lone ranger with an axe to grind out in the blogs, who appears to consider himself keeper of the visual display…

    What I mean is FYI Corporation has developed some interesting technology for displays of massive amounts of information. While it’s not an all encompassing visual technology (meaning it requires additional visual support for some kinds of information, particularly where proportion is important), it enables anomalies to become readily apparent from dense displays.

    Seems there is a lone ranger out there with an axe to grind against this company and its product, and has single handedly launched a tirade and personal attacks against even its employees. It is unclear why he has such a personal vendetta against FYI Corporation, but it’s clear that he does.

    I contacted FYI Corporation employees and they told me that when challenged, the lone ranger was unable to show example data they provided in dense form on a display, and instead retreated to the common convention of low density dashboard configurations. For instance, they said that when asked to show hundreds of multidimensional values on a single screen with his approach (as can be done with FYI Visual) he was unable to do it. An FYI Visual representative said that they invited him to participate in a study to compare his approach to showing 850 generators consisting of 6 metrics to their way he refused to participate. I think I see why…

    He relies completely on anecdotes and references to other people’s work because he appears to be ill-equipped to address the problem. He appears to hold himself out to be an expert, but his education is in Religious Studies, which makes sense given his Crusade against FYI Visual.

    We have been using FYI Visual for two years and the problem it solves is unparalleled by any other technologies we have examined for high display density of time-sensitive information -the kind that does not fit onto a dashboard or shown with hundreds of lines on a graph.

    When ever I read such personal attacks as that of this lone ranger, I consider the source, and in this case, the source seems quite dubious.

    I enjoy sites like this one that provides examples and let’s consumers pick what works for them.

    0
  21. 1021

    very useful resource.. I am wondering if there are similar input mechnasims as well!

    0
  22. 1072

    Wow, a great collection of stunning visualizations! One of the best blog entries I have ever read!

    0
  23. 1123

    inspired by Digg BigSpy -> http://www.ainews.org

    0
  24. 1174

    If you digg this, you will also love http://infosthetics.com/

    0
  25. 1225

    In reply to FYI Visual and Robert Christensen:

    Yeah, I ran into that flaming rhetoric too (what’s up with that guy? -does anybody take him seriously? What a rant without a cause) –what caught me was that the “lone ranger” as you call him wrote in his paper that dashboards have two important characteristics to situational awareness: 1 Their visual nature, and 2 their integration into everything you must keep track of onto a single screen. I looked at the examples he gives and we cannot fit our metrics on a single screen using his suggestions either. His suggestions are obvious to 3rd graders. I will check out your suggestions about FYI Visual and Fractal Edge to see if those help us. The lesson here is that it’s easy to be a critic, not so easy to produce a solution. There are really great examples on this website too that we are going to try also. Thanks for the tip!

    0
  26. 1276

    I like shape of song (aesthetically) but cannot figure out what that is supposed to represent?

    0
  27. 1327

    That’s a fantastic list – thanks.

    0
  28. 1378

    Looking good but not all of them seem to be convenient.

    0
  29. 1429

    Excellent thanks for the list. THe resource section is very valuable as well :)
    keep up the good work!

    0
  30. 1480

    Absolutely fantastic. Mind opening. Thanks.
    _Marc

    0
  31. 1531

    Totally amazing! Thanks for your effort

    0
  32. 1582

    Interesting list. After spending the last few months studying Edward Tufte’s “The visual display of quantitative information” and related works – I wonder what he would have to say about some of these?

    Everybody’s mind works differently, and I suspect that men & women would find different aspects of these graphs intriguing,

    I must be getting old. I found the websites and bubble-ups/mash-ups too hard to follow.

    tom mayo
    grand rapids, mi

    0
  33. 1633

    See this article on cartograms (another interesting visualization technique) and a related challenge.
    http://www.ribbonfarm.com/2007/07/17/visualizing-the-2d-world-with-cartograms/

    0
  34. 1684

    Go beyond the math and look at the science of visualization. Here is a periodic table of visualization techniques, categorized into different areas of specialization.

    http://www.visual-literacy.org/periodic_table/periodic_table.html

    It’s a great reference guide when trying to come up with the right diagram for a doc or presentation!

    0
  35. 1735

    It’s really an interesting list! Thanks for your hard work on it.

    0
  36. 1786

    This is a terrific list. Thank you. For finding data and traditional graphs of data, as well as a tool for displaying graphs of data in slideshow format, we have built Data360.

    http://www.data360.org

    Best regards, Tom Paper

    0
  37. 1837

    Great list.

    0
  38. 1888

    I can not believe it ! Even after I’ve look at it ! It’s so amazing ! Wonderful work !

    0
  39. 1939

    There’s a lot happening in the geosciences too – for example, 3D visualization of raw geological data to show the location of faults, seams of ore, mine shafts and vents etc. such as that produced by the FracSIS software from Fractal Technologies.

    0
  40. 1990

    Re: Comment #91: In the interests of full disclosure, I work as a contract technical writer for The Runge Group, the owners of Fractal Technologies and the FracSIS software product.

    0
  41. 2041

    Two more related projects (by myself):

    Base26 an interactive 4D visualization of all english four-letter words.

    0
  42. 2092

    Heres a Name Wall that I made. Sadly it only works in FF:
    http://tnw.animenetworx.net

    0
  43. 2143

    I agree with Blix. It should be noted that Data Visualization in itself is a Modern invention. But a great collection of examples none the less.

    0
  44. 2194

    With these techniques, and by combining certain ones of them, we edge closer to bringing to life the Glass Bead Game of Hermann Hesse…

    0
  45. 2245

    excellent posts! I have translate it into Chinese. I post it to my blog.Thank you very much.

    0
  46. 2296

    (eye)nspiring.

    0
  47. 2347

    These are great visualization examples! Check out also the following approach to visualization of a 1-week weather forecast for any location in the United States at .

    0
  48. 2398

    Great article. I’m also very interested in these ideas, as they really bring together social science, math, software and programming, and art. Interacting with data means a lot more than passively seeing it (like a standard chart) — you start to bring your own ideas and interests into what’s being collected and displayed. With so much information available, having holistic and dynamic ways of showing *your* interests is becoming more and more interesting :: Learning 2.0.

    If anyone is interested in creating things like this, or if you like to work with sound, video, 3D, or MIDI, do yourself a favor and check out the program Max / MSP / Jitter. Originally designed around music and MIDI, with recent additions for manipulating video and images, this graphical programming environment deals with all data very simply and in an abstract fashion. That means one can route, mix, display, and save your data in any form you want, leading to all kinds of new understandings.

    I used to work with code-based languages but have gladly made this switch — it is a graphical, interface-based environment, with the “programming” created in a flow-chart design for your data and logic “streams”. Since you have control over the media, the logic, and the interface objects, you quite literally can build just about any kind of application without knowing a line of traditional code. Particularly good at real-time interaction, tinkering of any parameter you want, and being able to record or generate activity, Max is a must-try for anyone with any interest in these wide areas of art, music, data, and math. If that isn’t enough, it also provides integrated support for Java, Javascript, and C, so that those things better done by text-based code can be used too — right in the midst of your interface.

    The much-anticipated release of Max 5 — called by the company as “Max for the next 20 Years” — is slated for April 2008!

    http://www.cycling74.com/products/maxmsp

    0
  49. 2449

    Very interesting !!
    However, even here, I have not yet found what I saw 3-4 years ago – and have been actively hunting for – without success.
    It was (sort-of) similar to the “Musicmap” above, but was displayed on a globe (sphere), and you could click a node and drag it around and explore the ‘mind map”.
    It was visually quite impressive, definitely rather innovative… I’m looking for something like this to present some node linked data from a knowledge structure/database I’ve created.
    Any comments, hints appreciated.

    0
  50. 2500

    Anyone know of any data visualization tools that will generate printable (press quality) results?

    0

↑ Back to top