Post on 11-Sep-2014
description
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: philogb@gmail.com
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb