Presentation of visual sedimentation at IEEE VIS 2013 October 16 08:30 am - 10:10 am at Atlanta. More infos on http://aviz.fr/Research/Huron

1. Samuel Huron
@cybunk
Inria - IRI
Romain Vuillemot
@romsson
Inria (now at Harvard)
Jean-Daniel Fekete
@jdfaviz
Inria
1!

2. Data streams are everywhere!
Mail
RSS
feed
Status
update
Logs
2

3. Streaming data visualization challenges:
1.
How
to
represent
incoming
data?
2.
How
to
manage
unpredictable
update
rate?
3.
How
to
provide
context
+
details
over
Fme?
4.
How
to
design
visualizaFons
for
lay
audiences?
3

4. 4

5. Metaphor:
Physical
Mapping
Visual
Data
Mapping
from
physical
sedimentation
Token
Newest
tweet
to
visual
sedimentation
!
Deposit
of
tokens
flocculaFon
Aggregated
Area
Previous
tweets
Older
tweets
5

6. We have
used the
metaphor
in real
world
situations
6

7. We have
used the
metaphor
in real
world
situations
7

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
8

9. We apply this to classical charts:
9

10. And we have
generated a
lot of “crazy”
charts
10

11. How it’s done
1.
Design
parameters
2.
Toolkit
and
parameter
space
3.
ExploraFon
of
the
design
space
11

12. The design parameters
12

13. Free space | Boundaries | Entry points | Forces, Strata
13

14. Free space | Boundaries | Entry points | Forces | Strata
14

15. Free space | Boundaries | Entry points | Forces | Strata
15

16. Free space, Boundaries, Entry points, Forces, Strata
Decay
FloccullaFon
Gravity
16

17. Free space, Boundaries, Entry points, Forces, Strata
17

18. Layout: Templates for classic charts
18

19. Visual Sedimentation design inspiration
19

20. How to explore
a metaphor-based design space?!
In
this
paper,
we..
Create
a
toolkit
and
generate
cases
studies
Defined
a
parameter
space
Generate
a
variety
of
different
designs
Select
“Best”
samples
And
iterate
20

21. Toolkit
Open
source
on
Github,
GPL
like
license
JavaScript
+
html
5
web
compliant
Box2dWeb
is
used
for
the
physics
engine
D3.js
is
used
for
the
aggregated
area
21

22. Creating a chart
Apply
it
to
a
DOM
element
var
mySedng
=
{
width:
300,
height:
300,
Canvas
:
chart
{
type:'StackedAreaChart',
…
},
chart:
data
{
model:
[
{label:
'Column
A'},
…
],
data:
strata
[
[
{initValue:
100,
label:
'Bar
A'}
],
…
],
strata:
stream
{
stream:
provider:
'generator',
refresh:
10000/4}
},
sedimenta-on
{
sedimentaFon:
token:
{
size:
{
original:
6,
minimum:
2
}},
aggregaFon:
{
type:'stacked’
},
suspension:
{
decay:
{power:
1.01
}},
flocculaFon:
{...}
},
};
var
myChart
=
$("#myDivChartContainer”).vs(mySedng);
22

23. Toolkit parameter space
?!
23

24. Let’s play with this parameter space!!
and explore the design space!
24

25. Incoming point
25

26. Token visual encoding
Tokens
are
edits,
Size
of
the
token
encode
size
of
edit
Tokens
are
squares
that
represent
quesFons
SaturaFon
encodes
Fme
26

27. Token trajectory and boundaries
Drop
Chart
Typo
Chart
27

28. Relax layout and template constraints
Bar
chart
without
boundaries
Pie
chart
without
boundaries
28

29. Playing with forces: Silo Chart
29

30. Playing with forces: heap chart
30

31. Playing with forces: corner chart
31

32. Aggregation process
Graphical primitive
Token to pixel
Tokens trails
32

33. Aggregation process: token to pixel
33

34. Aggregation process: trails
Trails
are
generated
from
tokens
Trails
are
generated
from
aggregated
area
34

35. Creative mistakes
35

36. Open questions
How to explore this design space
in a more structured way?
How to interact with aggregated
tokens?
What new designs can be
generated with this approach?
36

37. Conclusion
Metaphor
Toolkit
Design & parameter space
Exploration
37

38. Our technic allow
1.
to
represent
incoming
data
2.
to
manage
unpredictable
update
rate
3.
to
provide
context
+
details
over
Fme
4.
to
design
a
visualizaFons
appealing
for
lay
audiences
38

39. Thanks for your attention !
FEEDBACKS:
@cybunk
MORE
INFOS:
www.visualsedimenta0on.org
www.aviz.fr/Research/Huron
FUNDING:
HOSTING:
39

40. Additional slides
40

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

42. Free space,
Boundaries,
Entrance
points,
Forces,
Strata
42