This page is maintained by Dominique Thiebaut and contains various interesting visualization examples or related material found in the media and on the Web, in various forms. The authors of the visualization, or its source is indicated in the Author/Source field of each entry. I try to locate the actual authors as best as I can. I also try to find out what particular software tools were used to generate the visualization. This is reported in the implementation field.
The different visualization systems shown below are organized by application domains, and by type (borrowed and adapted from Viz4All).
The application domains include:
Author/Source: Daniel Smilkov and Shan Carter
Implementation: See this github repo.
Date: July 2016
From Unveiling the Hidden Layers of Deep Learning by Amanda Montañez: As part of a recent collaborative project called Tensor Flow, Daniel Smilkov and Shan Carter created a neural network playground, which aims to demystify the hidden layers by allowing users to interact and experiment with them. There is a lot going on in this visualization, and I was recently fortunate enough to hear Fernanda Viégas and Martin Wattenberg break some of it down in their keynote talk at OpenVisConf. (Fernanda and Martin were part of the team behind Tensor Flow, which is a much more complex, open-source tool for using neural networks in real-world applications.) [...]
From bokeh.pydata.org: Photographers use the Japanese word “bokeh” to describe the blurring of the out-of-focus parts of an image. Its aesthetic quality can greatly enhance a photograph, and photographers artfully use focus to draw attention to subjects of interest. “Good bokeh” contributes visual interest to a photograph and places its subjects in context.
Bokeh is a Python interactive visualization library that targets modern web browsers for presentation. Its goal is to provide elegant, concise construction of novel graphics in the style of D3.js, but also deliver this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.
From Shiny.rstudio.com: Shiny is an R package that makes it easy to build interactive web applications (apps) straight from R. Inspired by the innovations of R users in science, education, and industry, RStudio develops free and open tools for the R community. These include the RStudio development environment as well as the shiny, ggvis, and dplyr packages (among many others). With their increasing popularity, RStudio added enterprise-ready professional products to make it easier for teams to scale and share work.
Author/Source: On YouTube
Date: Jan 2014
This video and others demonstrating various computer science algorithms was created by Udi Aharoni, a researcher at IBM
Research Labs, who in his spare time writes and creates animated videos. Udi Aharoni's Web site can be found here.
From Youtube.com: Published on May 20, 2013
Visualization and "audibilization" of 15 Sorting Algorithms in 6 Minutes.
Sorts random shuffles of integers, with both speed and the number of items adapted to each algorithm's complexity.
The algorithms are: selection sort, insertion sort, quick sort, merge sort, heap sort, radix sort (LSD), radix sort (MSD), std::sort (intro sort), std::stable_sort (adaptive merge sort), shell sort, bubble sort, cocktail shaker sort, gnome sort, bitonic sort and bogo sort (30 seconds of it).
More information on the "Sound of Sorting" at panthema.net
Category: Algorithm Visualization
Date: June 2014
From http://bost.ocks.org: Algorithms are a fascinating use case for visualization. To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This may be why algorithm visualizations are so unusual, as designers experiment with novel forms to better communicate. This is reason enough to study them.
But algorithms are also a reminder that visualization is more than a tool for finding patterns in data. Visualization leverages the human visual system to augment human intellect: we can use it to better understand these important abstract processes, and perhaps other things, too.
Generally, all browsers that support the HTML5 canvas tag are supported.
From wikipedia: ggplot2 is a data visualization package for the statistical programming language R. Created by Hadley Wickham in 2005, ggplot2 is an implementation of Leland Wilkinson's Grammar of Graphics—a general scheme for data visualization which breaks up graphs into semantic components such as scales and layers. ggplot2 can serve as a replacement for the base graphics in R and contains a number of defaults for web and print display of common scales. Since 2005, ggplot2 has grown in use to become one of the most popular R packages. It is licensed under GNU GPL v2.
Author/Source: Madden and Mostak, MIT Comp. Sci.
Date: Oct. 2013
From MIT Technology Review: New software can use the graphics processors found on everyday computers to process torrents of data more quickly than is normally possible, opening up new ways to visually explore everything from Twitter posts to political donations.
Known as MapD, or massively parallel database, the new technology achieves big speed gains by storing the data in the onboard memory of graphics processing units (GPUs) instead of in central processing units (CPUs), as is conventional. Using a single high-performance GPU card can make data processing up to 70 times faster.
Date: Oct 2013
THis is a collection of tools for data visualization. Some already appearing in some older posts, but it is always good to have a fresh evaluation of tools and see which stay at the top of people's lists.
Author/Source: Christie Digital
From Christie Microtiles's brochure : Combining the strengths of DLP® and LED technology, Christie MicroTiles have higher resolution, brighter images and a much wider color palette than conventional LCD displays. With tiny seams and no practical limit to the number of tiles in a display, Christie MicroTiles produce a nearly seamless canvas of super-fine pixels. Images look amazing at any angle and viewing distance – even close up.
From MPE's wiki: The Most Pixels Ever library is a software solution for taking a single-screen real-time graphics application (developed in Java) and spanning it across multiple screens (each connected to a separate computer). Its features include “time syncing” and “spatial syncing.” Time syncing ensures that each frame is rendered simultaneously on each display and is achieved by network communication. Spatial syncing ensures that each client computer renders the appropriate portion of the larger display on its display.
Author/Source: Texas Advanced Computing Center
Date: May 2013
From : Massive Pixel Environment1 (MPE)is a library for extending Processing sketches to multi-node tiled displays. This library makes it possible to render interactive Processing sketches across distributed computing systems on many displays. It is intended for tiled display systems, but works in many other types of environments. With simple modifications, a sketch can be rendered across a cluster at the native resolution of the displays, and can greatly increase the amount of data that can be visualized at one time. This library is intended to run on Linux and OSX-based clusters.
This library is developed from scratch at the TACC/ACES Visualization Lab with inspiration from Most Pixels Ever, developed by Daniel Shiffman.
Author/Source: Smith College
Implementation: Processing, Java
Date: July 2013
From the 2D-Packing page: The collage contains 2,200 photographs. The photographs have been resized by a random factor, and not all photographs have the same aspect ratio. A 2D-packing heuristic is applied to pack the photographs using a greedy localized best-fit approach.
Implementation: Java and Processing
Date: June 2013
From IOGraphica's Web page: Formerly known as MousePath it was made by Moscow designer Anatoly Zenkov to brighten up the routine work. Posting it on Flickr caused informal interest and afterward Anatoly Zenkov and his colleague Andrey Shipilov decided to evolve the app.
Author/Source: Drew Skau at Visua.ly
Implementation: Multiple Tools
Date: March 2013
From Visua.ly: Color is a crucial part of our visual experience. It indicates many things in our lives, from the ripeness of a banana, to how someone is feeling, to which subway line we should be on. Not everyone sees colors the same way, and colors have drastically different meanings in different cultures, but one thing we all have in common: color is important. These visualizations all show us different things about colors.
From DFTwiki: This is a series of (quick) steps taken to generate a geographical representation of a list of countries appearing in a CSV-formatted file (comma-separated values). The Tableau software package is used to display the map. The representation associates to each country the number of lines in the file that contain that country. For example, if the country "Belgium" appears 100 times in the CSV file, the value 100 will be associated with Belgium, and the darkness of the color used to show the country will be chosen to show the intensity of 100 compared to the most cited country.
Author/Source: Google Charts
Author/Source: highcharts.com at Highsoft Solutions AS
Implementation: Php library
From JPGraph.net: The following list shows what core plot types are supported by the current JpGraph. In addition most plots also have several sub-types. Click on the list to jump to the corresponding section in the gallery which gives more examples and also information about sub-graph types. Line, Area, Bar, Pie, Scatter, Impulse, Field, Spline, Geo Maps, Stock, Polar, Error, Balloon, Radar, Contour
From ModestMaps.com: odest Maps is a small, extensible, and free library for designers and developers who want to use interactive maps in their own projects. It provides a core set of features in a tight, clean package with plenty of hooks for additional functionality.
It doesn't try to include every possible map control or layer type. It's designed to be a simple platform to build upon. The code is well-designed, tested and deployed widely - thousands of maps already use the toolkit. And while we aim for the highest performance and compatibility with new technology, it is tested against older browsers, including Internet Explorer.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Author/Source: Brian Suda, at netmagazine.com
Date: Sept. 2012
From netmagazine.com: From simple charts to complex maps and infographics, Brian Suda's round-up of the best – and mostly free – tools has everything you need to bring your data to life.
One of the most common questions I get asked is how to get started with data visualisations. Beyond following blogs, you need to practise – and to practise, you need to understand the tools available. In this article, I want to introduce you to 20 different tools for creating visualisations: from simple charts to complex graphs, maps and infographics. Almost everything here is available for free, and some you have probably installed already.
Author/Source: MisoProject.com, joint project between The Guardian and Bocoup.
Data access lies at the heart of a great deal of interactive content. Dataset solves common problems with the traversal, manipulation and management of that data
The example illustrated here (to the right) is titled "Cabinet Office Spending" and taken from MisoProject's Examples page.
It uses D3 and backbone.js to build an interactive treemap that allows one to explore UK Government Cabinet Office spending in the 2010/2011 financial year. This example demonstrates: grouping & selecting data, remote data files.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
Author/Source: Mike Bostock on github.com
Author/Source: Computer World
Date: Nov. 2012
From ComputerWorld: The chart [presented] originally accompanied [Computerworld's] story 22 free tools for data visualization and analysis (April 20, 2011). [They're] updating it as [they] cover additional tools, including 8 cool tools for data analysis, visualization and presentation (March 27, 2012), Startup offers 1-click data analysis (Aug. 29, 2012), Infogr.am offers quick Web charts (Oct. 16, 2012) and Create simple, free charts with Datawrapper (Nov. 21, 2012).
Data Visualization Zoo from datavis.ch
Date: May 2012
From swiss-miss.com : The fine folks of data visualization.ch put together a selection of data visualization tools that they use the most and that they enjoy working with. It includes libraries for plotting data on maps, frameworks for creating charts, graphs and diagrams and tools to simplify the handling of data. Even if you’re not into programming, you’ll find applications that can be used without writing one single line of code.
Date: May 2012
From infosthetics.com: San Diego-based start-up Easel.ly [easel.ly] is offering a beta service that allows lay people to design and implement their own "infographics" via an online editor. The user-based customization of infographics seems to be the next phase after the automatic generation of infographics, and has already been promised by community websites like visual.ly.
For now, easel.ly allows users to drag and drop predefined and uploaded vector images on pre-designed canvases and themes for easy creation and customization of infographics. According to the founders Patrick Alcoke and Neil Harris, all themes have been designed by graphic designers to ensure the highest quality for their users to start with.
The service is currently still in beta and thus free. The editor also resembles more an online vector shape canvas with a library of flashy infographic imagery, than a workable tool that makes the mapping of numerical values to believable shapes more efficient or compelling. Yet, we'll need to see what the future brings.
Date: May 2011
From vis.stanford.edu/papers/wrangler: Though data analysis tools continue to improve, analysts still expend an inordinate amount of time and effort manipulating data and assessing data quality issues. Such "data wrangling" regularly involves reformatting data values or layout, correcting erroneous or missing values, and integrating multiple data sources. These transforms are often difficult to specify and difficult to reuse across analysis tasks, teams, and tools. In response, we introduce Wrangler, an interactive system for creating data transformations. Wrangler combines direct manipulation of visualized data with automatic inference of relevant transforms, enabling analysts to iteratively explore the space of applicable operations and preview their effects. Wrangler leverages semantic data types (e.g., geographic locations, dates, classification codes) to aid validation and type conversion. Interactive histories support review, refinement, and annotation of transformation scripts. User study results show that Wrangler significantly reduces specification time and promotes the use of robust, auditable transforms instead of manual editing.
Author/Source: Osaka University
Date: April 2011
From engadget.com: No, it's not an actual flexible touchscreen, but this so-called "flex" interface developed by some researchers at Osaka University is still pretty novel. Rather than simply moving content off the screen when you're browsing something like Google Maps, it treats what's on the screen as an elastic, flexible material and squishes the content as it gets closer to the edge of the screen, which still lets you see it while you focus on a different area. That, the researchers say, would be just as effective on phones and other devices in addition to large touchscreens, and it would obviously be fairly easy to implement. Check it out in action in the video above.
Date: Feb. 2011
From futuregirl.com : This is the tricky part - making a 3-D object assembly chart. Here is the clean chart so if someone has questions, I can direct them to a numbered hex.
Black numbers are full hexes. Red numbers are half-hexes. Half-hexes will be covered in a later episode.
You don't have to attach your hexes in this order. Connect them up however you'd like. I do suggest that you lay your hexes on the floor and arrange them before you start assembling your tote.
From vis.Stanford.edu: Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.
This project is led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky.
Category: Algorithm/Visual Data Structures
Date: Feb 2011
From googleblog.blogspot.com: Today, we’re opening the Public Data Explorer to your data. We’re making a new data format, the Dataset Publishing Language (DSPL), openly available, and providing an interface for anyone to upload their datasets. DSPL is an XML-based format designed from the ground up to support rich, interactive visualizations like those in the Public Data Explorer. The DSPL language and upload interface are available in Google Labs.
Follow Google's tutorial on DSPL here.
From www.aviz.fr : GeneaQuilts is a new visualization technique for representing large genealogies of up to several thousand individuals. The visualization takes the form of a diagonally-filled matrix, where rows are individuals and columns are nuclear families. The GeneaQuilts system includes an overview, a timeline, search and filtering components, and a new interaction technique called Bring & Slide that allows fluid navigation in very large genealogies.
Date: Dec 2010
A very nice step-by-step tutorial from FlowingData.
From FlowingData: Ever since Hans Rosling presented a motion chart to tell his story of the wealth and health of nations, there has been an affinity for proportional bubbles on an x-y axis. This tutorial is for the static version of the motion chart: the bubble chart. Sometimes you don't need to animate your data over time.
Category: Programming Language/Algorithms
Author/Source: Bestiario, Barcelona, Spain
Date: Oct. 2010
From Impure.com: Bestiario, a Barcelona Spain based start-up, has been exploring and inventing new interactive visualization paradigms over the past 5 years. The result of this effort is the creation of IMPURE.
Impure is a visual programming language aimed to gather, process and visualize information. With impure is possible to obtain information from very different sources; from user owned data to diverse feeds in internet, including social media data, real time or historical financial information, images, news, search queries and many more. Impure is a tool to be in touch with data around internet, to deeply understand it. Within a modular logic interface you can quickly link information to operators, controls and visualization methods, bringing all the power of the comprehension of information and knowledge to the not programmers that want to work with information in a professional way.
Impure is still in private alpha version.
Author/Source: Mark Lukas, ig.hfg-gmuend.de
Implementation: Flash, Felx, Flartoolkit, ARToolkit
This is a concept and a demo of a book and augmented-reality display of the book content. The book comes with a CD, which, when loaded up in a laptop uses the video-cam to detect symbols on the pages of the book and displays 3D graphics superimposed on the book.
Author/Source: Nathan Yau, flowingdata.com