An Evolutional Model for Operation-driven Visualization Design 2018/11/21

Example: categorical bar chart 多维度数据 一个类别型主维度 其他维度有着相同的单位（可以被叠加）

Example: categorical bar chart 固定3个属性 类似直方图的x类别，y数值 额外的类别维度

Example: categorical bar chart 通过data transform (template)完成 visual mapping部分和直方图没有 太大区别

Example: categorical bar chart 同样的的数据还能用于构建grouped bar chart 直觉上，简单的更换了堆叠方向

Example: categorical bar chart 另一个data transform template scenegraph结构不同

Information Visualization Pipeline 旨在构建一个完整而简洁的流程 针对结果的描述(representation) 形式上简单，实现上复杂 Task, 交互的反馈在系统之外

Design Process 柱状图堆叠(加入更多类别+排列)堆叠柱状图 完整的结果完整的结果

A Grouped Bar Chart HERE Design Process 柱状图添加类别信息(overlap) 竖着排stacked bar chart 横着排grouped bar chart A Grouped Bar Chart HERE

Limitation of declarative abstraction "mark": "point", "encoding": { "x": { "bin": {"maxbins": 10}, "field": "IMDB_Rating", "type": "quantitative“ }, "y": { "field": "Rotten_Tomatoes_Rating", "size": { "aggregate": "mean", "field": "US_Gross", "type": "quantitative" } to do so with concise primitives that facilitate systematic enumeration and exploration of design variations construction of … can be systematically varied to explore alternate points in the design space

Design Process of Existing Construction Tools Template-based tools: pre-defined templates and a few more extensions around the templates Textural programming: 1. rely on one's intuition to find the way interpreting raw data and ideas into final representation. 2. Start from existing examples Tableau’s “Show Me”: Allow users to switch between chart forms

Accessibility is incompatible with expressiveness Problems Accessibility is incompatible with expressiveness High-level charting program: template-based, low flexibility Low-level programing: rely on intuition to interpret the raw data and ideas The conception of ideas, abstractions of data and creative designs are out of user’s construction process Solution: Stepwise refinement from programming development method Consider a creative activity as “a sequence of design decisions concerning the decomposition of tasks into subtasks and of data into data structures”

Decompose tasks into subtasks Stepwise refinement Decompose tasks into subtasks Reduce difficulty to understand implicit transformations Encourage creativity Let the designers create their own abstraction of data during design process Steps: Start from simple representation Make intuitive transformations Grouped bar chart / stacked bar chart … Scatterplot first Transform: pointrect Bar chart

How to guide the process Stepwise refinement How to make it possible Make constraint to limit available refinements in a enumerable number How to guide the process Based on observation of presentation Enumerate through server predefined patterns What is a refinement From: a design, i.e. a visual representation / finished presentation To: a design, i.e. a visual representation / finished presentation

Based on observation of presentation Stepwise refinement Based on observation of presentation Make decision from enumeration of available operations Formal definition: a transformation model Different solutions opacity count arrange aggregate Set an aggregation Clusters observed Scatterplot first Binned scatterplot

Transformation model State: a certain visual representation 𝐷,( T 𝑑 ,𝑉, 𝑇 𝑣 ) 𝐷: data being transformed and presented T 𝑑 : set of data transformations 𝑉: set of visual mapping transformations 𝑇 𝑣 : the set of view transformations Raw data is represented as 𝐷,(Ø,Ø,Ø). (transformations are empty sets) Operator: variation between states(pipelines/representations) Encode Select Navigate Arrange Change Filter Decompose Aggregate

𝐷, Ø→ T 𝑑 ,Ø→𝑉,Ø→ 𝑇 𝑣 Encode E.g. (Iris flower dataset) 𝐷 : { 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 1 , 𝑠𝑒𝑝𝑎𝑙𝑊𝑖𝑑𝑡ℎ 1 ,… , 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 2 , 𝑠𝑒𝑝𝑎𝑙𝑊𝑖𝑑𝑡ℎ 2 ,… ,…} (150 tuples) T 𝑑 : Ø 𝑉: {𝑥=𝑝𝑒𝑡𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ, 𝑦=𝑝𝑒𝑡𝑎𝑙𝑊𝑖𝑑𝑡ℎ,𝑟=𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ} 𝑇 𝑣 : …

Select 𝐷→𝐷′⊆𝐷, T 𝑑 ,𝑉, 𝑇 𝑣 E.g. (Iris flower dataset) 𝐷′ : { 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 𝑖 , 𝑠𝑒𝑝𝑎𝑙𝑊𝑖𝑑𝑡ℎ 𝑖 ,… | 0<𝑝𝑒𝑡𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 𝑖 <2, 0<𝑝𝑒𝑡𝑎𝑙𝑊𝑖𝑑𝑡ℎ 𝑖 <1} (150 tuples  50 tuples) T 𝑑 : Ø 𝑉: not changed 𝑇 𝑣 : not changed

Aggregate 𝐷 ′ → { 𝐷 ′ }, T 𝑑 𝑥 → 𝑇 𝑑 𝑎𝑔𝑔𝑟𝑒 𝑥 ,𝑉 𝑥 →𝑉(𝑎𝑔𝑔𝑟𝑒(𝑥), 𝑇 𝑣 E.g. (Iris flower dataset) 𝑎𝑔𝑔𝑟𝑒: 𝑚𝑒𝑎𝑛 𝐷′′ : {(( 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 𝑖 1 , 𝑠𝑒𝑝𝑎𝑙𝑊𝑖𝑑𝑡ℎ 𝑖 1 ,…),( 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 𝑖 2 , 𝑠𝑒𝑝𝑎𝑙𝑊𝑖𝑑𝑡ℎ 𝑖 2 ,…),…)} (50 tuples merged into one tuple) T 𝑑 ′′: 𝑚𝑒𝑎𝑛 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡ℎ 𝑖 , 𝑚𝑒𝑎𝑛 𝑠𝑒𝑝𝑎𝑙𝑊𝑖𝑑𝑡ℎ 𝑖 ,… (several aggregations) 𝑉′′: 𝑥=𝑚𝑒𝑎𝑛 𝑝𝑒𝑡𝑎𝑙𝐿𝑒𝑛𝑔𝑡 ℎ 𝑖 , 𝑦=𝑚𝑒𝑎𝑛 𝑝𝑒𝑡𝑎𝑙𝑊𝑖𝑑𝑡 ℎ 𝑖 ,𝑟=𝑚𝑒𝑎𝑛 𝑠𝑒𝑝𝑎𝑙𝐿𝑒𝑛𝑔𝑡 ℎ 𝑖 (however, 𝑥 and 𝑦 can be further modified to the center of selection area) 𝑇 𝑣 : not changed

Iris flower dataset – a binned scatterplot Reuse Iris flower dataset – a binned scatterplot

Nodes means states, edges are operators applied Exploration diagram Nodes means states, edges are operators applied Explore in design space Experiment alternative designs Polish intended visual encodings

Exploration diagram: action scopes change join select (color: red) change change (point to rect) select (color: green) join change (color: red) merge change (point to rect) merge

Template-based: a template Coding (e.g. D3): Stacked Area Chart Template-based: a template Coding (e.g. D3): Calculate layout for everything (d3.layout.stack()) Bind to a toolkit specific mark (d3.svg.area()) Ours: intuitive stepwise refinement Draw area for one dimension Draw scatterplot Link all points to a line Paint area under line Reuse for all dimensions Stack them

Draw area for one dimension Stacked area chart Draw area for one dimension Draw scatterplot Link all points to a line Paint area under line

Draw area for one dimension Reuse for dimensions Stacked area chart Draw area for one dimension Reuse for dimensions Overlapped

Draw area for one dimension Reuse for dimensions (overlapped) Stacked area chart Draw area for one dimension Reuse for dimensions (overlapped) Stack them Scatterplot is reused for all dimensions too Select and then choose a vertical arrangement select arrange

Stacked area chart Two blue frames shows the variation history of two nodes Dash arrows mean automatic generation caused by corresponding operations on the other node

Thanks Visevo