Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Data Visualization: Modern Approaches

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 data1. Many of them might become ubiquitous in the next few years. [Content Care Nov/03/2016]

So what can we expect? Which innovative ideas2 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 20073

Web Trends 20074 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

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


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.


3. Displaying Data Link

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


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


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

Where we live5

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


Hans Rosling TED Talk8 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 Rosling9

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 Wikipedia10 displays the most popular articles and the most frequent search queries in the heatmap.


4. Displaying connections Link

Burst Labs13 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 Labs

Shape Of Song14: 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 Song15

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


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

History of Programming Languages17

5. Displaying web-sites Link

Spacetime18 /Flash)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.


6. Articles & Resources Link

  • Visualcomplexity.com20

    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
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21

↑ 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 front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

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

  2. 3


    August 2, 2007 9:51 am

    one more time a nice list…

    Keep going!

  3. 4

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

  4. 5

    Amazing! Where to learn some methods of data visualisation?

  5. 6

    i think you have put a wrong screenshot for musiclens ?

  6. 7


  7. 8

    Another great piece on Smashing :)

  8. 9

    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!

  9. 10

    Balakumar Muthu

    August 2, 2007 3:17 pm


  10. 11

    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.

  11. 12

    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 :)

  12. 13

    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!!

  13. 14

    Vitaly Friedman & Sven Lennartz

    August 2, 2007 5:30 pm

    2Angga: thank you, fixed!

  14. 15

    Absolutely great!

  15. 16

    Alberto Tellez

    August 2, 2007 6:07 pm

    A really nice list of graphic data models and interactivity.

  16. 17

    Very good article, thanks all

  17. 18

    Superb. Your best list yet.

  18. 19

    Uuuuu, great article..

  19. 20

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

  20. 21

    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.

  21. 22

    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!

  22. 23

    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.

  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!

  24. 25

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

  25. 26

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

  26. 27

    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.

  27. 28

    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.

  28. 29

    Smashing is the best!

  29. 30

    Thank you, these are grrreat!

  30. 31

    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

  31. 32

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

  32. 33

    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!

  33. 34

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

  34. 35

    Good list.
    Those interested in search visualization could find searchCrystal of interest, since it lets you search and visually compare multiple engines in one place. You compare, remix and share results from web, image, video, blog, tagging, news engines as well as Flickr images or RSS feeds.

  35. 36

    Designer Man

    August 3, 2007 5:45 pm

    Perhaps you most ineresting and compelling post yet.

  36. 37

    I love the Trendmap 2007! Cool! Keep up the good post!

  37. 38

    Marcus | Culturemaking

    August 4, 2007 7:21 am

    Love it. Nice one

  38. 39

    wow. absolutely impressing!!!

  39. 40

    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

  40. 41

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

  41. 42

    Thomas Crown

    August 5, 2007 1:38 am

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

  42. 43

    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.

  43. 44

    Outstanding list!

  44. 45

    Excellent list, The musicovery link is awesome!

  45. 46

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

  46. 47

    Wow that was brilliant,a good piece of collection.

  47. 48

    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.

  48. 49

    rssvoyage is beatiful!

  49. 50

    Juan Manuel Lemus

    August 7, 2007 5:08 am

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

  50. 51

    thanks for this list !!
    simply fab!

  51. 52

    Bravo !!!!

  52. 53

    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:

  53. 54

    Excellent list – thank you

  54. 55

    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.

  55. 56

    Manish Vashist

    August 10, 2007 1:26 pm

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

  56. 57

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

  57. 58

    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!

  58. 59

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

  59. 60

    That’s a fantastic list – thanks.

  60. 61

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

  61. 62

    Marc Duchesne

    August 29, 2007 5:26 pm

    Absolutely fantastic. Mind opening. Thanks.

  62. 63

    Trojan Warrior

    August 29, 2007 5:55 pm

    Totally amazing! Thanks for your effort

  63. 64

    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

  64. 65

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

  65. 66

    Great list.

  66. 67

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

  67. 68

    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.

  68. 69

    Heres a Name Wall that I made. Sadly it only works in FF:

  69. 70

    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.

  70. 71

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

  71. 72


  72. 73

    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 .

  73. 74


    April 6, 2008 3:39 pm

    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!

  74. 75

    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.

  75. 76

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

  76. 77

    Thanks for putting together this comprehensive collection of links

  77. 78

    Thank you very much. Perfect.

  78. 79

    Gonzalo Álvarez Marañón

    October 28, 2008 1:22 am

    Thank you for this post. I’ve discovered many data visualization approaches I didn’t know of at all. Some of them might be very engaging for presentations to the audience. Years ahead of pie charts and bar charts.

  79. 80

    VERY nice compilations

  80. 81

    Is this data visualization really useful. Looks like scientific art. I just can’t think of any application of the information as presented.

  81. 82

    Most of these visual representations look fit for a presentation in Narnia. Data is generally presented to people who care about the data, not to people who care about abstract art. There are very few examples above that represent data in a meaningful way, IMO.

    Time Magazines visual hills look good tho – anyone know what software was used to do that?

    • 83

      I totally aggree.
      What I expect of an infographic is to see at a glimpse the most important info of a data analysis, research etc and have my attention captured as much to go into detail.

      I have also used infographics for some freelance tutoring I did and it had very good learning effects. I got the same feedback from my students: it has to be INFOgraphic…

  82. 84

    I agree with BK, lots lovely beautiful ways to present data, but users of data need it to have more structure to it, to be able to report on their findings for different audiences – there is a showcase of examples on a site called instantatlas. I think there is a lot of practicle examples there of data represented geographically

  83. 85

    chartjunk! chartjunk! chartjunk!

  84. 86

    Very interesting ;)

  85. 87

    Christine Sutherland

    December 21, 2008 3:31 pm

    These are certainly attractive, and can be useful in comprehending large chunks of data in a meaningful way.

    But of course there’s a double edge (or maybe several double edges). The value of any chart is constrained not just by the accuracy of the data, but the validity of the data, and even the simplest chart can mislead. When a chart is visually compelling, the capacity to mislead might be exponential.

    So while I think these charts are lovely, I’d like to see function win out over form, and I’d like to see much more attention to the critical thinking that produces the most useful data.

    The greater capacity for error or misinterpretation, the greater need for the higher development of critical thinking skills which underpin the data selection on which the charts are based.

    These things over-ride every other consideration bar (no pun intended) purely artistic ones.

  86. 88

    When I saw Voyage, I could help but think of , which was done years before.

  87. 89

    I don’t think these impressive visualization techniques help people
    to solve real problems. It is normally pretty easy to come up with a different
    fancy ideal to render/present data differently, but it costs a lot of resources
    to implement and market them.

  88. 90

    Does anyone have suggestions for neat ways to represent family history / genealogical data?

    Family Tree Maker is the most popular tool on the market. However, its built in tools for presenting a family tree are really low-budget. It is also very difficult to customize the family tree in a “high-design” way. Large data sets result in absolutely huge diagrams (30, 60, + pages of printed material).

    The standard genealogical format is GEDCOM. I’ve been trying to create a contact list of living cousins, that also shows how we are connected via a single ancestor. I want the list to be printable on a single page. This is impossible to do on FTM, and I don’t want to type all the data again into a design tool like Adobe Illustrator. I’ll look at the tools here, but I’m guessing none of them support GEDCOM.

    In addition, I’d be interested in how to best present this type of information online. The Elastic Lists thing looks promising.

  89. 91

    Can someone update this list? It would be nice to see what applications are now available to organize unstructured data.

  90. 92


  91. 93

    holy ballz, i can lern so moch frum deez

    also, if you’re free thursdays, come to McHiggin’s Bar, and ill do ya right.

  92. 94

    Hey, Max Burr this is a serious website and comments like those are not appreciated.

  93. 95

    I for one would love to meet you Max Burr, and see your butt

  94. 96

    This article serves as a useful reference to write following article! Thanks!

  95. 97

    i visited many site for web site development, but one thing everybody will accept that is outclass website on the internet having all solution for webmasters, even i tired finding even a good css form for my site and finally got a solution ….
    Brilliant work, brilliant efforts ……..

  96. 98

    Great job…………….keep going……………….

  97. 99

    This one is nice as wel:

  98. 100

    Wow man, what really cool stuff could be done when you bring data to info graphics!

  99. 101

    Terrific document, well crafted I have to admit.

  100. 102

    Hi, this article was very interesting. I am a market researcher and we do a lot of presentations and creating new visuals would be wonderful. Do you know which program for windows would be best to great interesting modern graphs, charts, etc other than power point?
    I would appreciate any thoughts.


  101. 103

    Excellent work

  102. 104

    Excellent post!

  103. 105

    Great post. Well implemented design.

  104. 106

    Great post.I really appreciate your work.Could you provide more detail about the two articles you reference in this posting?

  105. 107

    cool stuff~

  106. 108

    Smashing compilation, thank you!
    Communications professionals often receive assignments to present info graphics both for print and the web. Do any of these tools provide high-resolution output for printing?

  107. 109

    Hello dear.
    Great post.I really like it.Awesome design.Please share more detail about it.Thanks.

  108. 110

    This is simply fantastic! I’m a newbie starting off with data visualization research – and this seems like a fantastic place to start! But its slightly over-whelming, leaving me clueless as to where to begin. Any suggestions for beginners?

    • 111

      Bill Droogendyk

      June 30, 2011 7:31 am

      Haria; Beginners and experienced people can benefit a lot from people like Edward Tufte, Stephen Few, Garr Reynolds, Nancy Duarte, Rolph Hichert and Hans Rosling. Look them up – study and learn. Implement!

  109. 112

    Finn Fitzsimons

    May 18, 2011 1:31 pm

    You should check out – a site that crowd-sources new ways to visualize data. People make templates by typing Processingjs code and then anybody can use them by copying and pasting from excell – worth a look at – so cool!!

  110. 113

    Arunmozhi (@tecoholic)

    July 23, 2011 9:23 pm

    Wonderful article, but the link at the bottom for the Charts and Diagrams Tools is broken.

    Kindly fix it I would be glad to go through those tools.

  111. 114

    Muzammil Khan

    July 29, 2011 9:54 pm

    great job done, specially introductory part is awesome.

  112. 115

    This is so detailed, really appreciate for your compilation

  113. 116

    Evgenia Grinblo

    September 23, 2011 6:56 am

    Absolutely love this round-up, Vitaliy. Great stuff. I might try Crazy Egg for a project this month… looks promising. Your little bio made me laugh.

  114. 118


  115. 119

    Yasmine Archilla

    October 14, 2011 2:48 am

    Thank you, I’ve recently been looking for information approximately this topic for a while and yours is the greatest I’ve discovered so far. However, what about the conclusion? Are you sure about the source?

  116. 120

    nice job!

  117. 121

    Great to see the contents

    many many wishes for the kind and knowledge sharing human being

  118. 122

    Some of the examples are “Infographics” and not “Data Visualization”

    There are differences.

    Whatever i type on google about specific mediums, i see a post of Smashing Magazine most of the times. By trying to act like you handle all the aspects of Design world, you sometimes give people false informations. Because of “Pop Magazine-like” communities like you, people get a wrong idea of what is design and they hang around with their sweet brushes and effects.

  119. 123

    Roger Buck

    May 2, 2012 3:19 pm

    Very nice article on yet another emerging opportunity for graphic design driven by data. Very exciting!

  120. 124

    You can try also to use

  121. 125

    I’m modifiying google search engine,as i am willing to represent the searched results graphically,plz tell me which graph approach willl be best for this purpose…custering is on of my choices…


↑ Back to top