Information visualisation

From Helpful
Jump to: navigation, search
This article/section is a stub — probably a pile of half-sorted notes, is not well-checked so may have incorrect bits. (Feel free to ignore, fix, or tell me)

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)

Statistics charting: bar graphs, pies, some surfaces, etc.


Bullet graph

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


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(n2) 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
  • Squarified treemaps:
    • see e.g. [1]
    • Examples: WinDirStat and SequoiaView 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

....and some fancier variants:

  • 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:


Sunburst diagram/tree

Sunburst visualisation






Basic trees:

  • well. Many, many things out there.

Alternate views:


  • horizontal/vertical
  • unrooted trees
  • radial trees (regularly unrooted)

Radial views

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


Graph as in nodes 'n' edges

Offline drawing (some interactive):

Web-based (some interactive):

Specific/example applications:


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


Sankey diagram:


Events over time:

Proportions over time:

Some alternative views:

Geography / spatial


Spatial / psuedo-geographical:

Related libraries:

Some alternatives:

Wider analysis/visualization


General dataset apps:





And/or things that can output images:


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

  • 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))

Web services:

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

Also useful in certain cases:


Apps / report tools / app plugins

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





Data visualization and/or lower level software

3D oriented


See also

Collectors of ideas: