Download - Data visualization for the web
![Page 1: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/1.jpg)
Data Visualization for the Web
@philogb - Stanford ACM Tech Talks
![Page 2: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/2.jpg)
I use Web Standards to create Data Visualizations.
@philogb
![Page 3: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/3.jpg)
The Problem
![Page 4: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/4.jpg)
![Page 5: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/5.jpg)
@philogb - Stanford ACM Tech Talks
![Page 6: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/6.jpg)
I wish I had someguidance when making
data visualizations!
![Page 7: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/7.jpg)
InfoVis Theory
![Page 8: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/8.jpg)
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 9: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/9.jpg)
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 10: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/10.jpg)
Steven’s Power Law
![Page 11: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/11.jpg)
InfoVis Tools
![Page 12: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/12.jpg)
JavaScript InfoVis Toolkit
http://thejit.org/
![Page 13: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/13.jpg)
![Page 14: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/14.jpg)
JavaScript InfoVis Toolkit
http://thejit.org/
• The White House
• Mozilla
• The Guardian
• Al-Jazeera
A Hands-On Toolkit
![Page 15: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/15.jpg)
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/
![Page 16: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/16.jpg)
Examples
http://senchalabs.org/philogl/
![Page 17: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/17.jpg)
//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 */ } });
![Page 18: Data visualization for the web](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc2f5a4a79593b688b460e/html5/thumbnails/18.jpg)
More Examples
http://senchalabs.org/philogl/