Your SlideShare is downloading. ×
JavaScript InfoVis Toolkit Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JavaScript InfoVis Toolkit Overview

7,173
views

Published on

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

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,173
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
71
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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