Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Creating Interactive Data    Visualizations for the Web    with the JavaScript InfoVis            Toolkit 2.0Nicolas Garci...
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    ...
InfoVis Theory
Semiology of GraphicsSource: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter S...
Data Types• Continuous (Quantitative)            10Kg, 13Kg, 15Kg, ...• Ordered (Ordinal)            small, medium, big• C...
Channel Ranking vs. Data TypeQuantitative                                           Ordinal                               ...
JavaScript InfoVis Toolkit• Web Based Interactive Data  Visualizations• Multiple Graph/Tree Layouts• Modular, Extensible, ...
Modular            Grab only what you needHyperTree                               SunBurstTreeMap                         ...
ExtensibleDefine custom Nodes and Edges
ComposableAdd 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 adv...
Featured VisualizationsStacked Charts   Space Filling    Node Link  AreaChart        SunBurst         RGraph   BarChart   ...
Stacked ChartsStacked/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   ...
SunBurstRadial Space-Filling Visualization      Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/
IcicleOriented Space-Filling Visualization
Node-Link VisualizationsRGraph, Force-Directed, SpaceTree, HyperTree                            A                    B    ...
RGraphInspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija,...
RGraph• Polar vs. Rectangular Interpolation• Node Constraints: Orientation and Ordering• Linear Transitions vs. EaseIn/Out...
RGraph                 Polar vs. Rectangular InterpolationSource: Animated Exploration of Dynamic Graphs with Radial Layou...
RGraph                                     Node Constraints:                                    Parent - Child angleSource...
RGraph                                      Node Constraints:                                       Child OrderingSource: ...
RGraph                         Slow-in, slow-out TransitionsSource: Animated Exploration of Dynamic Graphs with Radial Lay...
HyperTreeInspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamp...
HyperTreePoincare Disk Model of Hyperbolic Geometry    Circle Limit IV - Escher
SpaceTreeInspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation...
SpaceTree                    Only show Context-Related NodesSource: SpaceTree: Supporting Exploration in Large Node Link T...
Force-DirectedPhysical System Simulation
Some Examples• Inspecting Google Chrome• Artist-Band Relationships Visualization• Mozilla Firefox 4 beta UI Study• Mozilla...
What’s Next• WebGL• Hardware Acceleration• 3D Layouts
Questions?Mail:           philogb@gmail.comProject Page:   http://thejit.orgBlog:           http://blog.thejit.orgGitHub: ...
Upcoming SlideShare
Loading in …5
×

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

4,687 views

Published on

  • Microsoft Power BI for Healthcare Industry Data Visualization. Power BI provides Hawk Eye View of Insights from hidden data sources to Healthcare providers that are required to minimize costs, maximize revenue, improve patient service, abide regulatory compliances. https://goo.gl/WF3R2Z
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis Toolkit 2.0Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010
  2. 2. http://sencha.com/
  3. 3. Data Visualization JavaScript
  4. 4. Data is Everywhere on the Web
  5. 5. Data gets more Complex with Time
  6. 6. Description formats can get complicated... Source: http://homepages.inf.ed.ac.uk/wadler/language.pdf
  7. 7. ...and even if formats can be simple... Source: http://json.org/
  8. 8. ...the data they contain can still be Complex. Items posted Items read Source: http://www.ndepend.com/
  9. 9. InfoVis Theory
  10. 10. Semiology of GraphicsSource: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
  11. 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. 12. Channel Ranking vs. Data TypeQuantitative 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 VolumeSource: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
  13. 13. JavaScript InfoVis Toolkit• Web Based Interactive Data Visualizations• Multiple Graph/Tree Layouts• Modular, Extensible, Composable• Web Standards Based
  14. 14. Modular Grab only what you needHyperTree SunBurstTreeMap ForceDirected JavaScript InfoVis Toolkit RGraph IcicleSpaceTree Stacked Charts
  15. 15. ExtensibleDefine custom Nodes and Edges
  16. 16. ComposableAdd Visualizations as Node/Edge rendering functions to other visualizations
  17. 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. 18. Featured VisualizationsStacked Charts Space Filling Node Link AreaChart SunBurst RGraph BarChart TreeMap SpaceTree PieChart Icicle HyperTree Force-Directed
  19. 19. Stacked ChartsStacked/Grouped BarCharts, PieCharts and AreaCharts
  20. 20. Space Filling Visualizations SunBurst, Icicle, TreeMap Layouts
  21. 21. Space Filling Visualizations A B C D E F
  22. 22. Space Filling Visualizations A B C D F E
  23. 23. TreeMap SliceAndDice Squarified Strip order ordered unordered orderedaspect 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. 24. SunBurstRadial Space-Filling Visualization Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/
  25. 25. IcicleOriented Space-Filling Visualization
  26. 26. Node-Link VisualizationsRGraph, Force-Directed, SpaceTree, HyperTree A B C D E F
  27. 27. RGraphInspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  28. 28. RGraph• Polar vs. Rectangular Interpolation• Node Constraints: Orientation and Ordering• Linear Transitions vs. EaseIn/Out Transitions
  29. 29. RGraph Polar vs. Rectangular InterpolationSource: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  30. 30. RGraph Node Constraints: Parent - Child angleSource: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  31. 31. RGraph Node Constraints: Child OrderingSource: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  32. 32. RGraph Slow-in, slow-out TransitionsSource: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
  33. 33. HyperTreeInspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli
  34. 34. HyperTreePoincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher
  35. 35. SpaceTreeInspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson
  36. 36. SpaceTree Only show Context-Related NodesSource: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson
  37. 37. Force-DirectedPhysical System Simulation
  38. 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. 39. What’s Next• WebGL• Hardware Acceleration• 3D Layouts
  40. 40. Questions?Mail: philogb@gmail.comProject Page: http://thejit.orgBlog: http://blog.thejit.orgGitHub: http://github.com/philogb

×