Visualizations: Algorithms

From dftwiki
Jump to: navigation, search


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:

Visu Algo.png


TensorFlow Playground


Category: Algorithms/Animation
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.) [...]

BOKEH Python Library for Web Graphics


Category: Collections/Surveys/Library
Implementation: Python, Javascript, CoffeeScript
Date: 2013

From 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.
The Bokeh project encompasses two major components: the Bokeh package source code, written in Python, and the BokehJS client-side library, written in CoffeeScript. Accordingly, development of Bokeh is slightly complicated by the fact that BokehJS requires an explicit compilation step to render the CoffeeScript source into deployable JavaScript. For this reason, in order to develop Bokeh from a source checkout, you must first be able to build BokehJS.

Shiny: R Application in a Web Page


Category: Collections/Surveys/Library
Implementation: R + javascript?
Date: 2012

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

MergeSort Vs Quicksort Animated Algorithms

Category: Collections/Surveys/Library
Author/Source: On YouTube
Implementation: NA
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.

15 Sorting Algorithms Illustrated in 6 Minutes

Category: Collections/Surveys/Library
Author/Source: YouTube
Implementation: C++ (code available here)
Date: May 20, 2013

From 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

Visualizing Algorithms


Category: Algorithm Visualization
Implementation: Javascript, D3.js
Date: June 2014

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

Tip: If you click on the link posted to the right, just under the various visualizations, and follow up by clicking on the long hexadecimal number at the top of the new page, you'll get the code for the visualization in javascript, which uses the D3.js library. Very good example of coding graphical algorithms!



Category: Collections/Surveys/Library
Implementation: Javascript
Date: 2013

From Flot is a Javascript plotting library for jQuery. Examples [are available] in examples/index.html; they should give a good impression of what Flot can do, and the source code of the examples is probably the fastest way to learn how to use Flot. For installation, just include the Javascript file after you've included jQuery.

Generally, all browsers that support the HTML5 canvas tag are supported.



Category: Software/Algorithm
Implementation: R
Date: 2005

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.

Using GPU memory to cache Big Data


Category: Algorithms/GPUs
Author/Source: Madden and Mostak, MIT Comp. Sci.
Implementation: NA
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.

Data Visualization Tools


Category: Collections/Surveys/Library
Implementation: NA
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.

Christie Microtiles Kit

Category: Collections/Surveys/Library
Author/Source: Christie Digital
Implementation: NA
Date: NA

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.

Shiffmann's Most-Pixels-Ever Library

Category: Collections/Surveys/Library
Author/Source: NYU
Implementation: Java/Processing/C++
Date: 2013

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.

Massive Pixel Environment

Category: Collections/Surveys/Library
Author/Source: Texas Advanced Computing Center
Implementation: Java/Processing/C++
Date: May 2013

From [1]: 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.

Image Collage using 2D-Packing Approach

OneYear 2 2K.png

Category: Algorithm
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.

Visualizing Mouse Movement with IOGraphica


Category: Collections/Surveys/Library
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.

Seeing Colors


Category: News/Newsprint/Algorithms/Software
Author/Source: Drew Skau at
Implementation: Multiple Tools
Date: March 2013

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

Geo-Mapping Data using Tableau

TableauStepByStep 11.png

Category: Geographical/GIS
Author/Source: Tutorial on dftwiki
Implementation: Tableau
Date: 2013

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.

Google Charts (GIS)


Category: GIS/libraries
Author/Source: Google Charts
Implementation: Javascript
Date: 2013

From Geo-Mapping Data using Google Charts : This [tutorial provides] 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 Google Charts library 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. Some Python code is used to generate the HTML/Javascript code.



Category: Collections/Surveys/Library
Author/Source: at Highsoft Solutions AS
Implementation: Javascript
Date: 2012?

From : Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types.



Category: Collections/Surveys/Library
Implementation: Php library
Date: 2012?

From 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



Category: Collections/Surveys/Library
Implementation: Javascript
Date: 2012

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



Category: Collections/Surveys/Library
Implementation: Javascript
Date: 2012?

From : Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Top 20 visualization tools


Category: GIS/Geographic/libraries
Author/Source: Brian Suda, at
Implementation: NA
Date: Sept. 2012

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



Category: Software/Library
Author/Source:, joint project between The Guardian and Bocoup.
Implementation: Javascript
Date: 2012?

From : Dataset is a JavaScript client-side data transformation and management library. Dataset makes managing client-side data easy by handling loading, parsing, sorting, querying & manipulating data from all sorts of sources.

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.



Category: Software/Libraries
Implementation: Javascript
Date: 2010

From Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 28 KB of JS code, it has all the features most developers ever need for online maps.

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.

D3:Data-Driven Documents

DataDriventDocuments D3.png

Category: Algorithms
Author/Source: Mike Bostock on
Implementation: Javascript/HTML5
Date: 2012

From mbostock's wiki: D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

30 Tools from


Category: Algorithms/Software/Tools
Author/Source: Computer World
Implementation: NA
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), offers quick Web charts (Oct. 16, 2012) and Create simple, free charts with Datawrapper (Nov. 21, 2012).

Data Visualization Zoo from

DataVisToolsFromDatavis ch.png

Category: Algorithms/Software
Implementation: NA
Date: May 2012

From : The fine folks of data 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.


Category: Algorithm/Software
Implementation: NA
Date: May 2012

From San Diego-based start-up [] 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 For now, 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.

Data Wrangler

Category: algorithms/tools
Author/Source: 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
Author/Source: 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
Author/Source: 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
Author/Source: 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
Author/Source: 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
Author/Source: Nathan Yau,
Date: 2010