Visualizations: Algorithms

From DftWiki

Revision as of 08:38, 28 May 2011 by Thiebaut (Talk | contribs)

Jump to: navigation, search


This page is maintained by Dominique Thiebaut and contains various interesting visualization examples or related material gathered on the Web, and in various publications. Editing of this page by anonymous users is not enabled, but feel free to email with your own discoveries, which will be promptly added!

The different visualization systems shown below are organized by application domains, and by type (borrowed and adapted from Viz4All).

The application domains include:

The types include

  • 1-D               
  • 2-D
  • 3-D
  • hierarchical                              
  • multi-dimensional
  • network
  • temporal


Visu Algo.png


Data Wrangler

Category: algorithms/tools
Where: Stanford
Implementation: NA
Date: May 2011

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

Flex Interface for Touch Screens

Category: Algorithm
Where: Osaka University
Implementation: NA
Date: April 2011

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

Crochet Algorithm


Category: Algorithm
Implementation: pen+paper
Date: Feb. 2011

From : 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.



Category: Algorithms
Implementation: Javascript
Date: 2011

From 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.
Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.
This project is led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky.

Data Publishing Language


Category: Algorithm/Visual Data Structures
Implementation: NA
Date: Feb 2011

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



Category: Algorithms
Implementation: Java
Date: 2010

From : 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.

How to make a bubble chart with R


Category: Algorithm
Where: FlowingData
Implementation: R
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.

How Japanese Multiply

Category: Algorithm
Implementation: Paper
Date: 2010

Impure, a new Programming Language for Visualization

Category: Programming Language/Algorithms
Where: Bestiario, Barcelona, Spain
Implementation: NA
Date: Oct. 2010

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

Augmented Reality Book

Category: Multimedia/Algorithms
Where: Mark Lukas,
Implementation: Flash, Felx, Flartoolkit, ARToolkit
Date: 2010

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.

FlowingData's poll on Tools used for visualization


Category: Tools/Algorithms
Where: Nathan Yau, FlowingData
Implementation: NA
Date: Sept. 2010

Not a visualization per se, just a look at the most popular tools used to visualize data...

From [FlowingData]: Microsoft Excel led the way, like you'd expect, with a 31% share. R was pretty close for a while, but fell behind with a 21% response. This is almost the same as the results from the same poll two years ago. There was a 30/20 split. The newcomer this time around was Tableau, which surprised me, coming up in third with a 6% share. I didn't include Tableau in the previous poll, although a few people did mention it in the comments.

SVG Demo


Category: Algorithms
Implementation: SVG
Date: NA

An interactive demo where the user can manipulate 4 different images (resize, rotate, bring to front). See also photoshow.html on the same site...

Multi-Perspective Street Panorama

Category: Algorithms, Geographic
Where: Street Slide, at Microsoft
Implementation: NA
Date: SIGGRAPH 2010

From the Abstract: Systems such as Google Street View and Bing Maps Streetside enable users to virtually visit cities by navigating between immersive 360° panoramas, or bubbles. The discrete moves from bubble to bubble enabled in these systems do not provide a good visual sense of a larger aggregate such as a whole city block. Multi-perspective "strip" panoramas can provide a visual summary of a city street but lack the full realism of immersive panoramas.

We present Street Slide, which combines the best aspects of the immersive nature of bubbles with the overview provided by multiperspective strip panorama

What Different Sorting Algorithms Sound Like


Category: Algorithms
Where: Andrut Channel on YouTube
Implementation: NA
Date: May 2010

Insert Sort, Bubble Sort, Selection Sort, Merge Sort, and Gnome Sort.

Visualizing Sorting Algorithms


Category: Algorithms
Where: Aldo Cortesi, of
Implementation: Python (see for source code)
Date: Jan 2010

Aldo Cortesi makes the code available ( for generating wave patterns representing the movement of data under different sorting approaches. Some good information appear in Cortesi's blog, where he introduces the approach for his visualization. Great for class demos!



Category: Algorithms, Geographical
Where: SimpleGeo and Stamen
Implementation: SVG + Javascript, open-source
Date: 2010

from Polymaps provides speedy display of multi-zoom datasets over maps, and supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of image-based web maps.

Tableau Public


Category: Algorithms
Where: Tableau Software (Stanford University)
Implementation: VizQL
Date: 2010

From Tableau Public is a new alternative. It lets you publish data visualizations to the web that are useful and beautiful. These visualizations answer questions and tell stories. You can publish one in minutes. Visit the Gallery to see how people are using Tableau Public.

The Technology: There’s a revolutionary technology behind Tableau Public called VizQL: A Visual Query Language. You don’t need to be a programmer to use Tableau Public. VizQL is all under the hood. But it lets us do what we do.

Check out the tour of Tableau Software.

Represent Directionality in Network Visualization


Category: Algorithms
Where: Eindhoven University of Technology
Implementation: NA
Date: 2010

Paper abstract: Graphs are often visualized using node-link representations: vertices are depicted as dots, edges are depicted as (poly)lines connecting two vertices. A directed edge running from vertex A to B is generally visualized using an arrow representation: a (poly)line with a triangular arrowhead at vertex B. Although this representation is intuitive, it is not guaranteed that a user is able to determine edge direction as quickly and unambiguously as possible; alternative representations that exhibit less occlusion and visual clutter might be better suited. To investigate this, we developed five additional directed-edge representations using combinations of shape and color. We performed a user study in which subjects performed different tasks on a collection of graphs using these representations and combinations thereof to investigate which representation is best in terms of speed and accuracy. We present our initial hypotheses, the outcome of the user studies, and recommendations regarding directed-edge visualization. (pdf)

Google's Public Data Explorer


Category: Algorithms
Where: Google
Implementation: Flash
Date: 2010

From the Google Public Data Explorer's main page: ​The Google Public Data Explorer makes large datasets easy to explore, visualize and communicate. As the charts and maps animate over time, the changes in the world become easier to understand. You don't have to be a data expert to navigate between different views, make your own comparisons, and share your findings.

Microsoft's Pivot


Category: Algorithms
Where: Microsoft
Implementation: XML, Seadragon
Date: 2010

From the site: Pivot makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun. We tried to step back and design an interaction model that accommodates the complexity and scale of information rather than the traditional structure of the Web.



Category: Algorithms

Michael Smith Genome Sciences Center, Vancouver, British Columbia

Implementation: 2D
Date: 2009-present

From Circos uses a circular composition of ideograms to mitigate the fact that some data, like combinations of intra- and inter-chromosomal relationships (alignments, duplications, assembly paired-ends, etc) are very difficult to organize when the underlying ideograms (or contigs) are arranged as lines. In many cases, it is impossible to keep the relationship lines from crossing other structures and this deteriorates the effectiveness of the graphic.

Specific features are included to help viewing data on the genome. The genome is a large structure with localized regions of interest, frequently separated by large oceans of uninteresting sequence. To help visualize data in this context, Circos can create images with variable axis scaling, permitting local magnification of genomic regions to be controlled without cropping. Scale smoothing ensures that the magnification level changes smoothly. In combination with axis breaks and custom ideogram order, the final image can be easily tuned to offer the clearest illustration of your data.

Robert Kosara's EagerEyes and Parallel Sets


Category: Algorithms
Implementation: 2D Date: 2008-present

from "Parallel Sets (ParSets) is a visualization application for categorical data, like census and survey data, inventory, and many other kinds of data that can be summed up in a cross-tabulation. ParSets provide a simple, interactive way to explore and analyze such data.

The horizontal bars in the visualization show the absolute frequency of how often each category occurred: in this example, the top line shows the distribution between the passenger classes on the Titanic and the crew. Notice that the crew was the largest group of people, larger even than the Third Class! Within the passengers, the Third Class is of course the largest, with the First Class being second, and the Second Class the smallest.

The middle dimension shows a male to female ratio of almost 4 to 1. The bottom dimension, survival, gives you an impression of how many people survived the disaster: about 1/3 survived, 2/3 died.

Between the dimension bars are ribbons that connect categories and split up. This shows you how combinations of categories are distributed, and how a particular subset (say, the women in Third Class) can be further subdivided (e.g., into those who survived and those who did not)."

Chris Jordan's Art

ChrisJordan art.png

Category: Algorithms, Art

Chris Jordan Photographic Arts
Seattle, WA 98117

Implementation: 2D, Interactive
Date: 2009

In Running the Numbers, Chris Jordan uses SeaDragon (owned by Microsoft) to create mosaics of pictures representing art work or landscape that can be dynamically explored by the user.

The visualizations are collected in his new book Running the Numbers, Prestel Publishing, 2009.

Statistics can be daunting and dry: 1,000,000 trees cut down every year; 9,000,000 American children without health insurance; 2,000,000 plastic bottles used every five minutes; 2,300,000 adults incarcerated in U.S. prisons. Renowned photographer Chris Jordan brings these staggering numbers to life in manipulated digital photographs that are at once alluring and shocking. A landscape of toothpicks, each representing a felled tree, stretches into the horizon; a looping maze of plastic cups reveal how many are used each day on airplane flights; fashioned from soda cans, a replica of a Seurat masterpiece becomes a lesson in waste; and thousands of Barbie dolls—representing the number of breast augmentations performed each year—combine to depict a woman’s torso. Filled with astonishing photographs of surprising beauty, this book, manufactured from recycled materials, helps us grasp visually the potential consequences of our culture of waste. (from

Jeff Veen: Designing for Big Data

Category: Algorithms, Design
Where: Information Aesthetics
Implementation: NA
Date: 2009

Presentation by Jeff Veen on designing for Big Data.

From During the talk, he focuses on some of the classic examples of information visualization (John Snow pump, Minard's map, the tube map, and so on), the issue of "decorating" data versus making it accessible, and the emerging challenge to empower lay people to participate in visualizing and analyzing their own data.

Bubble Sets

Category: Algorithms
Where: U. Toronto (C. Collins)
Implementation: network, 2D
Date: 2009

Very interesting visualization by C. Collins at U. Toronto.

Bubble Sets: Revealing Set Relations with Isocontours over Existing Visualizations Christopher Collins, Gerald Penn, and Sheelagh Carpendale

Abstract: While many data sets contain multiple relationships, depicting more than one data relationship within a single visualization is challenging. We introduce Bubble Sets as a visualization technique for data that has both a primary data relation with a semantically significant spatial organization and a significant set membership relation in which members of the same set are not necessarily adjacent in the primary layout. In order to maintain the spatial rights of the primary data relation, we avoid layout adjustment techniques that improve set cluster continuity and density. Instead, we use a continuous, possibly concave, isocontour to delineate set membership, without disrupting the primary layout. Optimizations minimize cluster overlap and provide for calculation of the isocontours at interactive speeds. Case studies show how this technique can be used to indicate multiple sets on a variety of common visualizations.

Representing Graphs as Trees


Category: Algorithms
Where: University of Maryland
Implementation: network
Date: NA

Taken from "Visualizing Graphs as Trees: Plant a seed and watch it grow", Bongshin Lee, Cynthia Sims Parr, Catherine Plaisant, Benjamin B. Bederson.

Abstract. TreePlus is a graph browsing technique based on a tree-style layout. It shows the missing graph structure using interaction techniques and enables users to start with a specific node and incrementally explore the local structure of graphs. We believe that it supports particularly well tasks that require rapid reading of labels.


Category: Algorithms
Where: CMU and Lawrence Livermore National Lab
Implementation: network
Date: 2008

We present Graphite, a system that allows the user to visually construct a query pattern, finds both its exact and approximate matching subgraphs in large attributed graphs, and visualizes the matches. For example, in a social network where a person’s occupation is an attribute, the user can draw a ‘star’ query for “finding a CEO who has interacted with a Secretary, a Manager, and an Accountant, or a structure very similar to this”. Graphite uses the G-Ray algorithm to run the query against a user-chosen data graph, gaining all of its benefits, namely its high speed, scalability, and its ability to find both exact and near matches. Therefore, for the example above, Graphite tolerates indirect paths between, say, the CEO and the Accountant, when no direct path exists. Graphite uses fast algorithms to estimate node proximities when finding matches, enabling it to scale well with the graph database size.

Novelties - Lines and bubbles


Category: Algorithm
Where: NYT
Implementation: 2D
Date: 2008

Article link:

NYT articles 8/8/31 acknowledging new ways for people to display information. It's really an article on IBM's Many-Eyes (

Collaboration like this can be an effective way to spur insight, said Pat Hanrahan, a professor of computer science at Stanford whose research includes scientific visualization. “When analyzing information, no single person knows it all,” he said. “When you have a group look at data, you protect against bias. You get more perspectives, and this can lead to more reliable decisions.”

“The great fun of information visualization,” Ben Shneiderman says, “is that it gives you answers to questions you didn’t know you had.”



Category: Algorithms
Where: CS, Princeton
Implementation: network
Date: NA

Interesting Processing application showing the automatically scaling/organizing of a tree. Done in Processing

Also uses a Physics library and animation library from the same site.

Processing Examples

Yahoo Burst

Category: Algorithms
Where: NA
Implementation: NA
Date: NA

Visualizations implemented with Processing


Category: Algorithm
Where: TinRocket
Implementation: 2D
Date: 2005

Interesting circle packing application.

Tinrocket, LLC is a privately held company specializing in computer graphics visualization & software development located in Brooklyn, New York.

IBM's Many Eyes


Category: Algorithms
Where: IBM
Implementation: Misc.
Date: current

All the visualizations on Many Eyes have an attached discussion forum. As you explore a visualization, you may find a view that you'd like to talk about or share. If you post a comment, your "view" will be saved along with your comment so others can see what you're seeing.

Each visualization lets you select data items by clicking. Your selection will be highlighted in a bright color, so that you can refer to those items in your comments. This simple feature is very convenient: it's much nicer to say "Look at the circled part of the graph" than "look at the thing sort of at the upper right." (from )

Microsoft SilverLight


Category: algorithms
Where: Microsoft
Implementation: Misc.
Date: current

SilverLight is an environment for generating Web sites, including visualizations and charts, including networks, gant charts, etc.



Category: Algorithm
Where: Stanford (Jeffrey Heer)

Hierarchical, 2D, network

Date: 2009

Prefuse is a set of software tools for creating rich interactive data visualizations. The original prefuse toolkit provides a visualization framework for the Java programming language. The prefuse flare toolkit provides visualization and animation tools for ActionScript and the Adobe Flash Player.

Prefuse supports a rich set of features for data modeling, visualization, and interaction. It provides optimized data structures for tables, graphs, and trees, a host of layout and visual encoding techniques, and support for animation, dynamic queries, integrated search, and database connectivity. Prefuse is written in Java, using the Java 2D graphics library, and is easily integrated into Java Swing applications or web applets. Prefuse is licensed under the terms of a BSD license, and can be freely used for both commercial and non-commercial purposes. (from

Check out the movie and the gallery of visualizations implemented with this toolkit.



Category: Algorithm
Where: Stanford
Implementation: 3D, Network
Date: 2001

This is a 3D-Graph visualization tool created/maintained by Tamara Munzer's research group at Stanford. It is open source and interactive, written in C++ and OpenGL.

CCByNc.png You can remix, tweak, and build upon this page non-commercially. Your work must acknowledge Dominique Thiebaut as its author and be non-commercial.