JavaScript InfoVis Toolkit Overview
-
date post
11-Sep-2014 -
Category
Technology
-
view
9.484 -
download
1
description
Transcript of JavaScript InfoVis Toolkit Overview
![Page 1: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/1.jpg)
JavaScript InfoVis Toolkit
Nicolas Garcia Belmonte - Dec. 2009
![Page 2: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/2.jpg)
Agenda
• JavaScript InfoVis Toolkit Overview
• Featured Visualizations
• What’s Next for the JIT
![Page 3: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/3.jpg)
JavaScript InfoVis Toolkit
• Web Based Interactive Data Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based
![Page 4: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/4.jpg)
ModularGrab only what you need
HyperTree
TreeMap
RGraph
SpaceTree
JavaScript InfoVis Toolkit
SunBurst
ForceDirected
Icicle
![Page 5: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/5.jpg)
Extensible• Define custom Nodes and Edges
• Add Custom Animations (linear, Elastic, etc.)
![Page 6: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/6.jpg)
ComposableAdd Visualizations as Node/Edge rendering functions to
other visualizations
![Page 7: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/7.jpg)
Featured Visualizations
• TreeMap
• RGraph
• HyperTree
• SpaceTree
![Page 8: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/8.jpg)
TreeMap
Squarified TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing
Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg
![Page 9: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/9.jpg)
TreeMap
A
B C
D E F
![Page 10: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/10.jpg)
TreeMapAB CD
E
F
![Page 11: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/11.jpg)
TreeMapSliceAndDice Squarified Strip
order ordered unordered ordered
aspect ratios very high lowest medium
stability stable medium medium
![Page 12: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/12.jpg)
TreeMap
Examples
![Page 13: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/13.jpg)
RGraph
Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
![Page 14: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/14.jpg)
RGraph
• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and Ordering
• Linear Transitions vs. EaseIn/Out Transitions
![Page 15: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/15.jpg)
RGraphPolar vs. Rectangular Interpolation
![Page 16: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/16.jpg)
RGraphNode Constraints: Parent - Child angle
![Page 17: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/17.jpg)
RGraphNode Constraints:
Child Ordering
![Page 18: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/18.jpg)
RGraphSlow-in, slow-out Transitions
![Page 19: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/19.jpg)
RGraph
Examples
![Page 20: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/20.jpg)
HyperTree
A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli
![Page 21: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/21.jpg)
HyperTreePoincare Disk Model ofHyperbolic Geometry
Circle Limit IV - Escher
![Page 22: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/22.jpg)
HyperTree
Examples
![Page 23: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/23.jpg)
SpaceTree
SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B.
Bederson
![Page 24: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/24.jpg)
SpaceTree
A
B C
D E F
![Page 25: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/25.jpg)
SpaceTreeOnly show Context-Related Nodes
![Page 26: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/26.jpg)
SpaceTree
Examples
![Page 27: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/27.jpg)
What’s Next?
• SunBurst
• Force-Directed
• Icicle
• MultiTrees
• etc.
![Page 28: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/28.jpg)
What’s Next?SunBurst Visualization
![Page 29: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/29.jpg)
What’s Next?Force-Directed Layout
![Page 30: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/30.jpg)
What’s NextMultiTrees
![Page 31: JavaScript InfoVis Toolkit Overview](https://reader034.fdocuments.net/reader034/viewer/2022042601/541232df8d7f7295728b4731/html5/thumbnails/31.jpg)
Questions?
Mail: [email protected]
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb