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

1. JavaScript InfoVis Toolkit
Nicolas Garcia Belmonte - Dec. 2009

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

3. JavaScript InfoVis Toolkit
• Web Based Interactive Data
Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based

4. Modular
Grab only what you need
HyperTree
SunBurst
TreeMap
JavaScript InfoVis
ForceDirected
Toolkit
RGraph
Icicle
SpaceTree

5. Extensible
• Define custom Nodes and Edges
• Add Custom Animations (linear, Elastic, etc.)

6. Composable
Add Visualizations as Node/Edge rendering functions to
other visualizations

7. Featured Visualizations
• TreeMap
• RGraph
• HyperTree
• SpaceTree

8. TreeMap
Squarified TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing
Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben
Shneiderman, Martin Wattenberg

9. TreeMap
A
B C
D E F

10. TreeMap
A
B C
D F
E

11. TreeMap
SliceAndDice Squarified Strip
order ordered unordered ordered
aspect ratios very high lowest medium
stability stable medium medium

12. TreeMap
Examples

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

14. RGraph
• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and
Ordering
• Linear Transitions vs. EaseIn/Out Transitions

15. RGraph
Polar vs. Rectangular Interpolation

16. RGraph
Node Constraints:
Parent - Child angle

17. RGraph
Node Constraints:
Child Ordering

18. RGraph
Slow-in, slow-out Transitions

19. RGraph
Examples

20. HyperTree
A focus+context technique based on Hyperbolic Geometry for
Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli

21. HyperTree
Poincare Disk Model of
Hyperbolic Geometry
Circle Limit IV - Escher

22. HyperTree
Examples

23. SpaceTree
SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution
and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B.
Bederson

24. SpaceTree
A
B C
D E F

25. SpaceTree
Only show Context-Related Nodes

26. SpaceTree
Examples

27. What’s Next?
• SunBurst
• Force-Directed
• Icicle
• MultiTrees
• etc.

28. What’s Next?
SunBurst Visualization

29. What’s Next?
Force-Directed Layout

30. What’s Next
MultiTrees

31. Questions?
Mail: philogb@gmail.com
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb