Information visualisation

✎ This article/section is a stub — some half-sorted notes, not necessarily checked, not necessarily correct. Feel free to ignore, or tell me about it.

Snippets of theory

The following are some common channels that information can be encoded into.

• Position
• Color
• Shape
• Motion
• Scale (in one, two, or three dimensions at once).
• Orientation
• Color

In some way these are dimensions of representation, but they are hardly orthogonal for our sensory system, so this doesn't in any way mean you can just represent eight-dimensional data at will. Also, further down the list, the actual variations are discerned less automatically, so your usual picks will be two or three from the top of this list.

You should probably know about Gestalt psychology to avoid and exploit specific effects.

Diagrams (types, examples)

Proportions

Bullet graph

Like a mix between a bar graph, gauge, and progress bar, but compact and with with a comparison.

http://en.wikipedia.org/wiki/Bullet_graph

Treemaps

Primarily shows proportions. Covers a given area with the relative sizes of the elements in a tree - usually using rectangles.

Can also handle hierarchical data, by walking into nodes and dividing its elements as well, making for nested rectangles. (though this can easily become messy)

Gives a good overview of proportions of many items, and is information dense in that it doesn't waste space. They tend to be easiest to read and grasp for at most a few levels and/or at most a few dozen items.

There are many ways to layout a particular data set while keeping the proportional relationships.

There are a handful of basic approaches, and more variations of lower-level decision logic, and specific-purpose variations.

Each style has its own qualities in terms of:

• visibility of order (of relative sizes, or potentially of something else) present in the data
• layout stability under small changes
• ease of labeling (e.g. vertical strips work well)
• squareness of items - the aspect ratio being near 1. This tends to looks nicer, is more easily comparable than e.g. thin strips are to each other

Some of these seem to be tradeoffs - in particular orderedness and aspect squareness. Implies is that there is no algorithm that is known to be optimal.

Some algorithms are O(n²) with the amount of nodes, largely because they look ahead in the list of nodes.

Most can be executed in a simple shallow-to-deep recursive, way. In other words, with no interaction between layers beyond giving the deeper level a boundary to work in.

Layout variants:

• Slice & Dice treemaps:
  • ordered, little attention to aspect ratio (typically thin slices), good stability

• Strip(verify):
  • ordered, some attention to aspect ratio, medium stability
  • http://www.infovis-wiki.net/index.php/Treemap

• Squarified treemaps:
  • see e.g. [1]
  • Examples: WizTree show drive space use.
  • unordered (that is, using size only), good attention to aspect ratio, medium stability

• Pivot
  • order, some attention to aspect ratio, medium stability

• Split
  • Named by Ordered and Unordered Treemap Algorithms and Their Implications on Handheld Devices
  • order, some attention to aspect ratio

....and some fancier variants:

• Circular treemaps:
  • circular treemap
• Font 004 - Community

• Jigsaw Treemaps
  • shifts a little in the direction of more general space-filling visualizations
  • jigsaw reemap
  • http://www.research.ibm.com/visual/papers/158-wattenberg-final3.pdf

• Convex Treemaps
  • convex treemap
  • refers to various experiments related to shape (and implied algorithm changes), including:
    • rectangle/triangle cuts,
    • Voronoi treemaps, e.g. [2]

See also:

• http://www.cs.umd.edu/hcil/treemap-history/
• http://www.cs.umd.edu/hcil/treemap-history/java_algorithms/LayoutApplet.html
• http://smartdatacollective.com/Home/16512

Sunburst

Sunburst diagram/tree

Sunburst visualisation

Other

• Baby Name Wizard
• http://eagereyes.org/Techniques/SquarePieCharts.html

• Browse Goods visual shopping

Clouds:

• Many examples out there
• http://jevbratt.com/skr/description_e.html

Fun:

• http://www.chrisjordan.com/current_set2.php

Hierarchy

Trees

Basic trees:

• well. Many, many things out there.

Alternate views:

• valentine's day infographics

Dendrogram/phylogram/cladogram:

• horizontal/vertical
• unrooted trees
• radial trees (regularly unrooted)
  • e.g. Tree of Life

Radial views

Radial/pie trees/hierarchy/connectivity (moving into (nested) graphs):

• Circos
• torta

• Examples, some hybrid:
  • Example:Indo-european langauges
  • The Bloom Diagram
  • Graphical visualization of text similarities
  • Hierarchical Edge Bundles
  • Contemporary Art in Milan
  • Music Rainbow
  • Porpita porpita (Chondrophore)
  • website traffic map
  • Biology In Four Dimensions
  • Karlsruhe Tariff Zones
  • SemaSpace
  • Backchannel

