Download - Visual sedimentation - IEEE VIS 2013 Atlanta
![Page 1: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/1.jpg)
Romain Vuillemot @romsson Inria (now at Harvard)
Samuel Huron @cybunk Inria - IRI
Jean-Daniel Fekete @jdfaviz Inria
1!
![Page 2: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/2.jpg)
Data streams are everywhere!
Mail RSS feed Status update Logs
2
![Page 3: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/3.jpg)
Streaming data visualization challenges:
[Co4am 2012]
1. How to represent incoming data? 2. How to manage unpredictable update rate? 3. How to provide context + details over Fme?
3
4. How to design visualizaFons for lay audiences?
![Page 4: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/4.jpg)
4
![Page 5: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/5.jpg)
Metaphor: fromphysical sedimentationtovisual sedimentation!
Physical Mapping Visual
Token
Deposit of tokens
5
Data Mapping
Newest tweet
Previous tweets
Older tweets
flocculaFon
Aggregated Area
![Page 6: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/6.jpg)
We have used the metaphor in real world situations
6
![Page 7: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/7.jpg)
7
We have used the metaphor in real world situations
![Page 8: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/8.jpg)
8
We have used the metaphor in real world situations
Average visit duraFon 4:21 minutes Shared 1800 Fmes on twi4er
Doubled the number of tweets. Good feedbacks from users
![Page 9: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/9.jpg)
We apply this to classical charts:
9
![Page 10: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/10.jpg)
And we have generated a lot of “crazy” charts
10
![Page 11: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/11.jpg)
How it’s done
11
1. Design parameters
2. Toolkit and parameter space
3. ExploraFon of the design space
![Page 12: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/12.jpg)
The design parameters
12
![Page 13: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/13.jpg)
Free space | Boundaries | Entry points | Forces, Strata
13
![Page 14: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/14.jpg)
14
Free space | Boundaries | Entry points | Forces | Strata
![Page 15: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/15.jpg)
15
Free space | Boundaries | Entry points | Forces | Strata
![Page 16: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/16.jpg)
Free space, Boundaries, Entry points, Forces, Strata
16
Decay
Gravity
FloccullaFon
![Page 17: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/17.jpg)
17
Free space, Boundaries, Entry points, Forces, Strata
![Page 18: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/18.jpg)
Layout: Templates for classic charts
18
![Page 19: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/19.jpg)
Visual Sedimentation design inspiration
19
![Page 20: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/20.jpg)
How to explore a metaphor-based design space? !
Create a toolkit
Defined a parameter space
Generate a variety of different designs
and generate cases studies
Select “Best” samples
And iterate
20
In this paper, we..
![Page 21: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/21.jpg)
Toolkit
Open source on Github, GPL like license
Box2dWeb is used for the physics engine
D3.js is used for the aggregated area
JavaScript + html 5 web compliant
21
![Page 22: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/22.jpg)
Creating a chart var mySedng = { width: 300, height: 300, chart: { type:'StackedAreaChart', … }, data: { model: [ {label: 'Column A'}, … ], strata: [ [ {initValue: 100, label: 'Bar A'} ], … ], stream: {
provider: 'generator', refresh: 10000/4} }, sedimentaFon: { token: { size: { original: 6, minimum: 2 }}, aggregaFon: { type:'stacked’ }, suspension: { decay: {power: 1.01 }}, flocculaFon: {...} },
}; var myChart = $("#myDivChartContainer”).vs(mySedng); Apply it to a DOM element
22
chart data strata stream
sedimenta-on
Canvas :
![Page 23: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/23.jpg)
Toolkit parameter space
23
?!
![Page 24: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/24.jpg)
Let’s play with this parameter space!! and explore the design space!
24
![Page 25: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/25.jpg)
Incoming point
25
![Page 26: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/26.jpg)
Token visual encoding
Tokens are edits, Size of the token encode size of edit
Tokens are squares that represent quesFons SaturaFon encodes Fme 26
![Page 27: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/27.jpg)
Token trajectory and boundaries
27
Drop Chart Typo Chart
![Page 28: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/28.jpg)
Relax layout and template constraints
Bar chart without boundaries Pie chart without boundaries 28
![Page 29: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/29.jpg)
Playing with forces: Silo Chart
29
![Page 30: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/30.jpg)
Playing with forces: heap chart
30
![Page 31: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/31.jpg)
Playing with forces: corner chart
31
![Page 32: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/32.jpg)
Aggregation process
Graphical primitive
32
Token to pixel
Tokens trails
![Page 33: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/33.jpg)
Aggregation process: token to pixel
33
![Page 34: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/34.jpg)
Aggregation process: trails
Trails are generated from aggregated area Trails are generated from tokens
34
![Page 35: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/35.jpg)
Creative mistakes
35
![Page 36: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/36.jpg)
Open questions How to explore this design space in a more structured way?
36
What new designs can be generated with this approach?
How to interact with aggregated tokens?
![Page 37: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/37.jpg)
Conclusion
37
Metaphor
Design & parameter space
Toolkit
Exploration
![Page 38: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/38.jpg)
Our technic allow
[Co4am 2012]
1. to represent incoming data 2. to manage unpredictable update rate 3. to provide context + details over Fme
38
4. to design a visualizaFons appealing for lay audiences
![Page 39: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/39.jpg)
Thanks for your attention !
www.visualsedimenta0on.org
39
HOSTING:
MORE INFOS:
www.aviz.fr/Research/Huron
FEEDBACKS: @cybunk
FUNDING:
![Page 40: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/40.jpg)
Additional slides
40
![Page 41: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/41.jpg)
Toolkit : Performance • MacBookPro, • Corei7 2.4Ghz • 8GB Ram, • Mac Os X 10.7.5, • Chrome Version
27.0.1 • Default chart of the
library (a 300 × 300 pixel canvas with a 3-‐bin bar chart).
41
![Page 42: Visual sedimentation - IEEE VIS 2013 Atlanta](https://reader034.vdocuments.site/reader034/viewer/2022042623/545764fbaf7959234b8b504c/html5/thumbnails/42.jpg)
42
Free space, Boundaries, Entrance points, Forces, Strata