[Data Visualization] Arrange Table

Other Visual Channels

• Size (magnitude)
  • Length
  • Area
  • Volume
• Angle (magnitude)
• Curvature (magnitude)
• Shape (identity)
• Motion (both)
• Texture (both)

Size Channel

• Length
  • 1-dimensional size
  • width: horizontal size
  • height: vertical size
  • Extremely accurate
• Area
  • Significantly less accurate than length
  • Width and height have some interference
• Volume
  • Inaccurate

Size Channel Example

Orientation Channel

• Orientation channels encode magnitude information based on the orientation of a mark.
• Tilt: absolute orientation
• Angle: relative orientation
• We have very accurate perceptions of angles near the exact horizontal, vertical, or diagonal positions.
• Easy to distinguish 89° from 90°, but not 37° from 38°

Orientation Channel Example

Curvature and Shape Channels

• Curvature (magnitude)
  • Not very accurate
  • # of distinguishable bins is low (2 ~ 3)

• Shape (identity)
  • In a broad sense, the shape channel refers to a complex perceptual phenomenon, including closure, curvature, termination, and intersection.
  • Dotted lines, dashed lines, …
  • Narrowly, it refers to the symbol for a point.
  • Closely related to size

Motion Channel

• Motion: direction, velocity, frequency, …
  • Oscillation frequently used
  • Less studied
  • Extremely salient
• Strength AND weakness: motion strongly draws attention
  • Impossible to ignore
  • e.g., flickering and blinking
• Usually used for highlighting
  • Notification, updates, …

Texture Channel

• Texture refers to very small scale patterns.
  • Orientation + scale + contrast
  • Used both for magnitude and identity
  • Frequently used in cartography
• For identity: 10 ~ 20 distinguishable bins
• For magnitude: 3 ~ 4 distinguishable bins
  • With all three channels together, it can scale up to a dozen.
  • Very careful design is needed!

Why Arrange?

• We will learn design choices for how to arrange tabular data spatially.
• Arrange means the use of spatial channels for visual encoding.
• Spatial position is the most effective visual channel for all attribute types: nominal, ordinal, and quantitative.
• In short, how to use the position channel?

• Key: an independent attribute that can be used as a unique index to look up items in a table
  • e.g., student id
  • Usually categorical (C) or ordinal (O)
• Value: a dependent variable
  • e.g., name
  • C, O, or quantitative (Q).
• Level: # of unique values for a categorical or ordinal attribute
  • i.e., cardinality
  • The level (or cardinality) of the grade attribute is 9 (A+ ~ F).

Quantitative Values

• Scatterplots (산점도) encode two Q variables using both the vertical and horizontal spatial position channels.
  • Input: two Q variables (two values)
  • Mark: point
  • Channels: 𝑄1 ⇒ 𝑥 and 𝑄2 ⇒ 𝑦
• Effective for
  • providing overviews
  • characterizing distributions
  • finding outliers and extreme values
  • judging correlation

Scatterplots

• Additional transformations can be used with scatterplots.
  • e.g., log transformation on the y axis
• Can be augmented with color encoding or size encoding.
  • Size encoded scatterplots are called bubble plots.

• Scalability is the major limitation of scatterplots.
  • When # of items increases, scatterplots easily become over-crowded (visual clutter).
  • The opacity of points is usually adjusted.

Categorical Keys

• If there are categorical variables to visualize, we will draw items with the same categorical values in the same region.
  • Similar to a group by operation
• List alignment (one key): bar charts, stacked bar charts, streamgraph, dot and line charts
• Matrix alignment (two keys): cluster heatmap, and scatterplot matrix
• Volumetric grid (three keys), recursive subdivision (multiple keys): not covered today

Bar Charts

• Bar charts(막대그래프) encode one Q variable and one C or O variable using both the vertical and horizontal spatial position channels.
  • Input: one key (C or O) and one value (Q)
  • Mark: line
  • Channels: 𝑘 𝑒𝑦 𝑥 and 𝑣𝑎𝑙𝑢𝑒 𝑦 ( or 𝑘𝑒𝑦 𝑦 and 𝑣𝑎𝑙𝑢𝑒 𝑥 (horizontal)

• Effective for value lookup and comparison
• Scalability
  • Enough room on the screen is required to have white space between bar line marks.
  • e.g., 1920 px => dozens to hundreds of bars

Stacked Bar Charts

• Stacked bar charts (누적그래프) encode one Q variable and two C or O variables using both the vertical and horizontal spatial position channels.
  • Input: two keys (C or O) and one value (Q)
  • Mark: line
  • Channels: 𝑘𝑒 𝑦 1 𝑥 𝑘𝑒 𝑦 2 𝑐𝑜𝑙𝑜𝑟 , and 𝑣𝑎𝑙𝑢𝑒 𝑙𝑒𝑛𝑔𝑡ℎ
• Without color or explicit outlines, 𝑘𝑒 𝑦 2 is indistinguishable.

• The heights of the lowest bar component and the full combined bar are both easy to compare.
  • i.e., position on a common scale
• Bars in the stack (except the lowest) are more difficult to compare since they are not aligned.
  • i.e., length
• Scalability
  • 𝑘𝑒𝑦 1 : similar to standard bar charts (~ dozens or 𝑘𝑒𝑦 2 : needs hue encoding (~dozen)

Streamgraph

• A streamgraph is a generalized stacked bar chart to a continuous x domain.
  • Stacked bars => stacked layers
• The shape of the layout is optimized for multiple factors.
  • e.g., the external silhouette of the shape, deviation of each layer from the baseline, and the amount of wiggle in the baseline

Dot Charts

• Dot charts encode one Q variable and one C or O variable using vertical and horizontal spatial channels.
  • Similar to bar charts, but with point marks

Line Charts

• Line charts encode one Q variable and one C or O variable using vertical and horizontal spatial channels with connection marks.

• Line charts should be used for ordered keys but not categorical keys.
  • Can give a falsely illusion about ordering (expressiveness principle)

• Be careful when interpolating lines (false maximum).

List Alignment Summary

• List alignment (one key): bar charts, stacked bar charts, streamgraph, dot and line charts
  • All the idioms in this category placed one C or O variable to an axis (e.g.,x ) and one Q variable to the other axis (e.g., y).
• What if two keys need to be visualized?
• Matrix alignment (two keys): cluster heatmap, and scatterplot matrix
  • One key to an axis (e.g.,x ) and the other key to the other axis (e.g., y)

Heatmaps

• Heatmaps encode two C or O variables and one Q variable.
  • Input: two keys (C or O) and one value (Q)
  • Mark: area
  • Channels:𝑘𝑒 𝑦 1 𝑥 𝑘𝑒 𝑦 2 𝑦 , and 𝑣𝑎𝑙𝑢𝑒 𝑐𝑜𝑙𝑜𝑟

• Small area marks in heatmaps are very compact.
  • providing overviews
  • high information density
• Theoretically, one pixel can be a mark.
  • 1,000 px * 1,000 px => 1 million data items
• However, only a small number of levels of the Q variable is distinguishable
  • 3 ~ 11 bins
  • color perception in small noncontiguous regions.

Cluster Heatmap

• Cluster heatmaps additionally visualize the similarity between rows and columns.

Hierarchical Clustering

• Hierarchical clustering (HC) builds a hierarchy between item similarities.
  • 1. Find the most similar pair from
  • 1. Remove the two items in the pair from D and add their average to D
  • 1. Repeat 1 and 2 until only one item remains in D
• How to average?
• How to measure the distance between items or clusters?

Scatterplot Matrix

• A scatterplot matrix (SPLOM) shows all possible pairwise combinations of attributes as scatterplots in a grid.
• Useful when you don’t have knowledge about which attribute to see.
  • You can see all bivariate distributions in data

• To be discernable, each scatterplot should have 100 x 100 pixels at least.
  • About one dozen attributes are supported.

• One limitation of SPLOM is that if there are n variables, we need to draw 𝑛𝐶2 scatterplots.

More Keys?

• We learned visualization idioms for one key and two keys.
• What about more than two keys?
• Volumetric grids are used for three keys.
  • Good for SciVis , but not recommend when there is no given
• Another technique is recursive subdivision for multiple keys that we will learn soon.

Spatial Axis Orientation

• So far, we have used two perpendicular axes, x and y
• But they do not have to be perpendicular!
  • They can be either parallel or radial.
• Parallel layout: parallel coordinates (PC)
• Radial layout: radial bar charts, pie charts, radar charts

Parallel Coordinates

• Parallel coordinates (PCs) are effective when visualizing many quantitative attributes at once using spatial position.
• One row as a polyline!

• Originally, PCs were designed for checking correlation between two adjacent axes.

• If there are too many items, PCs become overplotted.
• # of items: hundreds
• # of attributes (or axes): dozens

Radial Bar Charts

• Radial bar charts are similar to bar charts but use a radial layout.
  • Data types and marks are the same.
  • The only difference is the radial vs. the rectilinear orientation of the axes.

Radar Charts

• Another example of the use of radial layouts is radar charts.
• Similar to radial bar charts, but use a polyline mark instead of line marks.

• he area of a polyline usually means an overall quantity of an item.
  • e.g., overall performance of a player

Pie Charts and Polar Area Charts

• Pie charts (a) encode a single Q attribute with area marks and the angle channel.
  • Popular, but note that angle judgements on area marks are less accurate than length judgements on line marks.
• Polar area charts encode a single Q attribute but varies the length of the wedge just as a bar chart varies the length of the bar.
  • Note that the angle is evenly distributed to keys.

Pie Charts

• Pie charts are useful when you want to show the relative contribution of parts to a whole.
  • The sum of the wedge angles must add up to the 360 of a full circle.
• However, such relative contribution of parts to a whole can be also visualized through normalized stacked bar charts or stacked bar charts.

Rectilinear vs. Radial

• [Diehl et al. 10] compared radial and rectilinear layouts focusing on the abstract task of memorizing positions of objects for a few seconds.
• Rectilinear layouts were better in terms of speed and accuracy.
• But, radial layouts are more effective at showing cyclic patterns [Wickhamet al. 12].

Summary: Arrange Table

• Arrange: how to use spatial position channels
• 1 Key + 1 Value: bar charts, streamgraphs, dot charts, and line charts, stacked bar charts
• 2 Keys + 1 Value: heatmaps and cluster heatmaps
• 2 Values: scatterplot
• Multiple Values: scatterplot matrix, parallel coordinate (parallel layout), polar area charts (single item, radial layout), radar charts (single item, radial layout)
• Percentage Comparison: pie charts and normalized stacked bar charts