Connectivity

Graph as in nodes 'n' edges

Offline drawing (some interactive):

• GraphViz
• Graphopt
• Large Graph Layout (lgl)

• IsaViz (for RDF)

Web-based (some interactive):

• Graph Gear
• SpringGraph (Flash, specifically Flex)
• http://sawamuland.com/flash/graph.html

• TouchGraph (Java applet) (now a company; only the old version is open source)
• hypergraph (Java applet)
• JUNG (Java applet)
• Interactive Graph Drawing (Java applet)
• RDF Gravity (Java)

• three for all (prefuse; see below)

• Tarpaulin

Specific/example applications:

• http://zvtm.sourceforge.net/zgrviewer.html

• http://www.stanford.edu/group/sonia/
• visuwords online visual dictionary
• musicovery visual jukebox
• visual music recommendation
• Citegraph
• Visual Boom
• Genealogy Motion Graphics
• TuneGlue
• Visualising Multiple Overlapping Classification Hierarchies
• Diagram-geared:
  • yEd (graph editor)
  • JGraph (diagrams and such)
  • OmniGraffle (Mac)
  • NodeBox (Mac)
  • Welkin

Arcs

Tend to be useful for graph data that is rather hierarchical, and not too dense

• Thread Arcs

Flow

Sankey diagram:

• Sankey diagram (wikipedia article)
• Interactive Sankey diagrams

• The Italian Wine System
• http://infosthetics.com/archives/2007/07/genographic_world_map.html

Chonology

• http://www.infovis-wiki.net/index.php/Image:In_the_news.gif

Events over time:

• SIMILE TimeLine
• Hurricane Katrina history
• History of world religions
• 400 years of academic papers

Proportions over time:

• Sparklines
• http://infosthetics.com/archives/2007/03/detailed_digg_scatterplots.html
• http://infosthetics.com/archives/2007/02/bigspy_digg_visualization.html

Some alternative views:

• http://lip.sourceforge.net/calendars/calendar.php?year=2007
• http://infosthetics.com/archives/2006/12/information_esthetics_calendar.html
• http://infosthetics.com/archives/2006/12/creative_calendar_design.html

Geography / spatial

Geographical:

• Travel-time Maps
• Travel time tube map
• cartographic flow map layout
• world blogosphere screensaver
• live stats on a 3D globe
• locative disposition
• WorldMapper
• http://www.earthalbum.com/usa

Spatial / psuedo-geographical:

• IP map of the internet
• Fetish Roadmap

Related libraries:

• Generic Mapping Tools (GMT)

Some alternatives:

• topographic landscape creation
• FreeFall Screensaver

Wider analysis/visualization

Visualization:

