Introduction to Data Visualization   Tags: data, visualization  

This taxonomy is based on a data taxonomy from: Shneiderman, B. (1996). The eyes have it: A task by data type taxonomy for information visualizations. Proceedings of IEEE Symposium on Visual Languages - Boulder, CO (pp. 336-343).

The taxonomy is heavily weighted toward the more abstract information visualization techniques and is less representative of scientific visualizations, which can be highly specialized by domain and are more difficult to generalize.

(A slightly different taxonomy with examples is available at Visual Analytics Digital Library - Visualization Types)

• 1D/Linear
• 2D/Planar (incl. Geospatial)
• 3D/Volumetric
• Temporal
• nD/Multidimensional
• Tree/Hierarchical
• Network

Examples:

• lists of data items, organized by a single feature (e.g., alphabetical order)
  (not commonly visualized)

back to top

Examples (geospatial):

• choropleth

  

  Tools: GeoCommons, Google Fusion Tables, Google Maps API, Polymaps, d3/Protovis, Many Eyes, Google Charts, Tableau Public, Sci2, TileMill

  Image:
  Drzyzga, S. (2009). Prevalence of Foodstamp Use.
  CC BY-NC 2.0

• cartogram

  

  Tools: d3/Protovis (Dorling Cartogram)

  Image:
  Morrison, J. (2008). Cartogram of election results based on data from FiveThirtyEight.com..
  CC BY-NC 2.0

• dot distribution map

  

  Tools: GeoCommons, Google Fusion Tables, Google Maps API, Polymaps, Tableau Public, Sci2, TileMill

  Image:
  Chun, B. (2010). Dots in My Neighborhood.
  CC BY-SA 2.0

• proportional symbol map

  

  Tools: GeoCommons, Google Fusion Tables, Google Maps API, Polymaps, d3/Protovis, Many Eyes, Tableau Public, Sci2, TileMill

  Image:
  Hirst, T. (2008). Proportional symbol map.
  CC BY 2.0

• contour/isopleth/isarithmic map

  

  Tools: TileMill

  Image:
  Seattle Municipal Archives. (2008/1938). Green Lake depth contour map.
  CC BY 2.0

• dasymetric map

  

  Tools:

  Image:
  Cathey, H. M. (1990). USDA Hardiness Zones in North America.
  Public Domain

Examples (artificial planes):

• self-organizing map

  

  Tools: Synapse, Matlab
  
  Examples: Last.fm, In Terms of Geography

  Image created in Matlab from sample data set.

back to top

Broadly, examples of scientific visualization:

• 3D computer models
• surface and volume rendering
• computer simulations

back to top

See also:

• Wills, G. (2012). Visualizing Time. New York: Springer.

Examples:

• timeline

  

  Tools: SIMILE Timeline, TimeFlow, Timeline JS, Excel

  Image:
  Friendly, M. & Denis, D. J. (2001). Milestones in the history of thematic cartography, statistical graphics, and data visualization. Web document, http://www.datavis.ca/milestones/. Accessed: August 30, 2012.

• time series

  

  Tools: most statistical and charting software, R (A Little Book of R for Time Series), Timeplot, TimeSearcher, Google Charts, Tableau Public, Google Fusion Tables

  Image:
  Copley, Z. (2012). Annual Mean Temperature Charts.
  CC BY-SA 2.0

• connected scatter plot

  

  Tools: Protovis, JMP, Excel (order data by time, add "Line" to data series in scatter plot)

  Examples: Driving Shifts into Reverse, Driving Safety, in Fits and Starts

  Image created in Excel with data from Anscombe's quartet.

• Gantt chart

  

  Tools: Excel

  Image created in Excel with randomized data.

• stream graph/ThemeRiver

  

  Tools: original Java code, Data Wrapper, d3/Protovis, HTML5/JavaScript, Python, Excel

  Examples: The Ebb and Flow of Movies
  
  Image created by code in d3 "examples/stream/" directory.

• arc diagram

  

  (e.g., Thread Arcs, Shape of Song)

  Tools: Protovis
  
  Image created by sample Protovis code.
  

• polar area/rose/circumplex chart

  

  Tools: Protovis, Excel

  Image included in sample Excel spreadsheet.

• sankey diagram

  

  Tools: JavaScript, d3 plugin

  Image:
  LHOON. (2006). Sankey diagram of thermodynamic steam cycle.
  CC BY-SA 3.0

• alluvial diagram

  

  Tools: Alluvial Generator

  Image:
  Rosvall, M., & Bergstrom, C. T. (2010). Mapping change in large networks. PLoS ONE, 5(1), e8694.
  CC BY 2.5

back to top

Examples (category proportions, counts):

• pie chart

  

  Tools: most statistical and charting software, Many Eyes, Google Charts, Tableau Public, Google Fusion Tables

  Image created in Excel with randomized data.

• histogram

  

  Tools: most statistical and charting software, Protovis, Many Eyes

  Image:
  Pyrsmis. (2008). Black cherry tree histogram.
  CC BY-SA 3.0

• Wordle, tag cloud

  

  Tools: Wordle, Many Eyes, d3

  Image:
  Pyrsmis. (2011). Word cloud comparison of two State of the Union speeches by two U.S. presidents.
  CC BY-SA 3.0

