creating interactive data visualizations for the web - yow! developer conferences australia
Post on 11-Sep-2014
3.973 views
DESCRIPTION
TRANSCRIPT
![Page 1: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/1.jpg)
Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis
Toolkit 2.0
Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010
![Page 2: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/2.jpg)
http://sencha.com/
![Page 3: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/3.jpg)
Data VisualizationJavaScript
![Page 4: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/4.jpg)
Data is Everywhere on the Web
![Page 5: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/5.jpg)
Data gets more Complex with Time
![Page 6: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/6.jpg)
Description formats can get complicated...
Source: http://homepages.inf.ed.ac.uk/wadler/language.pdf
![Page 7: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/7.jpg)
...and even if formats can be simple...
Source: http://json.org/
![Page 8: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/8.jpg)
...the data they contain can still be Complex.
Source: http://www.ndepend.com/
Items posted
Items read
![Page 9: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/9.jpg)
InfoVis Theory
![Page 10: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/10.jpg)
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
![Page 11: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/11.jpg)
• Continuous (Quantitative)
• Ordered (Ordinal)
• Categorical (Nominal)
10Kg, 13Kg, 15Kg, ...
small, medium, big
Data Types
Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
![Page 12: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/12.jpg)
Channel Ranking vs. Data Type
PositionLengthAngleSlopeArea
VolumeDensity
SaturationHue
TextureConnectionContainment
Shape
PositionDensity
SaturationHue
TextureConnectionContainment
LengthAngleSlopeArea
VolumeShape
PositionHue
TextureConnectionContainment
DensitySaturation
ShapeLengthAngleSlopeArea
Volume
Quantitative Ordinal Nominal
Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
![Page 13: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/13.jpg)
JavaScript InfoVis Toolkit
• Web Based Interactive Data Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based
![Page 14: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/14.jpg)
ModularGrab only what you need
HyperTree
TreeMap
RGraph
SpaceTree
JavaScript InfoVis Toolkit
SunBurst
ForceDirected
Icicle
Stacked Charts
![Page 15: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/15.jpg)
ExtensibleDefine custom Nodes and Edges
![Page 16: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/16.jpg)
ComposableAdd Visualizations as Node/Edge rendering functions to
other visualizations
![Page 17: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/17.jpg)
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
![Page 18: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/18.jpg)
Featured Visualizations
Stacked Charts
AreaChart
BarChart
PieChart
Space Filling
SunBurst
TreeMap
Icicle
Node Link
RGraph
SpaceTree
HyperTree
Force-Directed
![Page 19: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/19.jpg)
Stacked ChartsStacked/Grouped BarCharts, PieCharts and AreaCharts
![Page 20: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/20.jpg)
Space Filling VisualizationsSunBurst, Icicle, TreeMap Layouts
![Page 21: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/21.jpg)
A
B C
D E F
Space Filling Visualizations
![Page 22: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/22.jpg)
AB CD
E
F
Space Filling Visualizations
![Page 23: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/23.jpg)
TreeMapSliceAndDice 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
![Page 24: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/24.jpg)
SunBurstRadial Space-Filling Visualization
Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/
![Page 25: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/25.jpg)
IcicleOriented Space-Filling Visualization
![Page 26: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/26.jpg)
Node-Link VisualizationsRGraph, Force-Directed, SpaceTree, HyperTree
A
B C
D E F
![Page 27: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/27.jpg)
RGraph
Inspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
![Page 28: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/28.jpg)
RGraph
• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and Ordering
• Linear Transitions vs. EaseIn/Out Transitions
![Page 29: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/29.jpg)
RGraphPolar vs. Rectangular Interpolation
Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
![Page 30: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/30.jpg)
RGraphNode Constraints: Parent - Child angle
Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
![Page 31: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/31.jpg)
RGraphNode Constraints:
Child Ordering
Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
![Page 32: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/32.jpg)
RGraphSlow-in, slow-out Transitions
Source: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
![Page 33: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/33.jpg)
HyperTree
Inspired by: A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli
![Page 34: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/34.jpg)
HyperTreePoincare Disk Model ofHyperbolic Geometry
Circle Limit IV - Escher
![Page 35: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/35.jpg)
SpaceTree
Inspired by: SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson
![Page 36: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/36.jpg)
SpaceTreeOnly 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
![Page 37: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/37.jpg)
Force-DirectedPhysical System Simulation
![Page 38: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/38.jpg)
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
![Page 39: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/39.jpg)
What’s Next
• WebGL
• Hardware Acceleration
• 3D Layouts
![Page 40: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia](https://reader034.vdocuments.net/reader034/viewer/2022051608/541232468d7f72c9738b4746/html5/thumbnails/40.jpg)
Questions?
Mail: [email protected]
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb