1 of 33

Interactive Data Visualization

Case and Design Studies

http://romain.vuillemot.net/

@romsson

2 of 33

Case studies

3 of 33

CASE STUDY: TRADE DATA

​

4 of 33

REAL-WORLD DATAVIZ BUILDING

R&D Team

* Front-end�* Back-end�* Designer�* Product Manager�* DataViz Researcher

Experts

* Director�* Researchers (+10)�* Students�* Journalists

Users

* +10K hits / days�* Book�* Press (FT, NyTimes, ..)�* Twitter�* Other social networks

http://atlas.cid.harvard.edu/

5 of 33

DATAVIZ “UNIVERSE” http://atlas.cid.harvard.edu/

​

WEBSITE�* Widgets�* Select year �* Select country�* Filter by category�* Aggregate�* Full text search�* Data and images export�* Tooltips�* Multi-browser�* Open Source https://github.com/cid-harvard/

​

​

​

​

​

6 of 33

SPINOFF http://datlascolombia.com/

​

7 of 33

Real-Time Data

​

8 of 33

Real-Time Data

​

“Visual Sedimentation”. Samuel Huron, Romain Vuillemot, Jean-Daniel Fekete. InfoVis '13 (http://www.visualsedimentation.org/)

​

9 of 33

Real-Time Data

​

“Visual Sedimentation”. Samuel Huron, Romain Vuillemot, Jean-Daniel Fekete. InfoVis '13 (http://www.visualsedimentation.org/)

​

logs

tweets

10 of 33

Complex Spatio-Temporal Data

​

11 of 33

Complex Spatio-Temporal Data

​

12 of 33

Complex Spatio-Temporal Data

​

​

Charles Perin, Romain Vuillemot, Jean Daniel Fekete. “SoccerStories: A Kick-off for Soccer Visual Analysis.” InfoVis 2013. (http://charlesperin.net/demo/soccerstories/)

13 of 33

Complex Spatio-Temporal Data

​

​

Charles Perin, Romain Vuillemot, Jean Daniel Fekete. “SoccerStories: A Kick-off for Soccer Visual Analysis.” InfoVis 2013. (http://charlesperin.net/demo/soccerstories/)

14 of 33

CASE STUDY: INTERACTIVE SCATTERPLOT MATRIX

​

​

​

​

​

​

​

​

​

​

​

​

​

​

http://romain.vuillemot.net/data/tableau-annexe-atlas-ze.xls

​

15 of 33

CASE STUDY: INTERACTIVE SCATTERPLOT MATRIX

​

​

​

​

​

​

​

​

​

​

http://labs.data-publica.com/emploi/

​

16 of 33

Données ensemblistes

+12 ensembles?�quantification des intersections ?

3 ensembles

5 ensembles

17 of 33

“UpSet: Visualization of Intersecting Sets”.

Alexander Lex, Nils Gehlenborg, Hendrik Strobelt, Romain Vuillemot, Hanspeter Pfister. InfoVis '14.

18 of 33

“UpSet: Visualization of Intersecting Sets”.

Alexander Lex, Nils Gehlenborg, Hendrik Strobelt, Romain Vuillemot, Hanspeter Pfister. InfoVis '14.

Visualisation des 2k intersections

Support de 26 tâches d’exploration d’ensembles

19 of 33

Bangladesh

Cambodge

...

  • 8 ensembles ont été sélectionnés (produits textiles)
  • La plus grande intersection est celle qui est commune

​

​

20 of 33

CASE STUDY: LAYOUTS

​

​

​

​

​

​

​

​

​

21 of 33

PAGE DIVISIONS: EXAMPLES

* A - MAIN VIEW�* B - OVERVIEW�* C - SELECTIONS��+ titles, legends and descriptions

​

B

C

C

C

A

22 of 33

PAGE DIVISIONS: EXAMPLES

* A - OVERVIEW (DIMENSIONS)�* B - OVERVIEW (INTERSECTIONS)�* C - DETAILS (QUANTIFICATION)�* D - PARAMETERS / OPTIONS�* E - DETAILS (ITEMS, ..)�+ titles, legends and descriptions

​

A

C

C

C

C

C

C

...

B

B

B

B

B

B

...

...

...

E

D

23 of 33

​

​

​

​

​

​

https://www.drupal.org/node/2370645

24 of 33

​

​

​

​

​

​

http://t3kit.com/examples/page-laoyouts/

25 of 33

PAGE LAYOUTS PROCESS

* Start with the page format → A4, Web screen, responsive

* Ratio / proportions → 4/3, 16/9, ..

* Visualization perimeter → full page, embed, overflow (scrolling)

* Number of views → coordinated, combination with text/videos

* Page interactivity → links to other page, scrolly-telling

*** -> STICK TO IT

26 of 33

User studies

27 of 33

Données temporelles: À Table! (CHI13)

  • Analyse de 51 visualisations
  • Identification de 31 tâches
  • Comparaison avec les besoins d’experts

​

​

27

“À Table! Improving Temporal Navigation in Soccer Ranking Tables”.

Charles Perin, Romain Vuillemot, Jean-Daniel Fekete. CHI 2014.

besoins

existant

28 of 33

Données temporelles: À Table! (CHI13)

​

28

“À Table! Improving Temporal Navigation in Soccer Ranking Tables”.

Charles Perin, Romain Vuillemot, Jean-Daniel Fekete. CHI 2014. https://github.com/INRIA/atable

​

29 of 33

Données temporelles: Manipulation Directe (CHI15)

29

”Investigating the Direct Manipulation of Ranking Tables”.

Romain Vuillemot, Charles Perin. CHI Note’15. http://romain.vuillemot.net/publications/chi15-direct-manipulation-ranking-tables/

​

30 of 33

Données temporelles: Manipulation Directe (CHI15)

30

”Investigating the Direct Manipulation of Ranking Tables”.

Romain Vuillemot, Charles Perin. CHI Note’15. http://romain.vuillemot.net/publications/chi15-direct-manipulation-ranking-tables/

​

31 of 33

Design studies

�Munzner, Tamara. "A nested model for visualization design and validation." IEEE transactions on visualization and computer graphics 15.6 (2009): 921-928.

Summary https://www.cs.ubc.ca/~tmm/talks/iv09/nestedmodel.pdf

​

31

32 of 33

Empirical study

​

35 data analysts, 25 organizations, 15 sectors

​

​

��������

Kandel, Sean, et al. "Enterprise data analysis and visualization: An interview study." IEEE Transactions on Visualization and Computer Graphics 18.12 (2012): 2917-2926. (pdf)

33 of 33

Empirical study

Joe Hellerstein “Data wrangling” BERKELEY & Trifacta (pdf)