• unordered bubble chart/bubble cloud

  

  Tools: Many Eyes, d3/Protovis

  Tutorial: Vallandingham, J. (2012). Building a bubble cloud.

  Image created by code in d3 "examples/bubble/" directory.

• bar chart, radial bar chart

  

  Tools: most statistical and charting software, Many Eyes, Google Charts, Tableau Public, High Charts, Google Fusion Tables

  Image created in Excel with data from Anscombe's quartet.

• tree map

  

  Tools: d3/Protovis, Many Eyes, Google Charts, Network Workbench/Sci2

  Image created by code in d3 "examples/treemap/" directory.

Examples (relationships between variables):

• scatter plot

  

  Tools: most statistical and charting software, Many Eyes, Google Charts, Tableau Public, Google Fusion Tables

  Image created in Excel with data from Anscombe's quartet.

• bubble chart

  

  Tools: Excel, d3, Gapminder, Google Charts, Tableau Public

  Image:
  Jung, J. (2009). Bubble Chart White.
  CC BY-NC-SA 2.0

• line chart

  

  Tools: most statistical and charting software, Many Eyes, Google Charts, Tableau Public, Google Fusion Tables

  Tips: Aisch, G. (2012). Doing the line charts right.

  Image:
  Copley, Z. (2012). Annual Mean Temperature Charts.
  CC BY-SA 2.0

• step chart

  

  Tools: most statistical and charting software, R, Excel, Protovis, Google Charts

  Image:
  Weld, W. E. (1959). How To Chart: Facts From Figures With Graphs. Norwood, MA: Codex Book Company, Inc.
  CC-BY-SA-3.0

• area chart/stacked graph

  

  Tools: most statistical and charting software, Protovis, Many Eyes, Google Charts, Google Fusion Tables

  Image:
  Grape City, Inc. (2009). Spread 5 for Windows Forms.
  CC BY-SA 2.0

• heat map

  

  Tools: Excel (conditional formatting), d3 (calendar), Protovis

  Image created in Excel with data from Anscombe's quartet.

• parallel coordinates/parallel sets

  

  Tools: d3/Protovis

  Image created by code in d3 "examples/parallel/" directory.

• radar/spider chart

  

  Tools: Excel

  Image:
  Jung, J. (2008). Radar Chart A White.
  CC BY-NC-SA 2.0

• box and whisker plot/candlestick chart

  

  Tools: most statistical and charting software, Protovis, Google Charts

  Image:
  Schutz. (2006). Boxplot representing Michelson and Morley's data on the speed of light.
  Public Domain

• mosaic display/Marimekko chart

  

  Tools: d3

  Image created by code in d3 "examples/marimekko/" directory.

• waterfall chart

  

  Tools: Excel

  Image:
  Hjohar. (2009). Example of waterfall chart.
  Public Domain

• tabular comparison of charts (e.g., pairs plots)

  Tools: R, Protovis, Many Eyes, Tableau Public

• small multiples

  Tools: manual juxtaposition of charts from statistical and charting software, Tableau Public

back to top

Examples:

• general tree visualization

  

  Tools: d3, Google Charts, Network Workbench/Sci2

  Image:
  Jung, J. (2008). 3-18 Issue Tree White.
  CC BY-NC-SA 2.0

• dendrogram

  

  Tools: Protovis

  Image created by sample Protovis code.

• radial tree

  

  Tools: d3/Protovis, Network Workbench/Sci2

  Image created by sample Protovis code.

• hyperbolic tree

  

  Tools: d3

  Image created by code in d3 "examples/cluster/" directory.

• tree map

  

  Tools: d3/Protovis, Many Eyes, Google Charts, Network Workbench/Sci2

  Image created by code in d3 "examples/treemap/" directory.

• wedge stack graph (radial hierarchy)/sunburst

  

  Tools: d3/Protovis

  Image created by code in d3 "examples/partition/" directory.

• icicle/partition chart

  

  Tools: d3/Protovis
  
  Image created by code in d3 "examples/partition/" directory.

back to top

Examples:

• matrix

  

  Tools: d3/Protovis

  Image created by sample Protovis code.

• node-link diagram (link-based layout algorithm)

  

  Tools: Pajek, Gephi, NodeXL, VOSviewer, UCINET, GUESS, Network Workbench/Sci2, sigma.js, d3/Protovis, Many Eyes, Google Fusion Tables

  Image created by sample Protovis code.

• dependency graph/circular hierarchy

  

  Tools: d3, Network Workbench/Sci2

  Image created by code in d3 "examples/bundle/" directory.

• hive plot

  

  Tools: d3

  Image created by code in d3 "examples/hive/" directory.

• alluvial diagram

  

  Tools: Alluvial Generator

  Image:
  Rosvall, M., & Bergstrom, C. T. (2010). Mapping change in large networks. PLoS ONE, 5(1), e8694.
  CC BY 2.5

• subway/tube map

  

  Tools: Subway map jQuery plugin

  Image:
  Jung, J. (2008). Yahoo YDN Metro Map White.
  CC BY-NC-SA 2.0

back to top