Data visualization for the web
3 likes2,772 views
This document provides guidance on data visualization for the web. It discusses using web standards to create data visualizations and introduces several JavaScript libraries for data visualization, including the JavaScript InfoVis Toolkit and PhiloGL. Examples of these libraries are shown and the document provides links to further examples on using them to create interactive data visualizations on the web.
![//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 */
}
});](https://image.slidesharecdn.com/datavisualizationfortheweb-120420225707-phpapp01/85/Data-visualization-for-the-web-17-320.jpg)
Data visualization for the web
- 1. Data Visualization for the Web @philogb - Stanford ACM Tech Talks
- 2. I use Web Standards to create Data Visualizations. @philogb
- 3. The Problem
- 5. @philogb - Stanford ACM Tech Talks
- 6. I wish I had some guidance when making data visualizations!
- 8. 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
- 9. Channel Ranking vs. Data Type Quantitative Ordinal Nominal Position Position Position Length Density Hue Angle Saturation Texture Slope Hue Connection Area Texture Containment Volume Connection Density Density Containment Saturation Saturation Length Shape Hue Angle Length Texture Slope Angle Connection Area Slope Containment Volume Area Shape Shape Volume Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009
- 11. InfoVis Tools
- 12. JavaScript InfoVis Toolkit http://thejit.org/
- 14. JavaScript InfoVis Toolkit A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera http://thejit.org/
- 15. PhiloGL • WebGL Powered Visualization Framework • Handles Big Datasets ( > 100K elems ) • Idiomatic JavaScript • Rich Module System http://senchalabs.org/philogl/ Model courtesy of Nicolas Kassis - McGill Univ.
- 17. //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 */ } });
- 18. More Examples http://senchalabs.org/philogl/