SlideShare a Scribd company logo

Svcc 2013-d3

•Download as PPTX, PDF•
•
Oswald Campesato
Oswald Campesato

This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses how D3 works, examples of basic charts like scatter plots and bar charts using D3, and how to incorporate features like mouse interactions, animations, filters and gradients. It also covers using D3 with technologies like Android, PhoneGap, and Google Glass to create mobile visualizations.

Related slideshows

Tips & Tricks to spice up your Android app
Tips & Tricks to spice up your Android appTips & Tricks to spice up your Android app
Tips & Tricks to spice up your Android app
 
JQuery
JQueryJQuery
JQuery
 
Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»
 
1 of 44
D3 for Data Visualization on Desktops, Smart Phones, and Google Glass SVCC (10/05/2013) Foothill College Los Altos Oswald Campesato oswald@swiftbot.com ocampesato@yahoo.com
Pace and Sequence of Topics This session moves quickly Focus is primarily on demos topics are discussed based on their relevance in demos (i.e., not necessarily sequential) Some code will be made available later
Our Hat for Work-Related Topics:
Our Hat for Fun-Related Topics:
How/Where do the Demos Work? All demos work on desktop/laptops: launched as HTML5 Web pages Demos created as Android apks work on: mobile phones, tablets, and Google Glass • Android apks can be created via: Eclipse/PhoneGap/Android Studio/other
What is D3? open source project (2010) Mike Bostock (principal/creator) based on JavaScript a layer of "abstraction" over SVG also support for HTML5 Canvas github.com/mbostock/d3 https://github.com/mbostock/d3/wiki/ Gallery
Why/When use D3? data visualization extremely versatile leverage JavaScript skills leverage SVG Create HTML5 Web pages with D3 and: HTML5 Canvas, CSS3, SVG, jQuery, …
What Can D3 Do? All the stuff you can do in SVG graphics/animation filters/gradients mouse/keyboard events custom charts/graphs Support for Ajax, JSON, XML, CSV files
How Does D3 Work? Creates SVG elements via JavaScript Often involves “method chaining”: svg.selectAll() .attr(a, “b”) .attr(c,”d”)… select-data-enter-append: "TMCIID3” ("The Most Common Idiom in D3”)
Simple D3 Example <head> <script src="d3.min.js"></script> <script> d3.select("body") .append("p") .text("Hello1 D3"); </script> <body> <p>Hello1 D3</p> </body>
Adding SVG: General Approach #1: create/append an <svg> element to <body> #2: often define JavaScript array(s) of values #3: iterate through arrays create SVG elements: use constants/variables/anonymous functions Optional: #4: add event listener(s) #5: add animation-related code
Creating a Circle in D3 (part 1) 1) First create an <svg> element: var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height",height);
Creating a Circle in D3 (part 2) 2) Include the following D3 code: svg.append("circle") .attr("cx", 10) .attr("cy", 10) .attr("r", 100) .attr("fill", "red") D3 code generates this SVG element: <body> <circle cx="10" cy="10” r="100" fill="red" /> </body>
A Scatter Chart (part 1) Step #1 define a JS array with data values: var dataXValues=[10, 50, 20, 80,150,180,220]; Step #2 Create an SVG element: var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height);
A Scatter Chart (part 2) Step 3 create and append circles: var circles = svg.selectAll("circles") .data(dataXValues) .enter() .append("circle") .attr("cx", function(d, i) { return (d*5*Math.random()); }) .attr("cy", function(d, i) { return (d*5*Math.random()); }) .attr("r", radius).style("fill", "red");
Using Arrays for all Circle Attributes var generalizedCircles = svg.selectAll("circles") .data(dataXValues).enter().append("circle") .attr("cx", function(d, i) { return d; }) .attr("cy", function(d, i) { return dataYValues[i]; }) .attr(”r", function(d, i) { return dataRValues[i]; }) .style (”fill", function(d, i) { return dataFValues[i];})
Using Arrays for Rectangle Attributes var generalizedRectangles = svg.selectAll(”rect") .data(dataXValues).enter().append(”rect") .attr(“x", function(d, i) { return dataXValues[i]; }) .attr(“y", function(d, i) { return dataYValues[i]; }) .attr(”width", function(d, i) { return dataWValues[i]; }) .attr(”height", function(d, i) { return dataHValues[i]; }) .style (”fill", function(d, i) { return dataFValues[i]; })
Mouse Handler for ScatterChart circles.on("mouseover",function() { d3.select(this) // the “mouseover” circle .transition() .duration(duration) .attr("transform", function() { var sx = 1+Math.random(); var sy = 1-Math.random(); return "scale("+sx+","+sy+")"; }) })
Examples of Transforms in D3 yourPreviouslyCreatedElement .attr("transform", "translate(50,100)") .attr("transform", "rotate(40)") .attr("transform", "scale(0.5,1.3)") .attr("transform", "skewX(20)")
Easing Functions (Animation Effects) Create an SVG element and append this code: .on("mouseover",function(){ .duration(1000) .delay(200) .ease("out-elastic",1,1) }) At least 10 easing functions available
Bar Charts in D3 Scale horizontal/vertical values Various label types (numeric/date) for axes Unicode support Add mouse events to „bar‟ elements
D3 and SVG Filters Define an SVG <filter> element (in <defs>): <defs> … <filter id="blurFilter1”> <feGaussianBlur "stdDeviation"=4> </feGaussianBlur> </filter> … </defs>
How to Define Filters in D3 var defs = svg.append("defs") defs.append("svg:filter") .attr("id", "blurFilter1") .append("svg:feGaussianBlur") .attr("stdDeviation", 4); The preceding code is equivalent to this code: <filter id="blurFilter1”> <feGaussianBlur "stdDeviation"=4 /> </filter>
D3 and SVG Linear Gradients Insert this code in an SVG <defs> element: <linearGradient id="GradientL" gradientUnits="userSpaceOnUse" cx="100" cy="50" r="160" fx="100" fy="50"> <stop offset="0%" stop-color="red"/> <stop offset="33%" stop-color="blue"/> <stop offset="67%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </linearGradient>
D3 Linear Gradients var gradientL = defsElement .append("svg:linearGradient") .attr("id", "GradientL") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "100%") .attr("gradientUnits", "userSpaceOnUs”) Append-stop-colors…
D3 and SVG <pattern> Elements Insert in the SVG <defs> element: <pattern id="checkerPattern" width="40" height="40" patternUnits="userSpaceOnUse”> <rect fill="url(#gradientDefinition1)" x="0" y="0" width="40" height="40"/> </pattern> D3 code for an SVG pattern: exercise
SVG and Maps  Election maps for presidential race:  ABC: Raphaël/SVG  Washington Post: Leaflet/SVG+HTML  Politico: Raphaël/SVG  NYT: Custom? Canvas/HTML  RealClearPolitics: Raphaël/SVG  FoxNews: Raphaël/SVG  MSNBC: Raphaël/SVG  Google: PolyGonzo/Canvas  HuffingtonPost: Raphaël/SVG  BBC: Raphaël/SVG
D3 APIs/Extensions/Plugins Choropleth Maps (stereographic projection/others) Force diagrams Extensions/plugins: RickShaw CS Extensions: Cubed
D3 and CSV Files Read data from a CSV file (1,000 rows) Each row represents a line segment Add a mouseover event listener Append line coordinates to a second array when users „mouse over‟ that segment Works fine for up to 4,000 rows
What about Large Datasets? Superconductor.js: DSL/JS/Web Workers Uses a <canvas> element “browser in a browser” Smoothly handles 100K data points • Druid (Metamarkets) • Weave/Yarn (Apache): layer over Hadoop • Kafka, Storm, and D3 (more recent)
D3 and Other Technologies D3 and BackboneJS in one Web page D3 and AngularJS in one Web Page Use D3 with HTML5 Web Sockets D3 with NodeJS (and Meteor)
D3 and CSS3 CSS3 2D transforms: rotate, scale, skew, translate, matrix, and perspective • CSS3 3D transforms: Similar to 2D versions (but no „skew‟) Also three axis-specific methods: rotateX, rotateY, rotateZ • More details in next session
Spherical Coordinates (1) x = w*cos(a); y = w*sin(a); (2) z = r*sin(b); (3) w = r*cos(b); Substitute (3) into (1) to get: (4) x = r*cos(b)*cos(a); (5) y = r*sin(b)*sin(a); (6) z = r*cos(b);
D3 and Android 1) Create an Android application Test 2) modify $TOP/res/layout/activity_main.xml: insert a WebView component 3) create $TOP/assets/www 4) copy TestD3.html into $TOP/assets/www 5) modify src/com/Test.java: reference TestD3.html in onCreate()
Contents of main.xml <?xml version="1.0" encoding="utf-8"?> <WebView  xmlns:android="http://….”  android:id="@+id/webview"  android:layout_width="fill_parent"  android:layout_height="fill_parent" />
Contents of onCreate() Method super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Your new code goes here: mWebView = (WebView) findViewById(R.id.webview); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setDomStorageEnabled(true); mWebView.loadUrl( "file:///android_asset/www/Test3D.html");
What is PhoneGap? A Plugin to create Hybrid Mobile apps Available on 6 platforms A JavaScript “bridge” Access to hardware (camera/etc) No compilation required No Java/Objective-C code Handles the manual steps for you Creates an index.html Web page
Why use PhoneGap? No compilation required No Java/Objective-C code Handles the manual steps for you Provides access to hardware (camera/etc)
D3 and Google Glass Create an Android apk in Eclipse Deploy to Glass: adb install D3Demo.apk • Find the package and main Android Activity: Let‟s call them “a.b.c” and “D3Main” * Launch from the command line: adb shell am start -a android.intent.action.MAIN -n a.b.c/.D3Demo
D3 Resources online forums (Google group) meetups in BA Stackoverflow code.google.come/p/d3-graphics
25 JavaScript Visualization Libraries http://www.ma-no.org/en/content/index_visualize-your- data-25-javascript-visualization-libraries_1796.php
Open Source Projects • Graphics Projects on http://code.google.com/p: + css3-graphics and html5-canvas-graphics + css3-jquery-graphics and d3-graphics + svg-graphics and svg-filters-graphics + easel-graphics, fabric-graphics, paper-graphics + ThreeJS, jQuery, Raphael, Google Go, Android + Dart, Dojo, JSF, Two.js, JavaFX 2.0 + Lua, PHP, Perl, Python, Ruby, SWT graphics
Some Training Topics • D3/SVG • HTML5 (CSS3/Canvas/etc) jQuery/jQuery Mobile Android (iOS later) BackboneJS/PhoneGap
Recent/Upcoming Books 1) HTML5 Canvas and CSS3 Graphics (2012) 2) jQuery, CSS3, and HTML5 for Mobile (2013) 3) HTML5 Pocket Primer (2013) 4) jQuery Pocket Primer (2013) 5) HTML5 Mobile Pocket Primer (2014) 6) D3 Pocket Primer (2014) • “WebGL: Up and Running” (Tony Parisi) Co-creator of VRML and X3D