• Improvise
• InfoVis Toolkit (Java)
• Prefuse (Java applets)
• Piccolo (Java/C#, interactive)
• Visualization Toolkit (VTK) (C++)
  • MayaVi (Python, Tkinter GUI)
• Processing (Java) (not directly/only visualization, but programmable)
• Improvise (Java) (see examples)

General dataset apps:

• http://exsitewebware.com/extrema/index.html
• IBM OpenDX
• http://www.paraview.org/HTML/Index.html ParaView
• http://services.alphaworks.ibm.com/manyeyes/home (online)

Statistics:

• R

Web-based:

• JSViz

• flare (flash)

Software

Libraries

And/or things that can output images:

• ploticus (script interface, C library)
• gnuplot (script interface), see also Gnuplot notes
• rrdtool's graphing. See also MRTG (Networking notes) and system admin apps based on it (Linux admin notes).
• dislin (C/Fortran) (see also disipyl, a python wrapper)

• matplotlib (Python, see also notes at Numpy, scipy, matplotlib, pylab)
• Gruff (Ruby)
• JFreeChart (Java)
• jCharts (Java)

• ZedGraph (.NET)

• DPGraph

Web-based

Seemingly the nicest options (no server dependencies or only light server dependencies, and also fairly pretty):

• ChartJS (javascript, responsive)

• chartist (javascript, responsive)

• Plotr (javascript (Prototype), free, open source)

• PlotKit (apparently obsoletes CanvasGraph) (javascript (for Mochikit), free, open source)

• flot (javascript (jQuery), free, open source)

• jqPlot (javascript (jQuery), free, open source)

• Google Chart API (generated from google's servers from request data. free, but with daily limit (that you can usually solve by caching results))

• Bluff

• jquery.Sparklines (javascript (for jQuery))

• JavaScript InfoVis Toolkit (javascript, free, open source)

Web services:

• Google charts

• plotly (javascript/python/R/matlab APIs, free version and paid versions, mostly online but can be used offline)

Also useful in certain cases:

• open flash chart (flash, free, open source)

• EJSChart (javascript, paid-for)

• See also lists like http://cssjuice.com/22-code-snippets-for-creating-decent-charts/

• libchart (free, server-side (PHP))
• pChart (server-side (PHP))

• PHP/SWF Charts (Flash, paid for, has free version)
• amCharts (Flash, paid for, has free version)

• FusionCharts (Flash, paid for)
• Flex Charting (Flash, paid for)
• Big Faceless Java Graph Library (java, paid for)

Unsorted:

• http://bluff.jcoglan.com/
• http://www.insideria.com/2009/12/28-rich-data-visualization-too.html

Apps / report tools / app plugins

• BLT Toolkit (Tcl/Tk, free)
• HippoDraw (Python/Qt, free)
• Narrative (MacOSX, free)
• GraphX (MacOSX, free)
• GraphSketcher (MacOSX, free)
• Report Magic (Perl, free)
• DataViews (Java, free(verify))

• JasperReports (Java, free(verify))
• Agata
• Zest (Eclipse; Java)
• GraphFX (.NET/Java, paid-for)

• [3] (Java) analyses dependencies in java code

Unsorted (software)

• http://extra.amcharts.com/editor/
• http://www.highcharts.com/
• http://www.heavytrader.it/google-chart-generator.php
• http://www.icharts.net/portal/app?page=PublicPortal&service=external&sp=0
• http://www.richchartlive.com/RichChartLive/
• http://chartgen.blogspot.com/
• http://www.chartle.net/
• http://www.maptools.org/owtchart/chartgen.phtml
• http://code.google.com/apis/charttools/index.html
• http://www.chartgo.com/
• http://www.jscharts.com/
• http://www.artviper.net/css-chart-generator/create-css-chart.php
• http://nces.ed.gov/nceskids/createagraph/
• http://www.mathcracker.com/pie_chart.php
• http://piecolor.com/
• http://almaer.com/chartmaker/

Unsorted

• Chernoff faces

• Swivel
• SeaScape and Volcano

• Map of Science
• Tree Radial Ballon Layout
• Typopath 1.0
• Radio Protector
• Research Chronology 2
• PhylloTrees: Phyllotactic Patterns for Tree Layout

• Pay for Performance? Sometimes, but Not Always
• Death and Taxes
• Smart Monkey Market Radar

• gapminder
• sizeEasy

• http://www.idealliance.org/papers/xml2001/papers/html/05-05-02.html

• SecViz: Security Visualization

• http://dub.washington.edu/projects/denim/

• http://infosthetics.com/archives/2007/06/searchcrystal_search_visualization.html (search results)

http://exsitewebware.com/extrema/index.html

http://www.visualcomplexity.com/vc/project.cfm?id=482

http://www.visualcomplexity.com/vc/project.cfm?id=481

http://infosthetics.com/archives/2007/07/baby_stroller_day_trips.html

http://lifehacker.biz/articles/tools-for-creating-charts-and-diagrams/

SOM:

• http://www.ecoresearch.net/climate/

Amusing

• Pulp Fiction in Typography
• The Essence of Rabbit

Data visualization and/or lower level software

• https://visualization.hpc.mil/wiki/Application_List (a list)
• http://www.cis.jhu.edu/~mbowers/visualizationTools.html (a list)
• MayaVi [4] [5]
• VTK [6]
• Visualization Library [7]
• pizza.py [8]

3D oriented

• Open Scene Graph [9]
• Crystal Space [10]
• OGRE [11]
• Xith3D [12]
• OpenSG [13]

• Geist [14]
• IRRLicht [15]
• cgKit [16]
• VPython [17]

http://code.google.com/p/birdeye/

See also

http://services.alphaworks.ibm.com/manyeyes/home

Collectors of ideas:

• http://www.visualcomplexity.com/vc/
• http://www.infovis-wiki.net/index.php/Main_Page
• http://services.alphaworks.ibm.com/manyeyes/home

• http://lip.sourceforge.net/

• http://infosthetics.com/archives/2007/01/periodic_table_of_visualization_methods.html Periodic table of visualizations]