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

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

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

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

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

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

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

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

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

10. 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

11. 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

12. 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”

13. 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

14. 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

15. 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

16. 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

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

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

19. 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

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

21. 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

22. 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

23. 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

24. 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

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

26. 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

27. 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

28. Thanks
Visevo