Data Visualization Taxonomy

Editors: Megan Culler, Doug Schepers

Chart Primitives

These are some of the basic building blocks of chart semantics, which may be expressed as ARIA roles, properties, or states in order to make a chart interactive and data-friendly. They should be used in addition to the native capabilities of SVG: grouping related items, maintaining good document order, and appropriate use of <text>, <title>, and <desc> elements.

Each of these components may be considered as a collection of different parts of the dataset, with more information available by drilling down into each “level” through interactive exploration.

Special consideration needs to be made for animated or dynamically-updated charts (such as live stock tickers).

chart
- chart type: bar, line, area, pie, scatterplot, graph, etc.
- chart / canvas area: x, y, width, height
- headings: text, title
axis
- axis-dimension: x, y, z, polar (also for pie?)
- axis type: numeric, category, ?
- headings: text, title
- axis labels: text, title
dataset
- data point
- data value
- data type: numeric, category, ?
- data units: temporal, dimensional, financial, etc.
- label: text, title; may be composed by reference to axis or legend items
- data line / trend line
legend
- legend item (like a list item)
- legend symbol
- legend fill or pattern
graph
- connector: line, edge; may be bidirectional or directed
- connector label: title and description of connection
- node: shape, symbol, text label
- node label: title and description of node
- port: points of connection for a shape, may be typed or restricted
- hypergraph / nested graph: drill into or out of sub-graph

Chart Types

This is a loose (and incomplete) collection of chart types. Not all of these chart types are easily expressed as explorable SVGs, and not all of them are generic or common enough to warrant initial effort.

Cartesian

Definition/description: often referred to as graphs, but I use the term “Cartesian chart” to distinguish it from node edge graphs / the graphs of mathematical theory, which are networks of dots and lines.
Dot
- Definition/Description: A dot plot consists of a horizontal number line with dots representing observations, stacked above the corresponding variable value on the number line (Agresti & Franklin, 2007, p. 30). One axis is always used; a second axis is sometimes used, providing a scale to make it possible to see the number of dots in a glance rather than counting them. (I am considering this a Cartesian rather than single-axis infographic because even with the second axis is not included, it is still implied by the height of the stacked dots.)
- Interaction Modes:
- Example:
Line
- Definition/Description:
- Interaction Modes:
- Example:
- Subtypes:
  - Area
  - Definition/description: Based on the Based on the line chart. In an area chart the area between axis and line are commonly emphasized with colors, textures and hatchings
  - Interaction Modes:
  - Example: http://upload.wikimedia.org/wikipedia/commons/b/b7/Browser_Wars.svg
  - Subtypes:
    - Index
    - Control
    - Quantile-Quantile plot: Also know as a Q-Q plot (not exactly a line graph)
Bar
- Definition/description: Common to mix multiple values in a bar chart for the same category - axis might have multiple data - color or pattern usually adds additional information that is described a legend.
- Interaction Modes:
- Example:
- Subtypes:
  - Population Pyramid
    - Definition/Description:
    - Interaction Modes:
    - Example:
  - Histograms
    - Definition/Description:
    - Interaction Modes:
    - Example:
  - Gantt Charts
    - Definition/Description: Used to schedule multiple activities or projects that have a beginning and end. Each activity is represented on the y-axis by a bar along; time is represented along the x-axis, and the beginning and end of the bars wrt the x-axis represents the beginning and end times for the project.
    - Interaction Modes: Identify beginning and end times for a specific project. Identify projects whose times overlap.
    - Example:
Scatter/Point Plot
- Definition/Description: A graph in which each observation is represented with a point whose location relative to the x and y axes represents its value relative to the two variables (Agresti & Franklin, 2007, p. 526).
- Interaction Modes: The distribution of the points shows roughly whether there is a trend (whether the dots approximate a line), and whether there is a positive, negative, or no association between x and y; a viewer might also notice whether dots cluster together in part of the graph and whether there are outliers far from the other points (Agresti & Franklin, 2007, pp. 100-102, 526).
- Example:
Candlestick Charts
- Definition/Description:
- Interaction Modes:
- Example:
Violin Plots
- Definition/Description:
- Interaction Modes:
- Example:
Variations
These variations may be made on the above graphs to show additional information.
- Border Plot
  - Definition/description: Usually used to augment another Cartesian infographic, typically a scatter graph. Places a plot on the border of a graph for each data point to display the distribution of data along an axis.
  - Interaction Modes:
  - Example:
- Run Charts
  - Definition/Description: Typically a variation on a line or point/scatter infographic
  - Interaction Modes:
  - Example:

Non-Cartesian

Table
- Definition/description: Data are arranged in columns and rows, and encoded as text. The text includes words and numbers, and can be used to represent quantitative or categorical information (Few 46-48).
- Interaction Modes: Use to look up relationships between two values. Not very useful for observing trends.
- Example:
- Subtypes:
  - Quantitative to Categorical
    - Definition/Description: Each value relates to a single category or the intersection of multiple categories
    - Interaction Modes:
    - Example:
    - Subtypes:
      - Simple list: “between one set of quantitative values and one set of categorical subdivisions”
      - Univariate table: “between one set of quantitative values and one set of hierarchical categories”
      - Crosstab or pivot table: “between one set of quantitative values and the intersection of multiple categories”
  - Quantitative to Quantitative
    - Definition/Description:
    - Interaction Modes:
    - Example:
    - Subtypes:
      - Quantitative-categorical: “Among one set of quantitative values associated with multiple categorical subdivisions” (Few 47)
      - Multi-quantitative-categorical: “Among distinct sets of quantitative values associated with the same categorical subdivisions”
Single-Axis
- Definition/Description: a point on a line with limited values. Because it’s linear, usually the data can be assessed numerically or categorically (ex: 0-5, hated it-liked it). Certain things can be categorized in a linear fashion, which can be given either linear or weighted values.
- Interaction Modes:
- Example:
- Subtypes:
  - Likert
    - Definition/Description:
    - Interaction Modes:
    - Example:
  - Timelines
    - Definition/Description:
    - Interaction Modes:
    - Example:
  - Box Plots
    - Definition/Description: A graph that describes maximum values, minimum values, and quartiles of a set of data. It consists of a horizontal line whose ends represent the minimum and maximum values of the set (excluding outliers). A box is positioned along the line containing the central 50 % of the distribution, with the left and right sides of the box representing the first quartile and third quartile, respectively, and a vertical line in the box represents the median (Agresti & Franklin, 2007, p. 68).
    - Interaction Modes: Shows the range of a data set, the median, and the middle fifty percent. A quick way to see where the median and middle 50% fall in relation to the maximum and minimum values.
    - Example:
Radial
- Definition/Description: circular, used as a comparative tool
- Interaction Modes:
- Example:
Radar
- Definition/Description:
- Interaction Modes:
- Example:
Proportional Area
- Definition/Description:
- Interaction Modes:
- Example:
- Subtypes:
  - Pie
    - Definition/Description:
    - Interaction Modes:
    - Example:
  - Donut
    - Definition/Description:
    - Interaction Modes:
    - Example:
Conceptual Diagram
Definition/Description: Depict relationships – usually qualitative. Not much detail. (So some of the diagrams below might not be conceptual diagrams if they are detailed.)
Interaction Modes:
Example:
Subtypes:
Node-edge
- Definition/Description: A formal mathematically graph, also called a dot-line graph. Often sequential, can be reversible, don’t usually have an axis, but are sometimes on a vertical or horizontal axis to indicate time or a progression of stages
- Interaction Modes:
- Example:
- Subtypes:
- Flow
  - Definition/Description:
  - Interaction Modes:
  - Example:
  - Subtypes:
    - Flow Process
      - Definition/Description:
      - Interaction Modes:
      - Example:
    - Swimlane Flow
      - Definition/Description:
      - Interaction Modes:
      - Example:
- Structure
  (not clear whether this is a distinct enough type)
  - Definition/Description:
  - Interaction Modes:
  - Example:
- N2 chart
  - Definition/Description:
  - Interaction Modes:
  - Example:
- Block
  - Definition/Description:
  - Interaction Modes:
  - Example:
- Cause and Effect
  - Definition/Description:
  - Interaction Modes:
  - Example:
- Tree
  - Definition/Description:
  - Interaction Modes:
  - Example:
  - Subtypes:
    - Organization
      is this a use rather than type of tree chart?
      - Definition/Description:
      - Interaction Modes:
      - Example:
    - Pedigree
      is this a use rather than type of tree chart?
      - Definition/Description:
      - Interaction Modes:
      - Example:
Venn
- Definition/Description: Uses circles to represent sets. The overlap or non-overlap of circles represents the overlap or non-overlap of sets. Often consists of two or three circles. Typically, labels are used to identify each set. Labels my also be used to identify areas of overlap. Color or shading may be used for emphasis. Sometimes, a circle may fall completely inside another circle, indicating that the interior circle is a subset of the exterior circle. The size of a circle generally is not proportional to the size of the set. However, a larger or smaller circle might sometimes be used to indicate larger or smaller sets. A union of two sets might be depicted as two circles combined to form a new shape. Occasionally, shapes other than circles may also be used, in which case a shape might have meaning.
- Interaction Modes: Read labels of each circle to identify the two sets. Observe whether circles are overlapping; if they are, read label of the area of intersection.
- Example:

Combination

One Hundred Percent
- Definition/Description:
- Interaction Modes:
- Example:
Bubble
- Definition/Description: Combination of a point or line infographic and a proportional area infographic. Data points on a Cartesian infographic are represented by circles, characteristics of which represent a quantitative or qualitative variable. Can be useful as a way of displaying three variables (or four when shown on a three-dimensional Cartesian infographic.) Typically, diameter or area would be used to display a quantitative variable, while pattern, color, or circles of a fixed number of areas/diameters would be used to represent a categorical or ordinal variable.
- Interaction Modes: Circles that are larger, smaller, or differently colored or patterned than the rest stand out. Their distribution along the Cartesian coordinates would be perceived similarly to the distribution of dots in a scatter infographic, the trend of a line in a line infographic, etc. A legend should be provided to allow the user to understand the significance of the characteristics of a circle.
- Example: http://commons.wikimedia.org/wiki/File:Bubble_Chart_Chicago_Deposit_Market.jpg

Unusual

Nomogram / nomograph
Ternary / Trilinear
Correlogram
Pole-zero plot
Polar
Spaghetti Plot

Highly specialized

Vowel Charts/Diagrams: A vowel diagram or vowel chart is a schematic arrangement of the vowels. Depending on the particular language being discussed, it can take the form of a triangle or a quadrilateral. Vertical position on the diagram denotes the vowel closeness, with close vowels at the top of the diagram, and horizontal position denotes the vowel backness, with front vowels at the left of the diagram.^[1]
Digital Timing Diagrams