Download as PDF, PPTX
Uploaded byphilogb
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
The JavaScript InfoVis Toolkit allows users to create interactive data visualizations for the web. It features multiple graph and tree layouts that can be used modularly and are extensible. The toolkit uses web standards and allows visualizations to be built in a composable way. It includes visualizations like stacked charts, node-link diagrams, sunbursts, treemaps and icicles that were inspired by academic papers. The toolkit is actively developed with features like WebGL and 3D layouts planned for the future.
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
- 1. JavaScript InfoVis Toolkit: Create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - JSConf - Sept. 2010 Saturday, September 25, 2010
- 2. Data Visualization JavaScript Saturday, September 25, 2010
- 3. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based Saturday, September 25, 2010
- 4. Modular Grab only what you need HyperTree SunBurst TreeMap ForceDirected JavaScript InfoVis Toolkit RGraph Icicle SpaceTree Stacked Charts Saturday, September 25, 2010
- 5. Extensible Define custom Nodes and Edges Saturday, September 25, 2010
- 6. Composable Add Visualizations as Node/Edge rendering functions to other visualizations Saturday, September 25, 2010
- 7. Web Standards Based • HTML / SVG / CSS / JS • Major Browsers Support • Mobile Support (Touch Events, HTML/ SVG fallbacks) Saturday, September 25, 2010
- 8. Featured Visualizations Stacked Charts Space Filling Node Link AreaChart SunBurst RGraph BarChart TreeMap SpaceTree PieChart Icicle HyperTree Force-Directed Saturday, September 25, 2010
- 9. Stacked Charts Stacked/Grouped BarCharts, PieCharts and AreaCharts Saturday, September 25, 2010
- 10. Space Filling Visualizations SunBurst, Icicle, TreeMap Layouts Saturday, September 25, 2010
- 11. Space Filling Visualizations A B C D E F Saturday, September 25, 2010
- 12. Space Filling Visualizations A B C D F E Saturday, September 25, 2010
- 13. TreeMap SliceAndDice Squarified Strip order ordered unordered ordered aspect ratios very high lowest medium stability stable medium medium Inspired by: Squarified TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing Inspired by: Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg Saturday, September 25, 2010
- 14. SunBurst Radial Space-Filling Visualization Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/ Saturday, September 25, 2010
- 15. Icicle Oriented Space-Filling Visualization Saturday, September 25, 2010
- 16. Node-Link Visualizations RGraph, Force-Directed, SpaceTree, HyperTree A B C D E F Saturday, September 25, 2010
- 17. RGraph Inspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst Saturday, September 25, 2010
- 18. RGraph • Polar vs. Rectangular Interpolation • Node Constraints: Orientation and Ordering • Linear Transitions vs. EaseIn/Out Transitions Saturday, September 25, 2010
- 19. HyperTree Inspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli Saturday, September 25, 2010
- 20. HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher Saturday, September 25, 2010
- 21. SpaceTree Inspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson Saturday, September 25, 2010
- 22. SpaceTree Only show Context-Related Nodes Source: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson Saturday, September 25, 2010
- 23. Force-Directed Physical System Simulation Saturday, September 25, 2010
- 24. Some Examples • Doctor Who’s Villains Visualization • Artist-Band Relationships Visualization • Google Wave Visualizer • Mozilla.org Community Visualization • The Guardian’s Embedded TreeMap Saturday, September 25, 2010
- 25. What’s Next • WebGL • Hardware Acceleration • 3D Layouts Saturday, September 25, 2010
- 26. Questions? Twitter: @philogb Project Page: http://thejit.org Saturday, September 25, 2010