SlideShare a Scribd company logo
1 of 40
Download to read offline
Creating Interactive Data
    Visualizations for the Web
    with the JavaScript InfoVis
            Toolkit 2.0



Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010
http://sencha.com/
Data Visualization
   JavaScript
Data is Everywhere on the Web
Data gets more Complex with Time
Description formats can get complicated...




         Source: http://homepages.inf.ed.ac.uk/wadler/language.pdf
...and even if formats can be simple...




               Source: http://json.org/
...the data they contain can still be Complex.




                         Items posted

                         Items read




                 Source: http://www.ndepend.com/
InfoVis Theory
Semiology of Graphics




Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
Data Types



• Continuous (Quantitative)
            10Kg, 13Kg, 15Kg, ...



• Ordered (Ordinal)
            small, medium, big



• Categorical (Nominal)

Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
Channel Ranking vs. Data Type

Quantitative                                           Ordinal                                          Nominal

   Position                                          Position                                          Position
    Length                                           Density                                              Hue
    Angle                                           Saturation                                         Texture
     Slope                                              Hue                                          Connection
     Area                                            Texture                                         Containment
   Volume                                          Connection                                          Density
   Density                                         Containment                                        Saturation
  Saturation                                          Length                                            Shape
      Hue                                             Angle                                             Length
   Texture                                             Slope                                            Angle
 Connection                                            Area                                              Slope
 Containment                                         Volume                                              Area
    Shape                                             Shape                                            Volume



Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
JavaScript InfoVis Toolkit

• Web Based Interactive Data
  Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based
Modular
            Grab only what you need


HyperTree                               SunBurst

TreeMap                               ForceDirected
                JavaScript InfoVis
                     Toolkit
 RGraph                                   Icicle

SpaceTree                            Stacked Charts
Extensible
Define custom Nodes and Edges
Composable
Add Visualizations as Node/Edge rendering functions to
                  other visualizations
Web Standards Based
• Major Browsers Support
• Mobile Support (Touch Events, HTML/
  SVG fallbacks)

• Optional Support for advanced features
  (shadows, gradients, fillText, etc)

• Works well with fallbacks such as
  ExCanvas and FlashCanvas
Featured Visualizations
Stacked Charts   Space Filling    Node Link
  AreaChart        SunBurst         RGraph
   BarChart        TreeMap         SpaceTree
   PieChart          Icicle        HyperTree
                                 Force-Directed
Stacked Charts
Stacked/Grouped BarCharts, PieCharts and AreaCharts
Space Filling Visualizations
     SunBurst, Icicle, TreeMap Layouts
Space Filling Visualizations
                     A


             B           C



         D       E       F
Space Filling Visualizations
    A
    B             C
      D            F



     E
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
SunBurst
Radial Space-Filling Visualization




      Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/
Icicle
Oriented Space-Filling Visualization
Node-Link Visualizations
RGraph, Force-Directed, SpaceTree, HyperTree



                            A


                    B           C


                D       E       F
RGraph




Inspired by: 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
RGraph
                 Polar vs. Rectangular Interpolation




Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
RGraph
                                     Node Constraints:
                                    Parent - Child angle




Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
RGraph
                                      Node Constraints:
                                       Child Ordering




Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
RGraph
                         Slow-in, slow-out Transitions




Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
HyperTree




Inspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter
                                                               Pirolli
HyperTree
Poincare Disk Model of
 Hyperbolic Geometry




    Circle Limit IV - Escher
SpaceTree




Inspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant,
                                                 Jesse Grosjean, Bemjamin B. Bederson
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
Force-Directed
Physical System Simulation
Some Examples
• Inspecting Google Chrome
• Artist-Band Relationships Visualization
• Mozilla Firefox 4 beta UI Study
• Mozilla.org Community Visualization
• Google Wave Visualizer
• The Guardian’s Embedded TreeMap
What’s Next


• WebGL
• Hardware Acceleration
• 3D Layouts
Questions?
Mail:           philogb@gmail.com
Project Page:   http://thejit.org
Blog:           http://blog.thejit.org
GitHub:         http://github.com/philogb

More Related Content

More from philogb

OpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualizationOpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualizationphilogb
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...philogb
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...philogb
 
The Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer ConferenceThe Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer Conferencephilogb
 
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at TwitterHacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitterphilogb
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitterphilogb
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitterphilogb
 
La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...philogb
 
Exploring Web standards for data visualization
Exploring Web standards for data visualizationExploring Web standards for data visualization
Exploring Web standards for data visualizationphilogb
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSphilogb
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datosphilogb
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.philogb
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript philogb
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012philogb
 
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011philogb
 
JavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit OverviewJavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit Overviewphilogb
 

More from philogb (16)

OpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualizationOpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualization
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
 
The Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer ConferenceThe Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer Conference
 
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at TwitterHacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
 
La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...
 
Exploring Web standards for data visualization
Exploring Web standards for data visualizationExploring Web standards for data visualization
Exploring Web standards for data visualization
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011
 
JavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit OverviewJavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit Overview
 

Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

  • 1. Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis Toolkit 2.0 Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010
  • 3. Data Visualization JavaScript
  • 4. Data is Everywhere on the Web
  • 5. Data gets more Complex with Time
  • 6. Description formats can get complicated... Source: http://homepages.inf.ed.ac.uk/wadler/language.pdf
  • 7. ...and even if formats can be simple... Source: http://json.org/
  • 8. ...the data they contain can still be Complex. Items posted Items read Source: http://www.ndepend.com/
  • 10. Semiology of Graphics Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
  • 11. Data Types • Continuous (Quantitative) 10Kg, 13Kg, 15Kg, ... • Ordered (Ordinal) small, medium, big • Categorical (Nominal) Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
  • 12. Channel Ranking vs. Data Type Quantitative Ordinal Nominal Position Position Position Length Density Hue Angle Saturation Texture Slope Hue Connection Area Texture Containment Volume Connection Density Density Containment Saturation Saturation Length Shape Hue Angle Length Texture Slope Angle Connection Area Slope Containment Volume Area Shape Shape Volume Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
  • 13. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based
  • 14. Modular Grab only what you need HyperTree SunBurst TreeMap ForceDirected JavaScript InfoVis Toolkit RGraph Icicle SpaceTree Stacked Charts
  • 16. Composable Add Visualizations as Node/Edge rendering functions to other visualizations
  • 17. Web Standards Based • Major Browsers Support • Mobile Support (Touch Events, HTML/ SVG fallbacks) • Optional Support for advanced features (shadows, gradients, fillText, etc) • Works well with fallbacks such as ExCanvas and FlashCanvas
  • 18. Featured Visualizations Stacked Charts Space Filling Node Link AreaChart SunBurst RGraph BarChart TreeMap SpaceTree PieChart Icicle HyperTree Force-Directed
  • 19. Stacked Charts Stacked/Grouped BarCharts, PieCharts and AreaCharts
  • 20. Space Filling Visualizations SunBurst, Icicle, TreeMap Layouts
  • 23. 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
  • 24. SunBurst Radial Space-Filling Visualization Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/
  • 26. Node-Link Visualizations RGraph, Force-Directed, SpaceTree, HyperTree A B C D E F
  • 27. RGraph Inspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  • 28. RGraph • Polar vs. Rectangular Interpolation • Node Constraints: Orientation and Ordering • Linear Transitions vs. EaseIn/Out Transitions
  • 29. RGraph Polar vs. Rectangular Interpolation Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  • 30. RGraph Node Constraints: Parent - Child angle Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  • 31. RGraph Node Constraints: Child Ordering Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  • 32. RGraph Slow-in, slow-out Transitions Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  • 33. HyperTree Inspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli
  • 34. HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher
  • 35. SpaceTree Inspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson
  • 36. 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
  • 38. Some Examples • Inspecting Google Chrome • Artist-Band Relationships Visualization • Mozilla Firefox 4 beta UI Study • Mozilla.org Community Visualization • Google Wave Visualizer • The Guardian’s Embedded TreeMap
  • 39. What’s Next • WebGL • Hardware Acceleration • 3D Layouts
  • 40. Questions? Mail: philogb@gmail.com Project Page: http://thejit.org Blog: http://blog.thejit.org GitHub: http://github.com/philogb