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