Visualizations: Algorithms

From DftWiki

Jump to: navigation, search

--D. Thiebaut 17:58, 6 March 2013 (EST)


VisuLogo.png

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 dthiebaut-at-smith.edu 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:



Contents


Visu Algo.png

Algorithms/Software/Libraries

MergeSort Vs Quicksort Animated Algorithms

Category: Collections/Surveys/Library
Where: 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
Where: YouTube
Implementation: C++ (code available here)
Date: May 20, 2013

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







Visualizing Algorithms

VisualizingAlgorithms.png

Category: Algorithm Visualization
Where: http://bost.ocks.org/mike
Implementation: Javascript, D3.js
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.

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!









Flot

FlotSoftware.png

Category: Collections/Surveys/Library
Where: FlotCharts.org
Implementation: Javascript
Date: 2013

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



ggplot2

Ggplot2.png

Category: Software/Algorithm
Where: ggplot2.org
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

DataVisInMs.png

Category: Algorithms/GPUs
Where: 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

AbasAbelDataVisTools.png

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

IographicaMouseMovements.png

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

SeeingColorsVisualy.png

Category: News/Newsprint/Algorithms/Software
Where: 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.







Geo-Mapping Data using Tableau

TableauStepByStep 11.png

Category: Geographical/GIS
Where: 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)

GoogleMap3.png

Category: GIS/libraries
Where: 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.



HighCharts

HighCharts.png

Category: Collections/Surveys/Library
Where: highcharts.com at Highsoft Solutions AS
Implementation: Javascript
Date: 2012?

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




JPGraph

JPGraph.png

Category: Collections/Surveys/Library
Where: JPGraph.net
Implementation: Php library
Date: 2012?

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











ModestMaps

ModestMaps.png

Category: Collections/Surveys/Library
Where: ModestMaps.com
Implementation: Javascript
Date: 2012

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.








RaphäelJS

Raphaeljs.png

Category: Collections/Surveys/Library
Where: raphaeljs.com
Implementation: Javascript
Date: 2012?

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

Top20GISTools.jpg

Category: GIS/Geographic/libraries
Where: Brian Suda, at netmagazine.com
Implementation: NA
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.





Dataset

DataSet.png

Category: Software/Library
Where: MisoProject.com, joint project between The Guardian and Bocoup.
Implementation: Javascript
Date: 2012?

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



Leaflet

Leafletjs.png

Category: Software/Libraries
Where: leafletjs.com
Implementation: Javascript
Date: 2010

From leafletjs.com: 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
Where: Mike Bostock on github.com
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 ComputerWorld.com

30ToolsComputerworld.png

Category: Algorithms/Software/Tools
Where: 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), 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

DataVisToolsFromDatavis ch.png

Category: Algorithms/Software
Where: datavis.ch
Implementation: NA
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.





















Easel.ly

Easilly.png

Category: Algorithm/Software
Where: easel.ly
Implementation: NA
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.




Data Wrangler

Category: algorithms/tools
Where: Stanford
Implementation: NA
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.



Flex Interface for Touch Screens

Category: Algorithm
Where: Osaka University
Implementation: NA
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.






Crochet Algorithm

CrochetAlgorithm.jpg

Category: Algorithm
Where: futuregirl.com
Implementation: pen+paper
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.








Protovis

Protovis.png

Category: Algorithms
Where: vis.Stanford.edu
Implementation: Javascript
Date: 2011

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

GoogleDataPublishingLanguage.png

Category: Algorithm/Visual Data Structures
Where: code.google.com
Implementation: NA
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.



GeneaQuilts

GuineaQuilts.png

Category: Algorithms
Where: www.aviz.fr
Implementation: Java
Date: 2010

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.



How to make a bubble chart with R

BubbleChartWithR.png

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
Where: www.vostock.es
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 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.



Augmented Reality Book

Category: Multimedia/Algorithms
Where: Mark Lukas, ig.hfg-gmuend.de
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

FlowindDataPollToolsUsedForVisu.png

Category: Tools/Algorithms
Where: Nathan Yau, flowingdata.com
Date: 2010