Samuel Huron
@cybunk
Inria - IRI

Romain Vuillemot
@romsson
Inria (now at Harvard)

Jean-Daniel Fekete
@jdfaviz
Inria
1!
Data streams are everywhere!

Mail	
  

RSS	
  feed	
  

Status	
  update	
  

Logs	
  

2
Streaming data visualization challenges:

1.	
  How	
  to	
  represent	
  incoming	
  data?	
  
2.	
  How	
  to	
  manage	...
4
Metaphor: 


Physical	
   Mapping	
   Visual	
  

Data	
  Mapping	
  



from

physical 

sedimentation


Token	
  

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

6
We have
used the
metaphor
in real
world
situations

7
We have
used the
metaphor
in real
world
situations
Average	
  visit	
  duraFon	
  4:21	
  
minutes	
  
	
  
Shared	
  1800...
We apply this to classical charts:

9
And we have
generated a
lot of “crazy”
charts

10
How it’s done

1.	
  Design	
  	
  
	
  	
  	
  	
  	
  parameters	
  

2.	
  Toolkit	
  and	
  
	
  	
  	
  	
  parameter...
The design parameters

12
Free space | Boundaries | Entry points | Forces, Strata

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

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

15
Free space, Boundaries, Entry points, Forces, Strata

Decay	
  
FloccullaFon	
  

Gravity	
  
16
Free space, Boundaries, Entry points, Forces, Strata

17
Layout: Templates for classic charts

18
Visual Sedimentation design inspiration

19
How to explore
a metaphor-based design space?!
In	
  this	
  paper,	
  we..	
  	
  
Create	
  a	
  toolkit	
  	
  and	
  g...
Toolkit

Open	
  source	
  	
  
on	
  Github,	
  
GPL	
  like	
  license	
  

JavaScript	
  	
  
+	
  html	
  5	
  	
  
we...
Creating a chart

Apply	
  it	
  to	
  a	
  DOM	
  element	
  

var	
  mySedng	
  =	
  {	
  
	
  	
  
	
  
	
  
	
  width:...
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	...
Token trajectory and boundaries

Drop	
  Chart	
  

Typo	
  Chart	
  
27
Relax layout and template constraints

Bar	
  chart	
  without	
  boundaries	
  	
  

Pie	
  chart	
  without	
  boundarie...
Playing with forces: Silo Chart

29
Playing with forces: heap chart

30
Playing with forces: corner chart

31
Aggregation process
Graphical primitive

Token to pixel

Tokens trails
32
Aggregation process: token to pixel

33
Aggregation process: trails

Trails	
  are	
  generated	
  from	
  tokens	
  

Trails	
  are	
  generated	
  from	
  aggre...
Creative mistakes

35
Open questions
How to explore this design space
in a more structured way?
How to interact with aggregated
tokens?
What new...
Conclusion
Metaphor
Toolkit
Design & parameter space
Exploration
37
Our technic allow

1.	
  to	
  represent	
  incoming	
  data	
  
2.	
  to	
  manage	
  unpredictable	
  update	
  rate	
  ...
Thanks for your attention !
FEEDBACKS:	
  	
  

@cybunk	
  

MORE	
  INFOS:	
  	
  

www.visualsedimenta0on.org	
  
www.av...
Additional slides

40
Toolkit : Performance
MacBookPro,	
  
Corei7	
  2.4Ghz	
  
8GB	
  Ram,	
  	
  
Mac	
  Os	
  X	
  10.7.5,	
  	
  
Chrome	
 ...
Free space,
Boundaries,
Entrance
points,
Forces,
Strata

42
Upcoming SlideShare
Loading in …5
×

Visual sedimentation - IEEE VIS 2013 Atlanta

1,272 views
1,090 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,272
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Visual sedimentation - IEEE VIS 2013 Atlanta

  1. 1. Samuel Huron @cybunk Inria - IRI Romain Vuillemot @romsson Inria (now at Harvard) Jean-Daniel Fekete @jdfaviz Inria 1!
  2. 2. Data streams are everywhere! Mail   RSS  feed   Status  update   Logs   2
  3. 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. 4
  5. 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. 6. We have used the metaphor in real world situations 6
  7. 7. We have used the metaphor in real world situations 7
  8. 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. 9. We apply this to classical charts: 9
  10. 10. And we have generated a lot of “crazy” charts 10
  11. 11. How it’s done 1.  Design              parameters   2.  Toolkit  and          parameter  space   3.  ExploraFon  of  the            design  space   11
  12. 12. The design parameters 12
  13. 13. Free space | Boundaries | Entry points | Forces, Strata 13
  14. 14. Free space | Boundaries | Entry points | Forces | Strata 14
  15. 15. Free space | Boundaries | Entry points | Forces | Strata 15
  16. 16. Free space, Boundaries, Entry points, Forces, Strata Decay   FloccullaFon   Gravity   16
  17. 17. Free space, Boundaries, Entry points, Forces, Strata 17
  18. 18. Layout: Templates for classic charts 18
  19. 19. Visual Sedimentation design inspiration 19
  20. 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. 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. 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. 23. Toolkit parameter space ?! 23
  24. 24. Let’s play with this parameter space!! and explore the design space! 24
  25. 25. Incoming point 25
  26. 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. 27. Token trajectory and boundaries Drop  Chart   Typo  Chart   27
  28. 28. Relax layout and template constraints Bar  chart  without  boundaries     Pie  chart  without  boundaries     28
  29. 29. Playing with forces: Silo Chart 29
  30. 30. Playing with forces: heap chart 30
  31. 31. Playing with forces: corner chart 31
  32. 32. Aggregation process Graphical primitive Token to pixel Tokens trails 32
  33. 33. Aggregation process: token to pixel 33
  34. 34. Aggregation process: trails Trails  are  generated  from  tokens   Trails  are  generated  from  aggregated  area   34
  35. 35. Creative mistakes 35
  36. 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. 37. Conclusion Metaphor Toolkit Design & parameter space Exploration 37
  38. 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. 39. Thanks for your attention ! FEEDBACKS:     @cybunk   MORE  INFOS:     www.visualsedimenta0on.org   www.aviz.fr/Research/Huron   FUNDING:     HOSTING:     39
  40. 40. Additional slides 40
  41. 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. 42. Free space, Boundaries, Entrance points, Forces, Strata 42

×