JavaScript InfoVis Toolkit Nicolas Garcia Belmonte - Dec. 2009
JavaScript InfoVis Toolkit Overview
Sep 11, 2014
An overview of the JavaScript InfoVis Toolkit and some of the theory behind the implemented visualizations.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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, Extensible, Composable
• Web Standards Based
ModularGrab only what you need
HyperTree
TreeMap
RGraph
SpaceTree
JavaScript InfoVis Toolkit
SunBurst
ForceDirected
Icicle
Extensible• Define custom Nodes and Edges
• Add Custom Animations (linear, Elastic, etc.)
ComposableAdd 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. Bederson, Ben Shneiderman, Martin Wattenberg
TreeMap
A
B C
D E F
TreeMapAB CD
E
F
TreeMapSliceAndDice Squarified Strip
order ordered unordered ordered
aspect ratios very high lowest medium
stability stable medium medium
TreeMap
Examples
RGraph
Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
RGraph
• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and Ordering
• Linear Transitions vs. EaseIn/Out Transitions
RGraphPolar vs. Rectangular Interpolation
RGraphNode Constraints: Parent - Child angle
RGraphNode Constraints:
Child Ordering
RGraphSlow-in, slow-out Transitions
RGraph
Examples
HyperTree
A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli
HyperTreePoincare Disk Model ofHyperbolic Geometry
Circle Limit IV - Escher
HyperTree
Examples
SpaceTree
SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B.
Bederson
SpaceTree
A
B C
D E F
SpaceTreeOnly 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 NextMultiTrees
Questions?
Mail: [email protected]
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb
Related Documents
