Creating Interactive Data Visualizations for the Web with the - - PowerPoint PPT Presentation

▶
creating interactive data visualizations for the web with
SMART_READER_LITE
LIVE PREVIEW

Creating Interactive Data Visualizations for the Web with the - - PowerPoint PPT Presentation

Aug 30, 2023 376 likes •787 views

Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis Toolkit 2.0 Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010 http://sencha.com/ Data Visualization JavaScript Data is Everywhere on the Web Data gets

slide-1
SLIDE 1

Creating Interactive Data Visualizations for the Web with the JavaScript InfoVis Toolkit 2.0

Nicolas Garcia Belmonte - YOW! Conferences - Dec. 2010

slide-2
SLIDE 2

http://sencha.com/

slide-3
SLIDE 3

Data Visualization JavaScript

slide-4
SLIDE 4

Data is Everywhere on the Web

slide-5
SLIDE 5

Data gets more Complex with Time

slide-6
SLIDE 6

Description formats can get complicated...

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

slide-7
SLIDE 7

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

Source: http://json.org/

slide-8
SLIDE 8

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

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

Items posted Items read

slide-9
SLIDE 9

InfoVis Theory

slide-10
SLIDE 10

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

slide-11
SLIDE 11
  • 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

slide-12
SLIDE 12

Channel Ranking vs. Data Type

Position Length Angle Slope Area Volume Density Saturation Hue Texture Connection Containment Shape Position Density Saturation Hue Texture Connection Containment Length Angle Slope Area Volume Shape Position Hue Texture Connection Containment Density Saturation Shape Length Angle Slope Area 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

slide-13
SLIDE 13

JavaScript InfoVis Toolkit

  • Web Based Interactive Data

Visualizations

  • Multiple Graph/Tree Layouts
  • Modular, Extensible, Composable
  • Web Standards Based
slide-14
SLIDE 14

Modular

Grab only what you need

HyperTree TreeMap RGraph SpaceTree JavaScript InfoVis Toolkit SunBurst ForceDirected Icicle Stacked Charts

slide-15
SLIDE 15

Extensible

Define custom Nodes and Edges

slide-16
SLIDE 16

Composable

Add Visualizations as Node/Edge rendering functions to

  • ther visualizations
slide-17
SLIDE 17

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

slide-18
SLIDE 18

Featured Visualizations

Stacked Charts

AreaChart BarChart PieChart

Space Filling

SunBurst TreeMap Icicle

Node Link

RGraph SpaceTree HyperTree Force-Directed

slide-19
SLIDE 19

Stacked Charts

Stacked/Grouped BarCharts, PieCharts and AreaCharts

slide-20
SLIDE 20

Space Filling Visualizations

SunBurst, Icicle, TreeMap Layouts

slide-21
SLIDE 21

A B C D E F

Space Filling Visualizations

slide-22
SLIDE 22

A B C D E F

Space Filling Visualizations

slide-23
SLIDE 23

TreeMap

SliceAndDice Squarified Strip

  • rder
  • rdered

unordered

  • rdered

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

slide-24
SLIDE 24

SunBurst

Radial Space-Filling Visualization

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

slide-25
SLIDE 25

Icicle

Oriented Space-Filling Visualization

slide-26
SLIDE 26

Node-Link Visualizations

RGraph, Force-Directed, SpaceTree, HyperTree

A B C D E F

slide-27
SLIDE 27

RGraph

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

slide-28
SLIDE 28

RGraph

  • Polar vs. Rectangular Interpolation
  • Node Constraints: Orientation and Ordering
  • Linear Transitions vs. EaseIn/Out Transitions
slide-29
SLIDE 29

RGraph

Polar vs. Rectangular Interpolation

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

slide-30
SLIDE 30

RGraph

Node Constraints: Parent - Child angle

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

slide-31
SLIDE 31

RGraph

Node Constraints: Child Ordering

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

slide-32
SLIDE 32

RGraph

Slow-in, slow-out Transitions

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

slide-33
SLIDE 33

HyperTree

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

slide-34
SLIDE 34

HyperTree

Poincare Disk Model of Hyperbolic Geometry

Circle Limit IV - Escher

slide-35
SLIDE 35

SpaceTree

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

slide-36
SLIDE 36

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

slide-37
SLIDE 37

Force-Directed

Physical System Simulation

slide-38
SLIDE 38

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
slide-39
SLIDE 39

What’s Next

  • WebGL
  • Hardware Acceleration
  • 3D Layouts
slide-40
SLIDE 40

Questions?

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