Romain Vuillemot @romsson Inria (now at Harvard)

Samuel Huron @cybunk Inria - IRI

Jean-Daniel Fekete @jdfaviz Inria

1!

Data streams are everywhere!

Mail   RSS  feed   Status  update   Logs  

2

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?  

4

Metaphor: fromphysical sedimentationtovisual sedimentation!

Physical   Mapping   Visual  

Token  

Deposit  of  tokens  

5

Data  Mapping  

Newest  tweet  

Previous  tweets  

Older    tweets  

flocculaFon  

Aggregated  Area  

We have used the metaphor in real world situations

6

7

We have used the metaphor in real world situations

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  

We apply this to classical charts:

9

And we have generated a lot of “crazy” charts

10

How it’s done

11

1.  Design              parameters  

2.  Toolkit  and          parameter  space  

3.  ExploraFon  of  the            design  space  

The design parameters

12

Free space | Boundaries | Entry points | Forces, Strata

13

14

Free space | Boundaries | Entry points | Forces | Strata

15

Free space | Boundaries | Entry points | Forces | Strata

Free space, Boundaries, Entry points, Forces, Strata

16

Decay  

Gravity  

FloccullaFon  

17

Free space, Boundaries, Entry points, Forces, Strata

Layout: Templates for classic charts

18

Visual Sedimentation design inspiration

19

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

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

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  :  

Toolkit parameter space

23

?!

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

24

Incoming point

25

Token visual encoding

Tokens  are  edits,  Size  of  the  token  encode  size  of  edit  

Tokens  are  squares    that  represent  quesFons  SaturaFon  encodes  Fme     26

Token trajectory and boundaries

27

Drop  Chart   Typo  Chart  

Relax layout and template constraints

Bar  chart  without  boundaries     Pie  chart  without  boundaries    28

Playing with forces: Silo Chart

29

Playing with forces: heap chart

30

Playing with forces: corner chart

31

Aggregation process

Graphical primitive

32

Token to pixel

Tokens trails

Aggregation process: token to pixel

33

Aggregation process: trails

Trails  are  generated  from  aggregated  area  Trails  are  generated  from  tokens  

34

Creative mistakes

35

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?

Conclusion

37

Metaphor

Design & parameter space

Toolkit

Exploration

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  

Thanks for your attention !

www.visualsedimenta0on.org  

39

HOSTING:    

MORE  INFOS:    

www.aviz.fr/Research/Huron  

FEEDBACKS:     @cybunk  

FUNDING:    

Additional slides

40

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