JavaScript InfoVis Toolkit



     Nicolas Garcia Belmonte - Dec. 2009
Agenda

• JavaScript InfoVis Toolkit Overview
• Featured Visualizations
• What’s Next for the JIT
JavaScript InfoVis Toolkit

• Web Based Interactive Data
  Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensi...
Modular
            Grab only what you need


HyperTree
                                       SunBurst
TreeMap
          ...
Extensible
•   Define custom Nodes and Edges

•   Add Custom Animations (linear, Elastic, etc.)
Composable
Add Visualizations as Node/Edge rendering functions to
                  other visualizations
Featured Visualizations

       • TreeMap
       • RGraph
       • HyperTree
       • SpaceTree
TreeMap




Squarified TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing

 Ordered and Quantum TreeMaps - Benjamin B. ...
TreeMap
            A


    B           C


D       E       F
TreeMap
A
B           C
  D          F



 E
TreeMap
              SliceAndDice     Squarified     Strip




   order          ordered       unordered   ordered
aspect ...
TreeMap


 Examples
RGraph




Animated Exploration of Dynamic Graphs with Radial Layout -
  Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti...
RGraph

• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and
  Ordering
• Linear Transitions vs. Ease...
RGraph
Polar vs. Rectangular Interpolation
RGraph
 Node Constraints:
Parent - Child angle
RGraph
Node Constraints:
 Child Ordering
RGraph
Slow-in, slow-out Transitions
RGraph


 Examples
HyperTree




   A focus+context technique based on Hyperbolic Geometry for
Visualizing large Hierarchies - John Lamping, ...
HyperTree
Poincare Disk Model of
 Hyperbolic Geometry




    Circle Limit IV - Escher
HyperTree


  Examples
SpaceTree




SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution
  and Empirical Evaluation - Cat...
SpaceTree
             A


     B           C


 D       E       F
SpaceTree
Only show Context-Related Nodes
SpaceTree


  Examples
What’s Next?
  • SunBurst
  • Force-Directed
  • Icicle
  • MultiTrees
  • etc.
What’s Next?
 SunBurst Visualization
What’s Next?
 Force-Directed Layout
What’s Next
   MultiTrees
Questions?



Mail:           philogb@gmail.com
Project Page:   http://thejit.org
Blog:           http://blog.thejit.org
G...
Upcoming SlideShare
Loading in...5
×

JavaScript InfoVis Toolkit Overview

7,344

Published on

An overview of the JavaScript InfoVis Toolkit and some of the theory behind the implemented visualizations.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,344
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
73
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×