Skip to Main Content

Data Visualization


Email this link:

Computational Research & GIS Librarian

Profile Photo
Danielle Kane
Contact:
Computational Research Librarian Geographic Information Systems (GIS)
Office: Science Library 226
Phone: 949-824-2024
EMail: kaned@uci.edu

Udemy Online Learning

UCI Udemy is free to all UCI employees and students to support their professional growth and development. More than 5,500 curated online training courses are available on Udemy’s learning platform. 

Udemy’s course options are all designed to provide learners with relevant instruction to help further both professional and personal development goals.

Common Static Visualization Types

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.

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

1D/Linear

Examples:

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

back to top

2D/Planar (especially geospatial)

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 Food stamp 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, Places and Spaces

    Image created in Matlab from sample data set.

back to top

Temporal

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.

 

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

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

nD/Multidimensional

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
  

 

Word Cloud, tag cloud

    Tools: Word Cloud, 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

Tree/Hierarchical

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

dendogram

    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

Network

Examples:

matrix

    Tools: d3/Protovis

    Image created by sample Protovis code.

 

 

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

citation

Many thanks to Angela Zoss at the Duke University Libraries for allowing us to build off of and customize her Introduction to Data Visualization Research Guide.