1 of 34

Structuring Visualization Mock-ups at the Graphical Level by Dividing the Display Space

Romain Vuillemot�Jeremy Boy

​

Université de Lyon

United Nations Global Pulse

​

2 of 34

Previously on VIS 2016

3 of 34

Previously on VIS 2016

4 of 34

Motivation

R&D Team

Economists

& Researchers

5 of 34

Motivation

  • Mission
    • Build data visualizations
    • Report progress and collect early feedback
    • Iterate with users and other stakeholders

R&D Team

Economists

& Researchers

6 of 34

Motivation

  • But
    • Limited time
    • Limited technical resources
    • Data may not be available

​

R&D Team

Economists

& Researchers

“Temporal treemap”

“Double treemap”

EXPORTS

IMPORTS

EXPORTS

IMPORTS

TIME→

7 of 34

How to facilitate the creation of visualizations?

8 of 34

Mock-ups

  • Conversation medium with stakeholder
  • Focus on main design decisions

9 of 34

A Graphic Design Perspective

10 of 34

Data and Display

Raw data

Processed data

Abstract visual form

Visual presentation

Visual mapping

Data transformations

View transformation

Physical presentation

Rendering

Data-to-display

11 of 34

Data and Display

Raw data

Processed data

Abstract visual form

Visual presentation

Visual mapping

Data transformations

View transformation

Physical presentation

Rendering

Realistic data generation

​

Space subdivision �using modules

Placeholders for content (e.g. marks)

MOCK-UP

Display-to-data

Data-to-display

12 of 34

Graphics design

  • Designer cannot always wait �for final content (like data)

​

  • Favor parti pris instead �of data insights

​

  • Use mature tools �(e.g. Adobe Illustrator)

​

​

13 of 34

Grids and modularity

  • Grids result from vertical and horizontal segmentations �

​

  • Grids allow to place placeholders for content
  • Grids also allow to place modules that can nest other modules or placeholders

14 of 34

15 of 34

Module

16 of 34

Koridor Ekonomi Sumatera

Total

  • Elements are proportional to the page
  • Based on realistic values

17 of 34

Grids and modularity

  • But remains handcrafted
    • difficult to test variations
    • difficult to include data (when available)

18 of 34

A Parametric Toolkit Perspective

19 of 34

Parametric toolkit

Partitioning

Nesting

https://github.com/romsson/d3-gridding

20 of 34

Parametric toolkit

⨝

[▼ Object ]� years: [2005, 2006, 2007, 2008]� flow: [“import”, “export”]� categories: Math.ceil(5 * Math.random())� products: Math.ceil(10 * Math.random())� ...

​

https://github.com/romsson/d3-gridding

Grid

Nesting

Orientation

Padding

Offset

21 of 34

Parametric toolkit

https://github.com/romsson/d3-gridding

22 of 34

Parametric toolkit: examples

⨝

⨝

⨝

23 of 34

Parametric toolkit: examples

Demo!

⨝

⨝

⨝

⨝

⨝

24 of 34

Parametric toolkit: page layouts

Module

25 of 34

Application: ScatterDice (Elmqvist, InfoVis’08)

26 of 34

Application: UpSet (Lex, InfoVis’14)

27 of 34

Application: benchmarking ScatterDice & UpSet

  • Different layout
  • More dimensions
  • Less dimensions
  • Data distribution
  • More compact
  • Etc.

28 of 34

Wrap up

  • We identified graphic design grids and modules principles for mock-ups in the graphical space

​

  • We built a parametric toolkit that implements�those grids and modules, and nesting process

​

    • Rapid prototyping of many examples
    • Parameters allow quick variations
    • Only requires realistic data

​

    • Generative

29 of 34

Future work

  • Move from parameters configuration to a GUI�
  • Investigate how to transition towards higher fidelity prototypes with final datasets

​

  • Data benchmark to systematically stress-test visualizations at early design stages

30 of 34

Thank you!

https://github.com/romsson/d3-gridding

31 of 34

32 of 34

Sketching Design Process Visual Tools

[Ullman, 1990]

[Walny, 2015]

33 of 34

Sketching Design Process Visual Tools

[Card, 2009] & [Jansen, 2013]

[Roberts, 2009]

34 of 34

Sketching Design Process Visual Tools

Tableau [Stolte, 2002]

Lyra [Satyanarayan, 2014]

iVisDesigner [Ren, 2014]