Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

JavaScript InfoVis Toolkit Overview

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 31 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie JavaScript InfoVis Toolkit Overview (20)

Weitere von philogb (19)

Anzeige

Aktuellste (20)

JavaScript InfoVis Toolkit Overview

  1. 1. JavaScript InfoVis Toolkit Nicolas Garcia Belmonte - Dec. 2009
  2. 2. Agenda • JavaScript InfoVis Toolkit Overview • Featured Visualizations • What’s Next for the JIT
  3. 3. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based
  4. 4. Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree
  5. 5. Extensible • Define custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)
  6. 6. Composable Add Visualizations as Node/Edge rendering functions to other visualizations
  7. 7. Featured Visualizations • TreeMap • RGraph • HyperTree • SpaceTree
  8. 8. TreeMap Squarified TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg
  9. 9. TreeMap A B C D E F
  10. 10. TreeMap A B C D F E
  11. 11. TreeMap SliceAndDice Squarified Strip order ordered unordered ordered aspect ratios very high lowest medium stability stable medium medium
  12. 12. TreeMap Examples
  13. 13. RGraph Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  14. 14. RGraph • Polar vs. Rectangular Interpolation • Node Constraints: Orientation and Ordering • Linear Transitions vs. EaseIn/Out Transitions
  15. 15. RGraph Polar vs. Rectangular Interpolation
  16. 16. RGraph Node Constraints: Parent - Child angle
  17. 17. RGraph Node Constraints: Child Ordering
  18. 18. RGraph Slow-in, slow-out Transitions
  19. 19. RGraph Examples
  20. 20. HyperTree A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli
  21. 21. HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher
  22. 22. HyperTree Examples
  23. 23. SpaceTree SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson
  24. 24. SpaceTree A B C D E F
  25. 25. SpaceTree Only show Context-Related Nodes
  26. 26. SpaceTree Examples
  27. 27. What’s Next? • SunBurst • Force-Directed • Icicle • MultiTrees • etc.
  28. 28. What’s Next? SunBurst Visualization
  29. 29. What’s Next? Force-Directed Layout
  30. 30. What’s Next MultiTrees
  31. 31. Questions? Mail: philogb@gmail.com Project Page: http://thejit.org Blog: http://blog.thejit.org GitHub: http://github.com/philogb

×