40
Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis Toolkit 2.0 Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010

Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

  • View
    3.968

  • Download
    3

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis

Toolkit 2.0

Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010

Page 2: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

http://sencha.com/

Page 3: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Data VisualizationJavaScript

Page 4: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Data is Everywhere on the Web

Page 5: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Data gets more Complex with Time

Page 6: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Description formats can get complicated...

Source: http://homepages.inf.ed.ac.uk/wadler/language.pdf

Page 7: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

...and even if formats can be simple...

Source: http://json.org/

Page 8: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

...the data they contain can still be Complex.

Source: http://www.ndepend.com/

Items posted

Items read

Page 9: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

InfoVis Theory

Page 10: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Semiology of Graphics

Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

Page 11: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

• Continuous (Quantitative)

• Ordered (Ordinal)

• Categorical (Nominal)

10Kg, 13Kg, 15Kg, ...

small, medium, big

Data Types

Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

Page 12: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Channel Ranking vs. Data Type

PositionLengthAngleSlopeArea

VolumeDensity

SaturationHue

TextureConnectionContainment

Shape

PositionDensity

SaturationHue

TextureConnectionContainment

LengthAngleSlopeArea

VolumeShape

PositionHue

TextureConnectionContainment

DensitySaturation

ShapeLengthAngleSlopeArea

Volume

Quantitative Ordinal Nominal

Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

Page 13: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

JavaScript InfoVis Toolkit

• Web Based Interactive Data Visualizations

• Multiple Graph/Tree Layouts

• Modular, Extensible, Composable

• Web Standards Based

Page 14: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

ModularGrab only what you need

HyperTree

TreeMap

RGraph

SpaceTree

JavaScript InfoVis Toolkit

SunBurst

ForceDirected

Icicle

Stacked Charts

Page 15: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

ExtensibleDefine custom Nodes and Edges

Page 16: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

ComposableAdd Visualizations as Node/Edge rendering functions to

other visualizations

Page 17: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Web Standards Based

• Major Browsers Support

• Mobile Support (Touch Events, HTML/SVG fallbacks)

• Optional Support for advanced features (shadows, gradients, fillText, etc)

• Works well with fallbacks such as ExCanvas and FlashCanvas

Page 18: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Featured Visualizations

Stacked Charts

AreaChart

BarChart

PieChart

Space Filling

SunBurst

TreeMap

Icicle

Node Link

RGraph

SpaceTree

HyperTree

Force-Directed

Page 19: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Stacked ChartsStacked/Grouped BarCharts, PieCharts and AreaCharts

Page 20: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Space Filling VisualizationsSunBurst, Icicle, TreeMap Layouts

Page 21: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

A

B C

D E F

Space Filling Visualizations

Page 22: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

AB CD

E

F

Space Filling Visualizations

Page 23: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

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

Page 24: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

SunBurstRadial Space-Filling Visualization

Inspired by: http://www.cc.gatech.edu/gvu/ii/sunburst/

Page 25: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

IcicleOriented Space-Filling Visualization

Page 26: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Node-Link VisualizationsRGraph, Force-Directed, SpaceTree, HyperTree

A

B C

D E F

Page 27: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

RGraph

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

Page 28: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

RGraph

• Polar vs. Rectangular Interpolation

• Node Constraints: Orientation and Ordering

• Linear Transitions vs. EaseIn/Out Transitions

Page 29: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

RGraphPolar vs. Rectangular Interpolation

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

Page 30: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

RGraphNode Constraints: Parent - Child angle

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

Page 31: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

RGraphNode Constraints:

Child Ordering

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

Page 32: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

RGraphSlow-in, slow-out Transitions

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

Page 33: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

HyperTree

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

Page 34: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

HyperTreePoincare Disk Model ofHyperbolic Geometry

Circle Limit IV - Escher

Page 35: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

SpaceTree

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

Page 36: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

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

Page 37: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Force-DirectedPhysical System Simulation

Page 38: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Some Examples

• Inspecting Google Chrome

• Artist-Band Relationships Visualization

• Mozilla Firefox 4 beta UI Study

• Mozilla.org Community Visualization

• Google Wave Visualizer

• The Guardian’s Embedded TreeMap

Page 39: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

What’s Next

• WebGL

• Hardware Acceleration

• 3D Layouts

Page 40: Creating Interactive Data Visualizations for the Web - YOW! Developer Conferences Australia

Questions?

Mail: [email protected]

Project Page: http://thejit.org

Blog: http://blog.thejit.org

GitHub: http://github.com/philogb