Data Visualization Data Visualization. Business Analytics (BA) Overview.
Data visualization for the web
description
Transcript of Data visualization for the web
Data Visualization for the Web
@philogb - Stanford ACM Tech Talks
I use Web Standards to create Data Visualizations.
@philogb
The Problem
@philogb - Stanford ACM Tech Talks
I wish I had someguidance when making
data visualizations!
InfoVis Theory
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
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
Steven’s Power Law
InfoVis Tools
JavaScript InfoVis Toolkit
http://thejit.org/
JavaScript InfoVis Toolkit
http://thejit.org/
• The White House
• Mozilla
• The Guardian
• Al-Jazeera
A Hands-On Toolkit
PhiloGL
• WebGL Powered Visualization Framework
• Handles Big Datasets ( > 100K elems )
• Idiomatic JavaScript
• Rich Module System
Model courtesy of Nicolas Kassis - McGill Univ.
http://senchalabs.org/philogl/
Examples
http://senchalabs.org/philogl/
//Create application PhiloGL('canvasId', { program: { from: 'uris', vs: 'shader.vs.glsl', fs: 'shader.fs.glsl' }, camera: { position: { x: 0, y: 0, z: -50 } }, textures: { src: ['arroway.jpg', 'earth.jpg'] }, events: { onDragMove: function(e) { //do things... }, onMouseWheel: function(e) { //do things... } }, onError: function() { alert("There was an error creating the app."); }, onLoad: function(app) { /* Do things here */ } });
More Examples
http://senchalabs.org/philogl/