SlideShare a Scribd company logo
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

What's hot

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
Jérémie Laval
 
JQuery
JQueryJQuery
JQuery
Rahul Jain
 
Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»
e-Legion
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
Sencha
 
Daniel Jalkut - dotSwift 2019
Daniel Jalkut - dotSwift 2019Daniel Jalkut - dotSwift 2019
Daniel Jalkut - dotSwift 2019
DanielJalkut
 
Epic South Disasters
Epic South DisastersEpic South Disasters
Epic South Disasters
Christopher Adams
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
Arshavski Alexander
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
philogb
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
Hjörtur Hilmarsson
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Remy Sharp
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
Remy Sharp
 
Using jQuery to Extend CSS
Using jQuery to Extend CSSUsing jQuery to Extend CSS
Using jQuery to Extend CSS
Chris Coyier
 
I phone勉強会 (2011.11.23)
I phone勉強会 (2011.11.23)I phone勉強会 (2011.11.23)
I phone勉強会 (2011.11.23)
Katsumi Kishikawa
 
What your testtool doesn't tell you
What your testtool doesn't tell youWhat your testtool doesn't tell you
What your testtool doesn't tell you
Annemarie Klaassen
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
Paul Bakaus
 
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
Eduardo Lundgren
 
Introducing AlloyUI DiagramBuilder
Introducing AlloyUI DiagramBuilderIntroducing AlloyUI DiagramBuilder
Introducing AlloyUI DiagramBuilder
Eduardo Lundgren
 

What's hot (20)

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 с человеческим лицом»
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
 
Daniel Jalkut - dotSwift 2019
Daniel Jalkut - dotSwift 2019Daniel Jalkut - dotSwift 2019
Daniel Jalkut - dotSwift 2019
 
Epic South Disasters
Epic South DisastersEpic South Disasters
Epic South Disasters
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
Using jQuery to Extend CSS
Using jQuery to Extend CSSUsing jQuery to Extend CSS
Using jQuery to Extend CSS
 
I phone勉強会 (2011.11.23)
I phone勉強会 (2011.11.23)I phone勉強会 (2011.11.23)
I phone勉強会 (2011.11.23)
 
What your testtool doesn't tell you
What your testtool doesn't tell youWhat your testtool doesn't tell you
What your testtool doesn't tell you
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
 
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
 
Introducing AlloyUI DiagramBuilder
Introducing AlloyUI DiagramBuilderIntroducing AlloyUI DiagramBuilder
Introducing AlloyUI DiagramBuilder
 

Similar to Svcc 2013-d3

SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
Oswald Campesato
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutes
Jos Dirksen
 
Visual Exploration of Large Data sets with D3, crossfilter and dc.js
Visual Exploration of Large Data sets with D3, crossfilter and dc.jsVisual Exploration of Large Data sets with D3, crossfilter and dc.js
Visual Exploration of Large Data sets with D3, crossfilter and dc.js
Florian Georg
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
OSCON Byrum
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
gerbille
 
Play vs Rails
Play vs RailsPlay vs Rails
Play vs Rails
Daniel Cukier
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
Doug Domeny
 
Having fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.jsHaving fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.js
Michael Hackstein
 
mobl
moblmobl
mobl
zefhemel
 
Visualization of Big Data in Web Apps
Visualization of Big Data in Web AppsVisualization of Big Data in Web Apps
Visualization of Big Data in Web Apps
EPAM
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
PL dream
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
Eb Styles
 
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map WidgetsESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
Allan Glen
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
bensmithett
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
Jonathan Snook
 

Similar to Svcc 2013-d3 (20)

SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutes
 
Visual Exploration of Large Data sets with D3, crossfilter and dc.js
Visual Exploration of Large Data sets with D3, crossfilter and dc.jsVisual Exploration of Large Data sets with D3, crossfilter and dc.js
Visual Exploration of Large Data sets with D3, crossfilter and dc.js
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 
Play vs Rails
Play vs RailsPlay vs Rails
Play vs Rails
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Having fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.jsHaving fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.js
 
mobl
moblmobl
mobl
 
Visualization of Big Data in Web Apps
Visualization of Big Data in Web AppsVisualization of Big Data in Web Apps
Visualization of Big Data in Web Apps
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map WidgetsESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Recently uploaded

Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 

Recently uploaded (20)

Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 

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