JavaScript InfoVis Toolkit - Create interactive data visualizations for the web

JavaScript InfoVis Toolkit: Create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - JSConf - Sept. 2010 Saturday, September 25, 2010

Data Visualization JavaScript Saturday, September 25, 2010

JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based Saturday, September 25, 2010

Modular Grab only what you need HyperTree SunBurst TreeMap ForceDirected JavaScript InfoVis Toolkit RGraph Icicle SpaceTree Stacked Charts Saturday, September 25, 2010

Extensible Deﬁne custom Nodes and Edges Saturday, September 25, 2010

Composable Add 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 Space Filling Node Link AreaChart SunBurst RGraph BarChart TreeMap SpaceTree PieChart Icicle HyperTree Force-Directed Saturday, September 25, 2010

Stacked Charts Stacked/Grouped BarCharts, PieCharts and AreaCharts Saturday, September 25, 2010

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

Space Filling Visualizations A B C D E F Saturday, September 25, 2010

Space Filling Visualizations A B C D F E Saturday, September 25, 2010

TreeMap SliceAndDice Squariﬁed Strip order ordered unordered ordered aspect ratios very high lowest medium stability stable medium medium Inspired by: Squariﬁed 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

SunBurst Radial Space-Filling Visualization Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/ Saturday, September 25, 2010

Icicle Oriented Space-Filling Visualization Saturday, September 25, 2010

Node-Link Visualizations RGraph, 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

HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher Saturday, 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

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

Force-Directed Physical 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

http://blog.thejit.org	493
http://feeds.feedburner.com	94
http://lanyrd.com	9
http://www.directrss.co.il	5
http://localhost:4000	1
http://www.hanrss.com	1
http://static.slidesharecdn.com	1
https://twimg0-a.akamaihd.net	1

JavaScript InfoVis Toolkit - Create interactive data visualizations for the web

by philogb on Sep 25, 2010

Accessibility

Tags

Upload Details

Usage Rights

8 Embeds 605

Statistics

JavaScript InfoVis Toolkit - Create interactive data visualizations for the web — Presentation Transcript