Tamara Munzner Department of Computer Science University of British Columbia

Ch 7/10: Tables, Color Paper: D3

CPSC 547, Information Visualization Week 4: 1 October 2019 http://www.cs.ubc.ca/~tmm/courses/547-19 News • marks out for week 2 & 3 – mostly 5 (full credit) – some 4s (comments don't show depth of understanding of material) – a few 0s (didn't hand in)

2 This Time • wrap up Decoding exercise (from last time) • 3 shorter in-class exercises – Two Numbers – Bars/Radial – Color Palettes • paper types (carryforward from last time) • paper: D3 – system context • chapters: Tables, Color – some new material, not just backup slides • pitches: expectations

3 Paper: D3 System

4 Paper: D3 • paper types –design studies –technique/algorithm –evaluation –model/taxonomy –system

[D3: Data-Driven Documents. Bostock, Ogievetsky, Heer. IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011.] 5 Toolkits • imperative: how –low-level rendering: Processing, OpenGL –parametrized visual objects: prefuse • also flare: prefuse for Flash • declarative: what –Protoviz, D3, ggplot2 –separation of specification from execution • considerations –expressiveness • can I build it? –efficiency • how long will it take? –accessibility

• do I know how? 6 WebGL/OpenGL • graphics library –pros • power and ﬂexibility, complete control for graphics • hardware acceleration • many language bindings: js, C, C++, Java (w/ JOGL) –cons • big learning curve if you don’t know already • no vis support, must roll your own everything –example app: TreeJuxtaposer (OpenGL)

[Fig 5. Munzner et al. TreeJuxtaposer: Scalable Tree Comparison using Focus+Context with Guaranteed Visibility. Proc SIGGRAPH 2003, pp 453-462.] 7 Processing / p5.js • layer on top of Java/OpenGL, Javascript/WebGL • visualization esp. for artists/designers • pros –great sandbox for rapid prototyping –huge user community, great documentation • cons –poor widget library support • example app: MizBee

[Fig 1. Meyer et al. MizBee: A Multiscale Synteny Browser. Proc. InfoVis 2009.] 8 prefuse • infovis toolkit, in Java • ﬁne-grained building blocks for tailored visualizations • pros –heavily used (previously) –very powerful abstractions –quickly implement most techniques covered so far • cons –no longer active –nontrivial learning curve • example app: DOITrees Revisited

[DOITrees Revisited: Scalable, Space-Constrained Visualization of Hierarchical Data. Heer and Card. Proc. Advanced Visual Interfaces (AVI), pp. 421–424, 2004.] 9 prefuse • separation: abstract data, visual form, view –data: tables, networks –visual form: layout, color, size, ... –view: multiple renderers

[Fig 2. Heer, Card, and Landay. Prefuse: A Toolkit for Interactive Information Visualization. Proc. CHI 2005, 421-430] 10 InfoVis Reference Model • conceptual model underneath design of prefuse and many other toolkits • heavily inﬂuenced much of infovis (including nested model) –aka infovis pipeline, data state model

[Redrawn Fig 1.23. Card, Mackinlay, and Shneiderman. Readings in Information Visualization: Using Vision To Think, Chapter 1. Morgan Kaufmann, 1999.] 11 Declarative toolkits • imperative tools/libraries –say exactly how to do it –familiar programming model • OpenGL, prefuse, ... • declarative: other possibility –just say what to do –Protovis, D3

12 Protovis • declarative infovis toolkit, in Javascript –also later Java version • marks with inherited properties • pros –runs in browser –matches mark/channel mental model –also much more: interaction, geospatial, trees,... • cons –not all kinds of operations supported • example app: NapkinVis (2009 course project)

[Fig 1, 3. Chao. NapkinVis. http://www.cs.ubc.ca/∼tmm/courses/533-09/projects.html#will] 13 Protovis Validation • wide set of old/new app examples –expressiveness, effectiveness, scalability –accessibility • analysis with cognitive dimensions of notation –closeness of mapping, hidden dependencies –role-expressiveness visibility, consistency –viscosity, diffuseness, abstraction –hard mental operations

[Cognitive dimensions of notations. Green (1989). In A. Sutcliffe and L. Macaulay (Eds.) People and Computers V. Cambridge, UK: Cambridge University Press, pp 443-460.]

14 D3 • declarative infovis toolkit, in Javascript • Protovis meets Document Object Model • pros –seamless interoperability with Web –explicit transforms of scene with dependency info –massive user community, many thirdparty apps/libraries on top of it, lots of docs • cons –even more different from traditional programming model • example apps: many

15 D3 • objectives –compatibility –debugging –performance • related work typology –document transformers –graphics libraries –infovis systems • general note: all related work sections are a mini-taxonomy/typology!

[D3: Data-Driven Documents. Bostock, Ogievetsky, Heer. IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011.] 16 D3 capabilities • query-driven selection –selection: ﬁltered set of elements queries from the current doc • also partitioning/grouping! –operators act on selections to modify content • instantaneous or via animated transitions with attribute/style interpolators • event handlers for interaction • data binding to scenegraph elements –data joins bind input data to elements –enter, update, exit subselections –sticky: available for subsequent re-selection –sort, ﬁlter

[D3: Data-Driven Documents. Bostock, Ogievetsky, Heer. IEEE Trans. Visualization & Comp. Graphics (Proc.

InfoVis), 2011.] 17 D3 Features • document transformation as atomic operation –scene changes vs representation of scenes themselves • immediate property evaluation semantics –avoid confusing consequences of delayed evaluation

• validation –performance benchmarks • page loads, frame rate –accessibility –(adoption) • everybody has voted with their feet by now!

18 Ch 7: Arrange Tables

19 VAD Ch 7: Arrange Tables How? Encode Manipulate Facet Reduce

Arrange Change Juxtapose Filter Express Separate

Order Align Select Partition Aggregate

Use Navigate Superimpose Embed

20 Map from categorical and ordered attributes Color Hue Saturation Luminance

Size, Angle, Curvature, ...

Shape What?

Motion Why? Direction, Rate, Frequency, ... How?

How? Encode Manipulate Facet Reduce

Arrange Change Juxtapose Filter Express Separate

Order Align Select Partition Aggregate

Use How? Navigate Superimpose Embed How? How? EncodeEncode ManipulEnatceode ManipulFacatete ManipulatRedue Facecet Facet ReduReducece

Map ArArangerrange ArrCangehange ChangeJuxtapose ChangeFilJuterxtaposeJuxtapose FilterFilter Express Separate fromExp caresstegorical andSepa orderatreed Express Separateattributes Color Hue Saturation Order Align OSelerderct Align LPuminanartitionce Select Aggregate Partition Aggregate

Order Align Size, Angle, CurvaStuelere, ...ct Partition Aggregate Use Use Navigate Superimpose NavigatEmbede Superimpose Embed Shape What? Use Map Map Navigate Superimpose Embed from categorical and ordered frMomotion categorical and ordered Why? Direction, Rate, Frequency, ... attributes attributes Color How? Color Hue Saturation Luminance Hue Saturation Luminance Map

fSirzome, Angl caet,ego Curvraicalture, and... ordered Size, Angle, Curvature, ... attributes

Color 21 Shape Shape What? Hue Saturation Luminance What?

Motion Why? Motion Direction, Rate, Frequency, ... Why? DirSiection,ze, R Aatengl, Frequene, Ccy,u ...rvature, ... How? How?

Shape What?

Motion Why? Direction, Rate, Frequency, ... How?

Encode tables: Arrange space How? Encode Manipulate Facet Reduce

Arrange Change Juxtapose Filter Express Separate

Order Align Select Partition Aggregate

Use Navigate Superimpose Embed

22 Map from categorical and ordered attributes Color Hue Saturation Luminance

Size, Angle, Curvature, ...

Shape What?

Motion Why? Direction, Rate, Frequency, ... How?

Arrange Tables Express Values

Separate, Order, Align Regions Separate Order Align

1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision

ArrangeArrange Tables tables Express Values Axis Orientation Rectilinear Parallel Radial Arrange Tables Arrange Tables Express Values Separate, Order, Align Regions Express Values Separate Order Align Layout Density Separate, Order, Align Regions Dense Space-Filling Separate, Order, Align Regions Separate Order Align 1 Key 2 Keys 3 Keys Many Keys Separate Order Align List Matrix Volume Recursive Subdivision

Axis1 Orientation Key 2 Keys 3 Keys Many Keys 1List Key 2Matrix Keys 3Volume Keys ManyRecursive Keys Subdivision RectilinearList Matrix ParallelVolume RecursiveRadial Subdivision

Axis Orientation Axis Orientation 23 Rectilinear Parallel Radial Rectilinear Parallel LayoutRadial Density Dense Space-Filling

Layout Density Layout Density Dense Space-Filling Dense Space-Filling Dataset Types

Keys and values Tables Networks Fields (Continuous) Geometry (Spatial) • key Attributes (columns) Grid of positions Link Items Cell ARRANGE TABLES –independent attribute (rows) Position Node –used as unique index to look up items (item) EXPRESS VALUES Cell containing value Attributes (columns) –simple tables: 1 key Value in cell –multidimensional tables: multiple keys Multidimensional Table Trees

SEPARATE, ORDER, ALIGN REGIONS• value –dependent attribute, value of cell Separate Order Align Value in cell • classify arrangements by key count –0, 1, 2, many... Arrange Tables Express Values 1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision

Separate, Order, Align Regions 24 AXIS ORIENTATION Separate Order Align Rectilinear Parallel Radial

1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision

LAYOUT DENSITY Axis Orientation Dense SpacefRectilinearlling Parallel Radial

Layout Density Dense Space-Filling Idiom: scatterplot Arrange Tables Express Values • express values –quantitative attributes • no keys, only values Separate, Order, Align Regions –data Separate Order Align • 2 quant attribs –mark: points –channels • horiz + vert position 1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision –tasks • ﬁnd trends, outliers, distribution, correlation, clusters –scalability Axis Orientation • hundreds of items Rectilinear Parallel Radial [A layered grammar of graphics. Wickham. Journ. Computational and Graphical Statistics 19:1 (2010), 3–28.] 25

Layout Density Dense Space-Filling Arrange Tables Express Values

Some keys: Categorical regions Separate, Order, Align Regions ARRANGE TABLES Separate Order Align EXPRESS VALUES

1 Key 2 Keys 3 Keys Many Keys SEPARATE, ORDER, ALIGN REGIONS • regions: contiguous bounded areas distinctList from eachMatrix other Volume Recursive Subdivision Separate Order –using spaceAlign to separate (proximity) –following expressiveness principle for categorical attributes Axis• use Orientation ordered attribute to order and align regions Rectilinear1 Key Parallel2 Keys 3 Keys RadialMany Keys List Matrix Volume Recursive Subdivision

AXIS ORIENTATION Rectilinear Parallel Layout DensityRadial Dense Space-Filling

LAYOUT DENSITY

Dense Spaceflling Idiom: bar chart 100 100 • one key, one value 75 75 50 50 –data 25 25 • 1 categ attrib, 1 quant attrib 0 0 –mark: lines –channels Animal Type Animal Type • length to express quant value • spatial regions: one per mark – separated horizontally, aligned vertically – ordered by quant attrib » by label (alphabetical), by length attrib (data-driven) –task • compare, lookup values –scalability

• dozens to hundreds of levels for key attrib 27 Separated and Aligned but not Ordered

LIMITATION: Hard to know rank. What’s the 4th most? The 7th?

[Slide courtesy of Ben Jones] Separated, Aligned and Ordered

[Slide courtesy of Ben Jones] Separated but not Ordered or Aligned

LIMITATION: Hard to make comparisons

[Slide courtesy of Ben Jones] Idiom: stacked bar chart • one more key –data • 2 categ attrib, 1 quant attrib –mark: vertical stack of line marks • glyph: composite object, internal structure from multiple marks –channels [Using Visualization to Understand the • length and color hue Behavior of Computer Systems. Bosch. Ph.D. • spatial regions: one per glyph thesis, Stanford Computer Science, 2001.] – aligned: full glyph, lowest bar component – unaligned: other bar components –task • part-to-whole relationship –scalability

• several to one dozen levels for stacked attrib 31 Idiom: streamgraph • generalized stacked graph –emphasizing horizontal continuity • vs vertical items [Stacked Graphs Geometry & Aesthetics. Byron and Wattenberg. –data IEEE Trans. Visualization and Computer Graphics (Proc. InfoVis • 1 categ key attrib (artist) 2008) 14(6): 1245–1252, (2008).] • 1 ordered key attrib (time) • 1 quant value attrib (counts) –derived data • geometry: layers, where height encodes counts • 1 quant attrib (layer ordering) –scalability • hundreds of time keys • dozens to hundreds of artist keys

– more than stacked bars, since most layers don’t extend across whole chart 32 Idiom: line20 chart / dot plot 20 • one key, 15one value 15 –data 10 10 • 2 quant5 attribs 5 –mark: points0 0 • line connection marks between them –channels Year • aligned lengths to expressYear quant value • separated and ordered by key attrib into horizontal regions –task • ﬁnd trend – connection marks emphasize ordering of items along key axis by explicitly showing relationship between one item and the next –scalability

• hundreds of key levels, hundreds of value levels 33 Choosing bar vs line charts 60 60 50 50 40 40 • depends on type of key 30 30 20 20 attrib 10 10 0 0 –bar charts if categorical Female Male Female Male

–line charts if ordered 60 60 50 50 • do not use line charts for 40 40 30 30 categorical key attribs 20 20 10 10 –violates expressiveness 0 0 10-year-olds 12-year-olds 10-year-olds 12-year-olds principle after [Bars and Lines: A Study of Graphic Communication. • implication of trend so strong Zacks and Tversky. Memory and Cognition 27:6 (1999), that it overrides semantics! 1073–1079.] – “The more male a person is, the taller he/she is”

34 Chart axes • labelled axis is critical • avoid cropping y-axis – include 0 at bottom left – or slope misleads

• dual axes controversial – acceptable if commensurate – beware, very easy to mislead!

http://www.thefunctionalart.com/2015/10/if-you-see-bullshit-say-bullshit.html 35 Idiom: connected scatterplots • scatterplot with line connection marks – popular in journalism – horiz + vert axes: value attribs – line connection marks: temporal order – alternative to dual-axis charts • horiz: time • vert: two value attribs • empirical study – engaging, but correlation unclear

[The Connected Scatterplot for Presenting Paired Time Series. Haroz, Kosara and Franconeri. IEEE TVCG 22(9):2174-86, 2016.] http://steveharoz.com/research/connected_scatterplot/ 36 Idiom: Indexed line charts • data: 2 quant attires – 1 key + 1 value • derived data: new quant value attrib – index – plot instead of original value • task: show change over time – principle: normalized, not absolute • scalability – same as standard line chart

https://public.tableau.com/proﬁle/ben.jones#!/vizhome/CAStateRevenues/Revenues 37 Idiom: Gantt charts • one key, two (related) values – data • 1 categ attrib, 2 quant attribs – mark: line • length: duration https://www.r-bloggers.com/gantt-charts-in-r-using-plotly/ – channels • horiz position: start /end times • horiz length: duration – task • emphasize temporal overlaps, start/end dependencies between items – scalability • dozens of key levels

[Performance Analysis and Visualization of Parallel Systems Using SimOS and Rivet: 38 • hundreds of value levels A Case Study. Bosch, Stolte, Stoll, Rosenblum, and Hanrahan. Proc. HPCA 2000.] ARRANGE TABLES ARRANGE TABLES EXPRESS VALUES EXPRESS VALUES Idiom: heatmap • two keys, one value SEPARATE, ORDER, ALIGN REGIONS SEPARATE,–data ORDER, ALIGN REGIONS Separate Order• 2 categ attribs (gene, experimentalAlign condition) Separate Order Align • 1 quant attrib (expression levels) –marks: area • separate and align in 2D matrix – indexed by 2 categorical attributes 1 Key 2 Keys1 Key 32 Keys Keys 3Many Keys Keys Many Keys –channels List MatrixList VolumeMatrix VolumeRecursive SubdivisionRecursive Subdivision • color by quant attrib – (ordered diverging colormap) –task AXIS ORIENTATION AXIS ORIENTATION • ﬁnd clusters, outliers Rectilinear Parallel Radial Rectilinear –scalabilityParallel Radial

• 1M items, 100s of categ levels, ~10 quant attrib levels 39

LAYOUT DENSITY LAYOUT DENSITY Dense Spaceflling Dense Spaceflling Idiom: cluster heatmap • in addition –derived data • 2 cluster hierarchies –dendrogram • parent-child relationships in tree with connection line marks • leaves aligned so interior branch heights easy to compare –heatmap • marks (re-)ordered by cluster hierarchy traversal

40 Arrange Tables Express Values

Separate, Order, Align Regions Separate Order Align

1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision

Axis Orientation Rectilinear Parallel Radial

Layout Density Dense Space-Filling

41 Idioms: scatterplot matrix, parallel coordinates • scatterplot matrix (SPLOM)Table Scatterplot Matrix Parallel Coordinates Math Physics Dance Drama Math Physics Dance Drama –rectilinear axes, point mark Math 85 95 70 65 100 90 80 60 50 90 –all possible pairs65 of 50axes90 90 Physics 80 50 40 95 80 70 –scalability 40 60 80 90 60 Dance 50 • one dozen attribs 40 • dozens to hundreds of items 30 20 Drama 10 • parallel coordinates Math Physics Dance Drama 0

–parallel axes, jagged line representing item Table Scatterplot Matrix Parallel Coordinates

–rectilinear axes, item as point Math Physics Dance Drama Math Physics Dance Drama Math • axis ordering is major challenge 85 95 70 65 100 90 80 60 50 90 65 50 90 90 –scalability Physics 80 50 40 95 80 • dozens of attribs 70 40 60 80 90 60 • hundreds of items Dance 50 after [Visualization Course Figures. McGufﬁn, 2014. http://www.michaelmcgufﬁn.com/courses/vis/] 42 40 30 20 Drama 10 Math Physics Dance Drama 0 Task: Correlation • scatterplot matrix –positive correlation • diagonal low-to-high –negative correlation • diagonal high-to-low [A layered grammar of graphics. Wickham. Journ. Computational and Graphical Statistics 19:1 –uncorrelated (2010), 3–28.] • parallel coordinates –positive correlation • parallel line segments –negative correlation • all segments cross at halfway point –uncorrelated [Hyperdimensional Data Analysis Using Parallel Coordinates. • scattered crossings Wegman. Journ. American Statistical Association 85:411 (1990), 664–675.] 43 Idioms: radial bar chart, star plot • radial bar chart –radial axes meet at central ring, line mark • star plot –radial axes, meet at central point, line mark • bar chart –rectilinear axes, aligned vertically

• accuracy –length unaligned with radial • less accurate than aligned with rectilinear

[Vismon: Facilitating Risk Assessment and Decision Making In Fisheries Management. Booshehrian, Möller, Peterman, and Munzner. Technical Report TR 2011-04, Simon Fraser University, School of Computing Science, 2011.] 44 Idioms: pie chart, polar area chart • pie chart –area marks with angle channel –accuracy: angle/area less accurate than line length • arclength also less accurate than line length • polar area chart –area marks with length channel –more direct analog to bar charts

• data –1 categ key attrib, 1 quant value attrib • task –part-to-whole judgements [A layered grammar of graphics. Wickham. Journ. Computational and Graphical Statistics 19:1 (2010), 3–28.] 45 Idioms: normalized stacked bar chart3/21/2014 bl.ocks.org/mbostock/raw/3886394/ 100%

65 Years and Over 90%

80%

• task 45 to 64 Years 70%

60%

–part-to-whole judgements 50%

25 to 44 Years 40%

30% 18 to 24 Years

20% 14 to 17 Years

10% 5 to 13 Years

Under 5 Years • normalized stacked bar chart 3/21/20%014 bl.ocks.org/mbostock/raw/3886208/ UT TX ID AZ NV GA AK MS NMNE CA OK SDCO KS WY NC AR LA IN IL MNDE HI SCMOVA IA TN KY AL WAMDNDOH WI OR NJ MT MI FL NY DC CT PA MAWV RI NHME VT n o

i 65 Years and Over t a 35M l u 45 to 64 Years p o –stacked bar chart, normalized to full vert height P 25 to 44 Years 18 to 24 Years 30M 14 to 17 Years

5 to 13 Years Under 5 Years –single stacked bar equivalent to full pie 25M • high information density: requires narrow rectangle 20M 15M

10M

5.0M

0.0 • pie chart CA TX NY FL IL PA OH MI GA3N/2C1/N2J01V4A WA AZ MA IN TN MO MD WI MN CO AL SC LA KY OR OK CT IAblM.oSckAsR.oKrgS/mUbToNstVocNkM/rWawV/N38E86ID39M4E/ NH HI RI MT DE SD AK ND VT DC WY

100% 3/21/2014 bl.ocks.org/mbostock/raw/3887235/

65 Years and Over –information density: requires large circle 90% 80%

70% ≥65 <5 45 to 64 Years

45-64 5-13 60%

14-17 50%

18-24 25 to 44 Years http://bl.ocks.org/mbostock/3887235, 40% http://bl.ocks.org/mbostock/raw/3886394/ 1/1 30% 25-44 18 to 24 Years http://bl.ocks.org/mbostock/3886208, 20% 14 to 17 Years

10% 5 46to 13 Years

http://bl.ocks.org/mbostock/3886394. Under 5 Years 0% UT TX ID AZ NV GA AK MS NMNE CA OK SDCO KS WY NC AR LA IN IL MNDE HI SCMOVA IA TN KY AL WAMDNDOH WI OR NJ MT MI FL NY DC CT PA MAWV RI NHME VT

http://bl.ocks.org/mbostock/raw/3886208/ 1/1

http://bl.ocks.org/mbostock/raw/3887235/ 1/1

http://bl.ocks.org/mbostock/raw/3886394/ 1/1 Two types of glyph – lines and stars – are especially useful for temporal displays. F igure displays 1 2 3

iconic time series shapes with line- and star- glyphs. The data underlying each glyph is measured at 6 time 3

points. The line- glyphs are time series plots. The star- glyphs are formed by considering the 6 axes radiating 3

from a common midpoint, and the data values for the row are plotted on each axis relative to the locations

Idiom: glyphmaps of the minimum and maximum of the variable. This is a polar transformation of the line- glyph. Two types of glyph – lines and stars – are especially useful for temporal displays. F igure displays 1 2 3 iconic tiArrangeme seri Tableses shapes with line- and star- glyphs. The data underlying each glyph is measured at 6 time 3 Express Values points. The•linrectilineare- glyphs are tgoodime ser ifores p lolinearts. The vssta r- glyphs are formed by considering the 6 axes radiating 3 from a commnonlinearon midpoint, trendsand the data values for the row are plotted on each axis relative to the locations Separate, Order, Align Regions of the minimSeparateum and maximuOrderm of the variaAlignble. This is a polar transformation of the line- glyph.

F igure : I con plots for 1 2 iconic time series shapes ( linear increasing, decreas3ing, shifted, single peak, single dip, combined linear and nonlinear, seasonal trends with different scales, and a combined linear and seasonal trend) in 1 Key E 2u cKeyslidean co3o Keysrdinates, Manytime Keysseries icons ( left) and polar coordinates, star plots ( right) . • radial good for cyclic patternsList Matrix Volume Recursive Subdivision

The paper is structured as follows. S ection 2 describes the algorithm used to create glyphs- maps. S ec- Axis Orientation Rectilinear Parallel Radial tion discusses their perceptual properties, including the importance of a vi3sual reference grid, and of

F igure : I con plots for 1 2 iconic time series shapes ( linecaarr[Glyph-mapseinfcurlelyas ciforno Visuallygn,sdide Exploringecreaatis3 oTemporalinng,ofs Patternshsicfatelde in., ClimateL sianrgg Datalee pd andeaa tModels.ka, asni Wickham,ndgltehed iipn,terplay of models and data are discussed in S ection 4 . combined linear and nonlinear, seasonal trends with differenHofmann,t scal Wickham,es, an danda Cook.co Environmetricsmbined l23:5ine (2012),ar a n382–393.]d seasonal trend) in E uclidean coordinates, time series icons ( left) and polar cooMrdainnaytessp, asttaior tpelmotspo( rriaglhdt)a. ta sets have irregular spatial lo 47cations, and S ection 5 discusses how glyphmaps can Layout Density be adjusted for this type of data. Three datasets are used for examples: The papeDenser is structured aSpace-Fillings follows. S ection 2 describes the algorithm used to create glyphs- maps. S ection discusses their perceptual properties, includindgattah- exipmopoTrhteanAcSeAof2 0a0 v9i3sduaatlareefxeproendcaetagr(idM, uarnredll,of2 0 1 0 ) consists of monthly observations of sev- carefully consideration of scale. L arge data and the interplay of meroadlealstmaonsdpdhaetraicavraerdiaisbcleusssferdomintSheecItniotner4n.ational S atellite C loud C limatology P roject. The

M any spatiotemporal data sets have irregular spatial locations, anddatSaesectiionncl5uddeisscoubssersvhaotiwongslyopvhe-rm7 2apms ocnanths ( 1 9 9 5 –2 0 0 0 ) on a 2 4 x 2 4 grid ( 5 7 6 locations) be adjusted for this type of data. Three datasets are used for examstrpeletcsh: ing from 1 1 3 .7 5 W to 5 6 .2 5 W longitude and 2 1 .2 5 S to 3 6 .2 5 N latitude.

G I S TE M P surface temperature data provided on 2 x 2 grid over the entire globe, measured monthly data- expo The A S A 2 0 0 9 data expo data ( M urrell, 2 0 1 0 ) consists of monthly observations of sev- ( E arth S ystem R esearch L aboratory, P hysical S ciences D ivision, N ational O ceanic and A tmo- eral atmospheric variables from the I nternational S atellite C loud C limatology P roject. The spheric A dministration, 2 0 1 1 ) . G round station data was de- seasonalized, differenced from dataset includes observations over 7 2 months ( 1 9 9 5 –2 0 0 0 ) on a 2 4 x 2 4 grid ( 5 7 6 locations) from the 1 9 5 1 - 1 9 8 0 temperature averages, and spatially averaged to obtain gridded mea- stretching from 1 1 3 .7 5 W to 5 6 .2 5 W longitude and 2 1 .2 5 S to 3 6 .2 5 N latitude. surements. F or the purposes of this paper, we extracted the locations corresponding to the G I S TE M P surface temperature data provided on 2 x 2 grid over the entire globe, measured monthly continental US A . ( E arth S ystem R esearch L aboratory, P hysical S ciences D ivision, N ational O ceanic and A tmo- US H C N ( Version 2 ) ground station network of historical temperatures ( N ational O ceanic and A t- spheric A dministration, 2 0 1 1 ) . G round station data was de- seasonalized, differenced from mospheric A dministration, N ational C limatic D ata C enter, 2 0 1 1 ) . Temperatures from 1 2 1 9 from the 1 9 5 1 - 1 9 8 0 temperature averages, and spatially averaged to obtain gridded mea- stations on the contiguous United S tates, from 1 8 7 1 to present. surements. F or the purposes of this paper, we extracted the locations corresponding to the

continental US A . 4 US H C N ( Version 2 ) ground station network of historical temperatures ( N ational O ceanic and A t-

mospheric A dministration, N ational C limatic D ata C enter, 2 0 1 1 ) . Temperatures from 1 2 1 9

stations on the contiguous United S tates, from 1 8 7 1 to present.

4 Arrange Tables Express Values

Arrange Tables Separate, Order, Align Regions Express Values Separate Order Align Arrange Tables Express Values Separate, Order, Align Regions 1 Key 2 Keys 3 Keys Many Keys Separate Order Align List Matrix Volume Recursive Subdivision

Orientation limitationsSeparate, Order, Align Regions Axis Orientation • rectilinear: scalabilitySeparate wrt #axes Order Align 1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision • 2 axes best Rectilinear Parallel Radial • 3 problematic – more in afternoon • 4+ impossible 1 Key 2 Keys 3 Keys Many Keys Axis Orientation List Matrix Volume Recursive Subdivision • parallel: unfamiliarity, training time Rectilinear Parallel Radial • radial: perceptual limits Layout Density –angles lower precision than lengths Axis Orientation Dense Space-Filling –asymmetry between angle and length • can be exploited!Rectilinear Parallel Radial [Uncovering Strengths and Weaknesses of Radial Visualizations - an Empirical Approach. Diehl, Beck and Burch. IEEE TVCGLayout (Proc. Density InfoVis) 16(6):935--942, 2010.] Dense Space-Filling 48

Layout Density Dense Space-Filling Arrange Tables Express Values

Separate, Order, Align Regions Separate Order Align

1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision

Axis Orientation Rectilinear Parallel Radial

Layout Density dense software overviews Dense Space-Filling

[Visualization of test information to assist fault localization. Jones, Harrold, Stasko. Proc. ICSE 2002, p 467-477.] 49 Ch 10: Map Color and Other Channels

50 VAD Chap 10: Map Color and Other Channels

Encode Map

Color Size, Angle, Curvature, ... Color Encoding Length Hue Saturation Luminance Angle

Color Map Area Categorical Curvature Ordered Volume Sequential Diverging

Bivariate Shape

Motion Motion Direction, Rate, Frequency, ... 51 Categorical vs ordered color

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 52 Decomposing color • ﬁrst rule of color: do not talk about color! – color is confusing if treated as monolithic

• decompose into three channels – ordered can show magnitude Luminance valuesLuminance values • luminance: how bright Saturation Saturation • saturation: how colorful – categorical can show identity Hue Hue • hue: what color

• channels have different properties – what they convey directly to perceptual system

– how much they can convey: how many discriminable bins can we use? 53 Spectral sensitivity

Wavelength (nm)

UV IR

Visible Spectrum 54 Luminance • need luminance for edge detection – ﬁne-grained detail only visible through luminance contrast – legible text requires luminance contrast!

• intrinsic perceptual ordering Luminance information Color information

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 55 Opponent color and color deﬁciency • perceptual processing before optic nerve – one achromatic luminance channel (L*) –edge detection through luminance contrast – 2 chroma channels –red-green (a*) & yellow-blue axis (b*) • “color blind”: one axis has degraded acuity – 8% of men are red/green color deﬁcient Luminance information Chroma information – blue/yellow is rare

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 56 Color spaces Corners of the RGB • CIE L*a*b*: good for computation color cube

– L* intuitive: perceptually linear luminance L from HLS – a*b* axes: perceptually linear but nonintuitive All the same • RGB: good for display hardware Luminance values – poor for encoding L* values • HSL/HSV: somewhat better for encoding – hue/saturation wheel intuitive – beware: only pseudo-perceptual! – lightness (L) or value (V) ≠ luminance or L* • Luminance, hue, saturation – good for encoding – but not standard graphics/tools colorspace

57 Designing for color deﬁciency: Check with simulator

Normal Deuteranope Protanope Tritanope vision http://rehue.net

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 58 Designing for color deﬁciency: Avoid encoding by hue alone • redundantly encode – vary luminance – change shape

Deuteranope simulation

Change the shape

Vary luminance

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 59 Color deﬁciency: Reduces color to 2 dimensions

Normal Protanope

Deuteranope Tritanope [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] !60 Designing for color deﬁciency: Blue-Orange is safe

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 61 Bezold Effect: Outlines matter • color constancy: simultaneous contrast effect

[Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 62 Color/Lightness constancy: Illumination conditions

Image courtesy of John McCann 63 Color/Lightness constancy: Illumination conditions

Image courtesy of John McCann 64 Categorical color: limited number of discriminable bins • human perception built on relative comparisons –great if color contiguous –surprisingly bad for absolute comparisons • noncontiguous small regions of color –fewer bins than you want –rule of thumb: 6-12 bins, including background and highlights

[Cinteny: ﬂexible analysis and visualization of synteny and genome rearrangements in multiple organisms. Sinha and Meller. BMC Bioinformatics, 8:82, 2007.] 65 ColorBrewer • http://www.colorbrewer2.org • saturation and area example: size affects salience!

66 Ordered color: Rainbow is poor default • problems –perceptually unordered –perceptually nonlinear • beneﬁts –ﬁne-grained structure visible and nameable [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.]

[Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 67 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] Ordered color: Rainbow is poor default • problems –perceptually unordered –perceptually nonlinear • beneﬁts –ﬁne-grained structure visible and nameable [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] • alternatives –large-scale structure: fewer hues

[Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 68 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] Ordered color: Rainbow is poor default • problems –perceptually unordered –perceptually nonlinear • benefits –fine-grained structure visible and nameable [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] • alternatives –large-scale structure: fewer hues –fine structure: multiple hues with monotonically increasing luminance [eg viridis R/python]

[Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 69 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] Viridis • colorful, perceptually uniform, colorblind-safe, monotonically increasing luminance

https://cran.r-project.org/web/packages/ viridis/vignettes/intro-to-viridis.html 70 Ordered color: Rainbow is poor default • problems –perceptually unordered –perceptually nonlinear • benefits –fine-grained structure visible and nameable [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] • alternatives –large-scale structure: fewer hues –fine structure: multiple hues with monotonically increasing luminance [eg viridis R/python] –segmented rainbows for binned or categorical

[Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 71 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] Encode Map

Color Size, Angle, Curvature, ... Color Encoding Length Hue Saturation Luminance Angle Colormaps Color Map Area Categorical Binary Categorical Categorical

Curvature Categorical Ordered Volume Sequential Diverging

Bivariate Shape Diverging Sequential

Motion Motion Direction, Rate, Frequency, ...

after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html]

72 Encode Map

Color Size, Angle, Curvature, ... Color Encoding Length Hue Saturation Luminance Angle Colormaps Color Map Area Categorical Binary Categorical Categorical

Curvature Categorical Ordered Volume Sequential Diverging

Bivariate Shape Diverging Sequential

Motion Motion Direction, Rate, Frequency, ...

after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html]

73 Encode Map

Color Size, Angle, Curvature, ... Color Encoding Length Hue Saturation Luminance Angle Colormaps Color Map Area Categorical Binary Categorical Categorical

Curvature Categorical Ordered Volume Sequential Diverging

Bivariate Shape use with care! Diverging Sequential

Motion Motion Direction, Rate, Frequency, ...

after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html]

74 Encode Map

Color Size, Angle, Curvature, ... Color Encoding Length Hue Saturation Luminance Angle Colormaps Color Map Area Categorical Binary Categorical Categorical

Curvature Categorical Ordered Volume Sequential Diverging

Bivariate Shape Diverging Sequential

• color channel interactions Motion –size heavily affects salience Motion • small regions need high saturation Direction, Rate, Frequency, ... • large need low saturation after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. –saturation & luminance: 3-4 bins max http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html] • also not separable from transparency 75 Map other channels Encode Map Color Size, Angle, Curvature, ... • size Color Encoding Length –length accurate, 2D areaHue ok, 3DSaturation volumeLuminance poor Angle • angle Color Map Area –nonlinear accuracy Categorical • horizontal, vertical, exact diagonal Curvature Ordered • shape Volume Sequential Diverging –complex combination of lower-level primitives –many bins Bivariate Shape • motion –highly separable against static Motion • binary: great for highlighting Motion Direction, Rate, –use with care to avoid irritation Frequency, ... 76 Angle

Sequential ordered Diverging ordered Cyclic ordered line mark or arrow glyph arrow glyph arrow glyph

77 Next Time • to read – VAD Ch. 8: Arrange Spatial Data – VAD Ch. 9: Arrange Networks – paper: ABySS-Explorer: visualizing genome sequence assemblies. Cydney B. Nielsen, Shaun D. Jackman, Inanc Birol, Steven J.M. Jones. TVCG 15(6):881-8, 2009 (Proc. InfoVis 2009). • [paper type: design study] – paper: Interactive Visualization of Genealogical Graphs. Michael J. McGufﬁn, Ravin Balakrishnan. Proc. InfoVis 2005, pp 17-24. • [paper type: technique] • to prepare – project pitches (3 min each)

