JavaScript InfoVis Toolkit:
               Create Interactive Data
                Visualizations for the
                ...
Data Visualization
                                  JavaScript




Saturday, September 25, 2010
JavaScript InfoVis Toolkit

           • Web Based Interactive Data Visualizations
           • Multiple Graph/Tree Layout...
Modular
                               Grab only what you need


                  HyperTree                              ...
Extensible
                               Define custom Nodes and Edges




Saturday, September 25, 2010
Composable
             Add Visualizations as Node/Edge rendering functions to
                               other visual...
Web Standards Based

                         • HTML / SVG / CSS / JS
                         • Major Browsers Support
  ...
Featured Visualizations
                        Stacked Charts     Space Filling    Node Link
                            ...
Stacked Charts
         Stacked/Grouped BarCharts, PieCharts and AreaCharts




Saturday, September 25, 2010
Space Filling Visualizations
                               SunBurst, Icicle, TreeMap Layouts




Saturday, September 25, ...
Space Filling Visualizations
                                           A


                                   B          ...
Space Filling Visualizations
                               A
                               B     C
                     ...
TreeMap
                        SliceAndDice                                    Squarified                                 ...
SunBurst
                               Radial Space-Filling Visualization




                                     Inspir...
Icicle
                               Oriented Space-Filling Visualization




Saturday, September 25, 2010
Node-Link Visualizations
                    RGraph, Force-Directed, SpaceTree, HyperTree



                             ...
RGraph




                     Inspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Dany...
RGraph


                   • Polar vs. Rectangular Interpolation
                   • Node Constraints: Orientation and O...
HyperTree




              Inspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hier...
HyperTree
                               Poincare Disk Model of
                                Hyperbolic Geometry




  ...
SpaceTree




                Inspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and...
SpaceTree
                                   Only show Context-Related Nodes




               Source: SpaceTree: Support...
Force-Directed
                               Physical System Simulation




Saturday, September 25, 2010
Some Examples

                               • Doctor Who’s Villains Visualization
                               • Artis...
What’s Next


                               • WebGL
                               • Hardware Acceleration
              ...
Questions?

                               Twitter:           @philogb
                               Project Page:   http...
Upcoming SlideShare
Loading in …5
×

JavaScript InfoVis Toolkit - Create interactive data visualizations for the web

8,210 views

Published on

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

No Downloads
Views
Total views
8,210
On SlideShare
0
From Embeds
0
Number of Embeds
832
Actions
Shares
0
Downloads
55
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

JavaScript InfoVis Toolkit - Create interactive data visualizations for the web

  1. 1. JavaScript InfoVis Toolkit: Create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - JSConf - Sept. 2010 Saturday, September 25, 2010
  2. 2. Data Visualization JavaScript Saturday, September 25, 2010
  3. 3. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based Saturday, September 25, 2010
  4. 4. Modular Grab only what you need HyperTree SunBurst TreeMap ForceDirected JavaScript InfoVis Toolkit RGraph Icicle SpaceTree Stacked Charts Saturday, September 25, 2010
  5. 5. Extensible Define custom Nodes and Edges Saturday, September 25, 2010
  6. 6. Composable Add Visualizations as Node/Edge rendering functions to other visualizations Saturday, September 25, 2010
  7. 7. Web Standards Based • HTML / SVG / CSS / JS • Major Browsers Support • Mobile Support (Touch Events, HTML/ SVG fallbacks) Saturday, September 25, 2010
  8. 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. 9. Stacked Charts Stacked/Grouped BarCharts, PieCharts and AreaCharts Saturday, September 25, 2010
  10. 10. Space Filling Visualizations SunBurst, Icicle, TreeMap Layouts Saturday, September 25, 2010
  11. 11. Space Filling Visualizations A B C D E F Saturday, September 25, 2010
  12. 12. Space Filling Visualizations A B C D F E Saturday, September 25, 2010
  13. 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. 14. SunBurst Radial Space-Filling Visualization Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/ Saturday, September 25, 2010
  15. 15. Icicle Oriented Space-Filling Visualization Saturday, September 25, 2010
  16. 16. Node-Link Visualizations RGraph, Force-Directed, SpaceTree, HyperTree A B C D E F Saturday, September 25, 2010
  17. 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. 18. RGraph • Polar vs. Rectangular Interpolation • Node Constraints: Orientation and Ordering • Linear Transitions vs. EaseIn/Out Transitions Saturday, September 25, 2010
  19. 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. 20. HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher Saturday, September 25, 2010
  21. 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. 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. 23. Force-Directed Physical System Simulation Saturday, September 25, 2010
  24. 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. 25. What’s Next • WebGL • Hardware Acceleration • 3D Layouts Saturday, September 25, 2010
  26. 26. Questions? Twitter: @philogb Project Page: http://thejit.org Saturday, September 25, 2010

×