JavaScript InfoVis Toolkit Overview

JavaScript InfoVis Toolkit

Nicolas Garcia Belmonte - Dec. 2009

Agenda

• JavaScript InfoVis Toolkit Overview

• Featured Visualizations

• What’s Next for the JIT

JavaScript InfoVis Toolkit

• Web Based Interactive Data Visualizations

• Multiple Graph/Tree Layouts

• Modular, Extensible, Composable

• Web Standards Based

ModularGrab only what you need

HyperTree

TreeMap

RGraph

SpaceTree

JavaScript InfoVis Toolkit

SunBurst

ForceDirected

Icicle

Extensible• Define custom Nodes and Edges

• Add Custom Animations (linear, Elastic, etc.)

ComposableAdd Visualizations as Node/Edge rendering functions to

other visualizations

Featured Visualizations

• TreeMap

• RGraph

• HyperTree

• SpaceTree

TreeMap

Squarified TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing

Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg

TreeMap

A

B C

D E F

TreeMapAB CD

E

F

TreeMapSliceAndDice Squarified Strip

order ordered unordered ordered

aspect ratios very high lowest medium

stability stable medium medium

TreeMap

Examples

RGraph

Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst

RGraph

• Polar vs. Rectangular Interpolation

• Node Constraints: Orientation and Ordering

• Linear Transitions vs. EaseIn/Out Transitions

RGraphPolar vs. Rectangular Interpolation

RGraphNode Constraints: Parent - Child angle

RGraphNode Constraints:

Child Ordering

RGraphSlow-in, slow-out Transitions

RGraph

Examples

HyperTree

A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli

HyperTreePoincare Disk Model ofHyperbolic Geometry

Circle Limit IV - Escher

HyperTree

Examples

SpaceTree

SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B.

Bederson

SpaceTree

A

B C

D E F

SpaceTreeOnly show Context-Related Nodes

SpaceTree

Examples

What’s Next?

• SunBurst

• Force-Directed

• Icicle

• MultiTrees

• etc.

What’s Next?SunBurst Visualization

What’s Next?Force-Directed Layout

What’s NextMultiTrees

Questions?

Mail: philogb@gmail.com

Project Page: http://thejit.org

Blog: http://blog.thejit.org

GitHub: http://github.com/philogb