78 Pitches • next time (Oct 8) everybody must do a 3-min project pitch – slides required by 1pm in PDF format • submit to Canvas as "Pitch Slides" Assignment – if you have already made decision about teaming up • tell me in advance so you're back to back, coordinate so more time for detail • goals – help form teams – give everybody (me, fellow students) situational awareness of your project ideas • even if not on same team, good to know who's doing similar things – both topic & methods – deadline for coming up with some concrete project idea

79 Pitch Hints • think of it like an "elevator pitch" – explain big idea – convince us that it's cool/worthwhile – give us a sense of how fleshed out it is • what you've figured out • what's TBD • practice in advance! – 3 min is both slow and fast • I encourage you to meet with me in advance to talk through your ideas – 2 of you already have, and have already achieved "project signoff" – today's office hours is a great time for that (right after class!) – or make specific appointment

80 Projects (Reminder) • groups of 2, 3, or 4 –amount of work commensurate with group size –permission for solo project granted in exceptional circumstances, by petition • stages –milestones along the way, mix of written & in-class • pitches (data/task), proposals, peer project reviews • formative feedback –final versions • final presentations • final reports • summative written feedback for both

81 Projects (Reminder) • programming –common case (I will only consider supervising students who do these) –four types • problem-driven design studies (target speciﬁc task/data) • technique-driven (explore design choice space for encoding or interaction idiom) • algorithm implementation (as described in previous paper) • interactive explainer (like distill articles) • analysis –use existing tools on dataset –detailed domain survey –particularly suitable for non-CS students • survey –very detailed domain survey

–particularly suitable for non-CS students 82 Projects: Design studies (Reminder) • BYOD (Bring Your Own Data) –you (or your teammates) have your own data to analyze • thesis/research topic • personal interest • dovetail with another course (sometimes works, but timing may be tricky) • FDOI (Find Data Of Interest) –many existing datasets, see resource page to get started • http://www.cs.ubc.ca/group/infovis/resources.shtml –can be tricky to determine reasonable task

83 More info • showcase project examples http://www.cs.ubc.ca/~tmm/courses/547-17F/projectdesc.html#examp • resources (detailed list from 2015) http://www.cs.ubc.ca/group/infovis/resources.shtml – inspiration – data repositories – data wrangling & EDA – visualization design – sharing your work

• tools directory (updated regularly) https://www.visualisingdata.com/resources/