Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual sedimentation - IEEE VIS 2013 Atlanta

1,585 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
  • Be the first to comment

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

×