Your SlideShare is downloading. ×
0
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
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 - Create interactive data visualizations for the web

6,894

Published on

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,894
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
53
Comments
0
Likes
11
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: 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

×