javascript infovis toolkit - create interactive data visualizations for the web
Post on 11-Sep-2014
7.446 views
DESCRIPTION
TRANSCRIPT
JavaScript InfoVis Toolkit: Create Interactive Data Visualizations for the
Web
Nicolas Garcia Belmonte - JSConf - Sept. 2010
Saturday, September 25, 2010
Data VisualizationJavaScript
Saturday, September 25, 2010
•Web Based Interactive Data Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
•Web Standards Based
JavaScript InfoVis Toolkit
Saturday, September 25, 2010
ModularGrab only what you need
HyperTree
TreeMap
RGraph
SpaceTree
JavaScript InfoVis Toolkit
SunBurst
ForceDirected
Icicle
Stacked Charts
Saturday, September 25, 2010
ExtensibleDefine custom Nodes and Edges
Saturday, September 25, 2010
ComposableAdd Visualizations as Node/Edge rendering functions to
other visualizations
Saturday, September 25, 2010
Web Standards Based
• HTML / SVG / CSS / JS
• Major Browsers Support
• Mobile Support (Touch Events, HTML/SVG fallbacks)
Saturday, September 25, 2010
Featured Visualizations
Stacked Charts
AreaChart
BarChart
PieChart
Space Filling
SunBurst
TreeMap
Icicle
Node Link
RGraph
SpaceTree
HyperTree
Force-Directed
Saturday, September 25, 2010
Stacked ChartsStacked/Grouped BarCharts, PieCharts and AreaCharts
Saturday, September 25, 2010
Space Filling VisualizationsSunBurst, Icicle, TreeMap Layouts
Saturday, September 25, 2010
A
B C
D E F
Space Filling Visualizations
Saturday, September 25, 2010
AB CD
E
F
Space Filling Visualizations
Saturday, September 25, 2010
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
Saturday, September 25, 2010
SunBurstRadial Space-Filling Visualization
Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/
Saturday, September 25, 2010
IcicleOriented Space-Filling Visualization
Saturday, September 25, 2010
Node-Link VisualizationsRGraph, Force-Directed, SpaceTree, HyperTree
A
B C
D E F
Saturday, September 25, 2010
RGraph
Inspired by: Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
Saturday, September 25, 2010
RGraph
• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and Ordering
• Linear Transitions vs. EaseIn/Out Transitions
Saturday, September 25, 2010
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
HyperTreePoincare Disk Model ofHyperbolic Geometry
Circle Limit IV - EscherSaturday, September 25, 2010
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
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
Saturday, September 25, 2010
Force-DirectedPhysical System Simulation
Saturday, September 25, 2010
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
What’s Next
• WebGL
• Hardware Acceleration
• 3D Layouts
Saturday, September 25, 2010
Questions?
Twitter: @philogb
Project Page: http://thejit.org
Saturday, September 25, 2010