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 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
Informationarchitects.jp 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
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.
Voyage 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.
Digg BigSpy arranges popular stories at the top when people digg them. Bigger stories have more diggs.
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
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.
CrazyEgg 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 Talk 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.
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.
We Feel Fine shows human feelings, calculated from a large number of weblogs.
Visualizing the Power Struggle in Wikipedia displays the most popular articles and the most frequent search queries in the heatmap.
Websites as graphs. An HTML DOM Visualizer Applet, which displays sites as graphs depending on the amount of links, tables, div tags, images, forms and other tags.
Interactive History Timeline presents the history of Great Britain, divided into interactive data blocks. The density of events is displayed on the map.
Winning Lotto Numbers 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.
Elastic Lists 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 blog regularly informs about new experiments in the area of data visualization. Nice to observe, useful to bookmark.
The JFK Assassination TimelineAn Ajax-based approach vor visual presentation of historical events. John F. Kennedy assassination as timeline with numerous presentation options. The related article with further examples.
4. Displaying connections
Munterbund 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.”
Burst Labs 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.
Universe DayLife displays events, connections and news as circles which gravitate around the topic they are related to.
Musiclens gives music recommendations and presents your current mood and musical taste as a diagram.
Figd’t Visualizer 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.
What have I been listening to?: Lee Byron describes his approach of creating a histogram about his music listening history.
Shape Of Song: 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.
Musicmap: connections are represented as connected lines; they create a web.
Musicovery displays music taste connections and lets you listen to the song and browse through similar songs.
Lanuage Poster proves that even simple lines can be descriptive enough. The History of Programming Languages as an original timeline.
5. Displaying web-sites
Spacetime 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.
UBrowser 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.
6. Articles & Resources
- Visualcomplexity.com
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 visualization Andrew Vande Moere, well-known through his blog Infosthetics, 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?
The article presents 13 new techniques of data visualization, with examples and further references. - 16 Awesome Data Visualization Tools
“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. - Dataesthetics
Eric Blue provides some references to unusual Data Visualization methods. - infosthetics – information aesthetics
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 Table
A periodic table of visualization methods.
7. Tools and Services
- You can create your own timelines with Xtimeline and Circavie.
- IBM Many Eyes
This Java-based service visualizes data online and helps to create pie charts, diagrams, tree maps, bar charts and histograms. Registration is required. Some examples are simply amazing. - prefuse | the prefuse visualization toolkit
Presents the beta-version of a Java-based toolkit for programming of application with integrated data visualization methods - Swivel
This service creates pie charts, diagrams and histograms “on the fly”. It also provides a Swivel API 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 Tools.
Tobi
August 30th, 2008 8:25 amI love this article! Especial the graphs which shows connection between things are fascinating. Regarding to this entry I have created a graph with moowheels and have written about this in my blog (Link).
Thanks again for this great and inspiring article!
Tobi
ava
September 5th, 2008 5:15 amHey have you heard the hottest reggae singer Ava Leigh’s new single called mad about the boy? .It’s available on I Tunes and at HMV.
gavin
September 20th, 2008 11:58 pmThanks for putting together this comprehensive collection of links
Manuel
October 5th, 2008 2:16 pmThank you very much. Perfect.
Gonzalo Álvarez Marañón
October 28th, 2008 1:22 amThank 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.
julienb
November 3rd, 2008 9:24 amVERY nice compilations
http://www.julienbayle.net/complexity
Owen
November 4th, 2008 7:17 amIs this data visualization really useful. Looks like scientific art. I just can’t think of any application of the information as presented.
kimberlyj
November 9th, 2008 10:51 amreading above about the ‘Lone Ranger’- you should see the scathing article about his book! It’s an interesting read…you can view it at: http://www.fyivisual.com
titled: Information Dashboard Design- The Emperor Has No Clothes
Enjoy!
BK
November 13th, 2008 8:16 amMost 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?
Jasmine
March 28th, 2012 2:53 pmI 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…
DC
December 10th, 2008 9:03 amI 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
mark
December 15th, 2008 11:24 pmchartjunk! chartjunk! chartjunk!
Emlak
December 17th, 2008 8:00 amVery interesting ;)
Shamblesguru
December 19th, 2008 8:42 pmIn Second Life, 3 online virtual world, I have a Data Visualisation display/exhibition at
SLURL: http://slurl.com/secondlife/International%20Schools/28/89/25
This area lists resources and landmarks relevant to Data Visualisation …. including importing data into Second Life to build 3D models in real time.
In this area you can also take several (free) 3D graphing boards that I’ve made and cubes that have a script in them to allow for easier stacking/building of 3D graphs in-world.
This area is on International Schools Island in Second Life
http://internationalschoolsisland.info
in the entrance of the Technology Tower
Christine Sutherland
December 21st, 2008 3:31 pmThese 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.
Misty
December 23rd, 2008 7:21 amWhen I saw Voyage, I could help but think of http://www.gecko9.com/, which was done years before.
bossmanthe
February 17th, 2009 7:08 amGreat article. The most innovative use of heatmap I have seen: http://www.scoregrid.com . These guys create heatmaps from the data derived during a soccer game.
james
February 21st, 2009 4:34 pmI 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.
swish
March 11th, 2009 6:40 amDoes 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.
Astralis
July 3rd, 2009 1:32 pmCan someone update this list? It would be nice to see what applications are now available to organize unstructured data.
zissshh
July 20th, 2009 6:20 amhey,,,great
Domanique Alicia
August 12th, 2009 11:28 amVery inspiring article. I love it. Worked with visualizing data a little bit in the past, but these are fantastic applications. I’m really curious to see where this moves to in the future. Away from our typical cloud tags, but into other forms of visualization that are equally compelling.
Along the lines, I came across this site today: http://www.congressspeaks.com
It it’s a data visualization tool, but sort of a hybrid as well. The site lets the user compare states and congress persons and how many words were used and what was said. A little cheeky too.
visguru
August 18th, 2009 7:03 amAwesome visuals! A lot of great sites I hadn’t heard of. To respond to a comment above, to make your own graph or map type visualizations you can use the (free) software http://www.sacmeq.org/statplanet/
its quite straightforward but you cannot use it to program your own visualizations. For that you could use something like Graphviz http://www.graphviz.org
UAT Media
September 14th, 2009 3:23 pmA cool data visualization project that was presented at SIGGRAPH 2009 Information Aesthetics Showcase was STOC (Stock Ticker Orbital Comparison) data visualization. There is a demo at http://www.youtube.com/watch?v=J47OJ7scP-Q and you can download a fully functional demo of the program at http://www.uniformchaos.org/stoc.php
max burr
September 18th, 2009 9:55 amholy ballz, i can lern so moch frum deez
also, if you’re free thursdays, come to McHiggin’s Bar, and ill do ya right.
Fred Thompson
September 18th, 2009 8:17 pmHey, Max Burr this is a serious website and comments like those are not appreciated.
Daniel Smith
September 18th, 2009 8:19 pmI for one would love to meet you Max Burr, and see your butt
Ann Otoole
October 18th, 2009 7:59 pmFor interesting tools that can be used for a variety of visualizations try http://www.caida.org/home/ and look at the tools section. Walrus is my favorite for studying graph relationships.
8maki
November 24th, 2009 6:58 amThis article serves as a useful reference to write following article! Thanks!
http://analyst.8maki.jp/2009/11/24/how-do-they-display-it-very-plainly-in-web/
Rizwan
February 6th, 2010 4:43 ami visited many site for web site development, but one thing everybody will accept that smashingmagazine.com 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 ……..
Govind
March 9th, 2010 2:03 amGreat job…………….keep going……………….
Johnny
April 19th, 2010 11:49 pmThis one is nice as wel: prezi.com/
Culturemobile
June 16th, 2010 2:26 pmBeautiful and usefull example of datavisualization in live : http://blog.culturemobile.net/index.php/2010/05/23/411-visualisation-information-catastrophes-naturelles
Sluff
June 24th, 2010 2:11 pmWow man, what really cool stuff could be done when you bring data to info graphics!
drda
August 17th, 2010 9:53 amSome examples of other data intense visual representations of datasets can be found at http://www.drasticdata.nl
we are cloud
August 24th, 2010 7:48 amThis post is awesome. if you are interested we have a short post about tips about getting the most out of your data visualizations. you can read it here: http://bimehq.com/data-visualization/data-visualization-secrets/
Patrick
September 7th, 2010 10:13 amIDV Solution’s Visual Fusion: Empowering the Insightful Enterprise http://www.idvsolutions.com/demos_videos.aspx
esmm
October 2nd, 2010 8:16 amGreat post.
Point this: http://cloudz.es
An HTML5 webapp that offers interactive graphical visualisation for http://delicious.com feeds.
Tristan Wolhok
November 11th, 2010 11:23 amTerrific document, well crafted I have to admit.
Jrod
November 15th, 2010 8:43 amHi, 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.
Thanks
Shantanu
November 17th, 2010 10:16 pmHi Jrod, try Tableau. The tool amazing. you can create interactive dashboards, charts and other visualizations. Initially you can tryout ” Tableau public”. I work with Business Intelligence company and I found it very useful.
http://www.tableausoftware.com/
wizardofid
February 18th, 2011 2:46 amHi Shantanu, Would you know what tools were used to create the visualisations at http://visualization.geblogs.com/ or at sites that curate data visualisations such as http://infosthetics.com/
tableau seems to be mostly linear
Tabi
December 25th, 2010 1:52 amExcellent work
Christophe
January 27th, 2011 2:00 amExcellent post!
Ellis-Jones
February 10th, 2011 5:45 pmGreat post. Well implemented design.
watson
February 10th, 2011 8:52 pmGreat post.I really appreciate your work.Could you provide more detail about the two articles you reference in this posting?
mlmleadsystempro
medcl
March 6th, 2011 7:05 amcool stuff~
pamela
April 3rd, 2011 4:57 amSmashing 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?
waqar
April 6th, 2011 2:28 amHello dear.
Great post.I really like it.Awesome design.Please share more detail about it.Thanks.
Haria
April 15th, 2011 2:09 pmThis 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?
Bill Droogendyk
June 30th, 2011 7:31 amHaria; 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!
Finn Fitzsimons
May 18th, 2011 1:31 pmYou should check out numberpicture.com – 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!!
Arunmozhi (@tecoholic)
July 23rd, 2011 9:23 pmWonderful 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.
Muzammil Khan
July 29th, 2011 9:54 pmgreat job done, specially introductory part is awesome.
Ohmz
August 22nd, 2011 11:55 pmThis is so detailed, really appreciate for your compilation
Evgenia Grinblo
September 23rd, 2011 6:56 amAbsolutely 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.
georg
February 29th, 2012 2:29 pmthats right
angela
October 12th, 2011 10:06 amweird
Yasmine Archilla
October 14th, 2011 2:48 amThank 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?
Arelli
December 12th, 2011 6:15 amnice job!
narender
December 22nd, 2011 7:56 amGreat to see the contents
many many wishes for the kind and knowledge sharing human being
Met
March 6th, 2012 8:17 pmSome 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.
Roger Buck
May 2nd, 2012 3:19 pmVery nice article on yet another emerging opportunity for graphic design driven by data. Very exciting!