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

Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree

Extensible • Deﬁne custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)

Composable Add Visualizations as Node/Edge rendering functions to other visualizations

Featured Visualizations • TreeMap • RGraph • HyperTree • SpaceTree

TreeMap Squariﬁed 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

TreeMap A B C D F E

TreeMap SliceAndDice Squariﬁed 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

RGraph Polar vs. Rectangular Interpolation

RGraph Node Constraints: Parent - Child angle

RGraph Node Constraints: Child Ordering

RGraph Slow-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

HyperTree Poincare Disk Model of Hyperbolic 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

SpaceTree Only 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 Next MultiTrees

Questions? Mail: philogb@gmail.com Project Page: http://thejit.org Blog: http://blog.thejit.org GitHub: http://github.com/philogb

http://blog.dreamcss.com	507
http://blog.thejit.org	505
http://www.slideshare.net	22
http://storify.com	2
http://4624.info	1
http://www.lmodules.com	1
http://feeds.feedburner.com	1
http://translate.googleusercontent.com	1

JavaScript InfoVis Toolkit Overview

by philogb on Dec 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 1,040

Statistics

JavaScript InfoVis Toolkit Overview — Presentation Transcript