More Related Content

Svcc 2013-d3

  • 1. D3 for Data Visualization on Desktops, Smart Phones, and Google Glass SVCC (10/05/2013) Foothill College Los Altos Oswald Campesato oswald@swiftbot.com ocampesato@yahoo.com
  • 2. Pace and Sequence of Topics This session moves quickly Focus is primarily on demos topics are discussed based on their relevance in demos (i.e., not necessarily sequential) Some code will be made available later
  • 3. Our Hat for Work-Related Topics:
  • 4. Our Hat for Fun-Related Topics:
  • 5. How/Where do the Demos Work? All demos work on desktop/laptops: launched as HTML5 Web pages Demos created as Android apks work on: mobile phones, tablets, and Google Glass • Android apks can be created via: Eclipse/PhoneGap/Android Studio/other
  • 6. What is D3? open source project (2010) Mike Bostock (principal/creator) based on JavaScript a layer of "abstraction" over SVG also support for HTML5 Canvas github.com/mbostock/d3 https://github.com/mbostock/d3/wiki/ Gallery
  • 7. Why/When use D3? data visualization extremely versatile leverage JavaScript skills leverage SVG Create HTML5 Web pages with D3 and: HTML5 Canvas, CSS3, SVG, jQuery, …
  • 8. What Can D3 Do? All the stuff you can do in SVG graphics/animation filters/gradients mouse/keyboard events custom charts/graphs Support for Ajax, JSON, XML, CSV files
  • 9. How Does D3 Work? Creates SVG elements via JavaScript Often involves “method chaining”: svg.selectAll() .attr(a, “b”) .attr(c,”d”)… select-data-enter-append: "TMCIID3” ("The Most Common Idiom in D3”)
  • 10. Simple D3 Example <head> <script src="d3.min.js"></script> <script> d3.select("body") .append("p") .text("Hello1 D3"); </script> <body> <p>Hello1 D3</p> </body>
  • 11. Adding SVG: General Approach #1: create/append an <svg> element to <body> #2: often define JavaScript array(s) of values #3: iterate through arrays create SVG elements: use constants/variables/anonymous functions Optional: #4: add event listener(s) #5: add animation-related code
  • 12. Creating a Circle in D3 (part 1) 1) First create an <svg> element: var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height",height);
  • 13. Creating a Circle in D3 (part 2) 2) Include the following D3 code: svg.append("circle") .attr("cx", 10) .attr("cy", 10) .attr("r", 100) .attr("fill", "red") D3 code generates this SVG element: <body> <circle cx="10" cy="10” r="100" fill="red" /> </body>
  • 14. A Scatter Chart (part 1) Step #1 define a JS array with data values: var dataXValues=[10, 50, 20, 80,150,180,220]; Step #2 Create an SVG element: var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height);
  • 15. A Scatter Chart (part 2) Step 3 create and append circles: var circles = svg.selectAll("circles") .data(dataXValues) .enter() .append("circle") .attr("cx", function(d, i) { return (d*5*Math.random()); }) .attr("cy", function(d, i) { return (d*5*Math.random()); }) .attr("r", radius).style("fill", "red");
  • 16. Using Arrays for all Circle Attributes var generalizedCircles = svg.selectAll("circles") .data(dataXValues).enter().append("circle") .attr("cx", function(d, i) { return d; }) .attr("cy", function(d, i) { return dataYValues[i]; }) .attr(”r", function(d, i) { return dataRValues[i]; }) .style (”fill", function(d, i) { return dataFValues[i];})
  • 17. Using Arrays for Rectangle Attributes var generalizedRectangles = svg.selectAll(”rect") .data(dataXValues).enter().append(”rect") .attr(“x", function(d, i) { return dataXValues[i]; }) .attr(“y", function(d, i) { return dataYValues[i]; }) .attr(”width", function(d, i) { return dataWValues[i]; }) .attr(”height", function(d, i) { return dataHValues[i]; }) .style (”fill", function(d, i) { return dataFValues[i]; })
  • 18. Mouse Handler for ScatterChart circles.on("mouseover",function() { d3.select(this) // the “mouseover” circle .transition() .duration(duration) .attr("transform", function() { var sx = 1+Math.random(); var sy = 1-Math.random(); return "scale("+sx+","+sy+")"; }) })
  • 19. Examples of Transforms in D3 yourPreviouslyCreatedElement .attr("transform", "translate(50,100)") .attr("transform", "rotate(40)") .attr("transform", "scale(0.5,1.3)") .attr("transform", "skewX(20)")
  • 20. Easing Functions (Animation Effects) Create an SVG element and append this code: .on("mouseover",function(){ .duration(1000) .delay(200) .ease("out-elastic",1,1) }) At least 10 easing functions available
  • 21. Bar Charts in D3 Scale horizontal/vertical values Various label types (numeric/date) for axes Unicode support Add mouse events to „bar‟ elements
  • 22. D3 and SVG Filters Define an SVG <filter> element (in <defs>): <defs> … <filter id="blurFilter1”> <feGaussianBlur "stdDeviation"=4> </feGaussianBlur> </filter> … </defs>
  • 23. How to Define Filters in D3 var defs = svg.append("defs") defs.append("svg:filter") .attr("id", "blurFilter1") .append("svg:feGaussianBlur") .attr("stdDeviation", 4); The preceding code is equivalent to this code: <filter id="blurFilter1”> <feGaussianBlur "stdDeviation"=4 /> </filter>
  • 24. D3 and SVG Linear Gradients Insert this code in an SVG <defs> element: <linearGradient id="GradientL" gradientUnits="userSpaceOnUse" cx="100" cy="50" r="160" fx="100" fy="50"> <stop offset="0%" stop-color="red"/> <stop offset="33%" stop-color="blue"/> <stop offset="67%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </linearGradient>
  • 25. D3 Linear Gradients var gradientL = defsElement .append("svg:linearGradient") .attr("id", "GradientL") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "100%") .attr("gradientUnits", "userSpaceOnUs”) Append-stop-colors…
  • 26. D3 and SVG <pattern> Elements Insert in the SVG <defs> element: <pattern id="checkerPattern" width="40" height="40" patternUnits="userSpaceOnUse”> <rect fill="url(#gradientDefinition1)" x="0" y="0" width="40" height="40"/> </pattern> D3 code for an SVG pattern: exercise
  • 27. SVG and Maps  Election maps for presidential race:  ABC: Raphaël/SVG  Washington Post: Leaflet/SVG+HTML  Politico: Raphaël/SVG  NYT: Custom? Canvas/HTML  RealClearPolitics: Raphaël/SVG  FoxNews: Raphaël/SVG  MSNBC: Raphaël/SVG  Google: PolyGonzo/Canvas  HuffingtonPost: Raphaël/SVG  BBC: Raphaël/SVG
  • 28. D3 APIs/Extensions/Plugins Choropleth Maps (stereographic projection/others) Force diagrams Extensions/plugins: RickShaw CS Extensions: Cubed
  • 29. D3 and CSV Files Read data from a CSV file (1,000 rows) Each row represents a line segment Add a mouseover event listener Append line coordinates to a second array when users „mouse over‟ that segment Works fine for up to 4,000 rows
  • 30. What about Large Datasets? Superconductor.js: DSL/JS/Web Workers Uses a <canvas> element “browser in a browser” Smoothly handles 100K data points • Druid (Metamarkets) • Weave/Yarn (Apache): layer over Hadoop • Kafka, Storm, and D3 (more recent)
  • 31. D3 and Other Technologies D3 and BackboneJS in one Web page D3 and AngularJS in one Web Page Use D3 with HTML5 Web Sockets D3 with NodeJS (and Meteor)
  • 32. D3 and CSS3 CSS3 2D transforms: rotate, scale, skew, translate, matrix, and perspective • CSS3 3D transforms: Similar to 2D versions (but no „skew‟) Also three axis-specific methods: rotateX, rotateY, rotateZ • More details in next session
  • 33. Spherical Coordinates (1) x = w*cos(a); y = w*sin(a); (2) z = r*sin(b); (3) w = r*cos(b); Substitute (3) into (1) to get: (4) x = r*cos(b)*cos(a); (5) y = r*sin(b)*sin(a); (6) z = r*cos(b);
  • 34. D3 and Android 1) Create an Android application Test 2) modify $TOP/res/layout/activity_main.xml: insert a WebView component 3) create $TOP/assets/www 4) copy TestD3.html into $TOP/assets/www 5) modify src/com/Test.java: reference TestD3.html in onCreate()
  • 35. Contents of main.xml <?xml version="1.0" encoding="utf-8"?> <WebView  xmlns:android="http://….”  android:id="@+id/webview"  android:layout_width="fill_parent"  android:layout_height="fill_parent" />
  • 36. Contents of onCreate() Method super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Your new code goes here: mWebView = (WebView) findViewById(R.id.webview); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setDomStorageEnabled(true); mWebView.loadUrl( "file:///android_asset/www/Test3D.html");
  • 37. What is PhoneGap? A Plugin to create Hybrid Mobile apps Available on 6 platforms A JavaScript “bridge” Access to hardware (camera/etc) No compilation required No Java/Objective-C code Handles the manual steps for you Creates an index.html Web page
  • 38. Why use PhoneGap? No compilation required No Java/Objective-C code Handles the manual steps for you Provides access to hardware (camera/etc)
  • 39. D3 and Google Glass Create an Android apk in Eclipse Deploy to Glass: adb install D3Demo.apk • Find the package and main Android Activity: Let‟s call them “a.b.c” and “D3Main” * Launch from the command line: adb shell am start -a android.intent.action.MAIN -n a.b.c/.D3Demo
  • 40. D3 Resources online forums (Google group) meetups in BA Stackoverflow code.google.come/p/d3-graphics
  • 41. 25 JavaScript Visualization Libraries http://www.ma-no.org/en/content/index_visualize-your- data-25-javascript-visualization-libraries_1796.php
  • 42. Open Source Projects • Graphics Projects on http://code.google.com/p: + css3-graphics and html5-canvas-graphics + css3-jquery-graphics and d3-graphics + svg-graphics and svg-filters-graphics + easel-graphics, fabric-graphics, paper-graphics + ThreeJS, jQuery, Raphael, Google Go, Android + Dart, Dojo, JSF, Two.js, JavaFX 2.0 + Lua, PHP, Perl, Python, Ruby, SWT graphics
  • 43. Some Training Topics • D3/SVG • HTML5 (CSS3/Canvas/etc) jQuery/jQuery Mobile Android (iOS later) BackboneJS/PhoneGap
  • 44. Recent/Upcoming Books 1) HTML5 Canvas and CSS3 Graphics (2012) 2) jQuery, CSS3, and HTML5 for Mobile (2013) 3) HTML5 Pocket Primer (2013) 4) jQuery Pocket Primer (2013) 5) HTML5 Mobile Pocket Primer (2014) 6) D3 Pocket Primer (2014) • “WebGL: Up and Running” (Tony Parisi) Co-creator of VRML and X3D