SlideShare una empresa de Scribd logo
1 de 38
Descargar para leer sin conexión
Zahid Mian
Part of the Brown-bag Series
 SVG
 Basic Shapes
 Paths
 Javascript vs. D3js
 Creating a Bar Graph
 Scaling
 What Next?
 SVG (ScalableVector Graphics)
 Scalable images
 Open standard
 Files saved as standard XML
 Need to have good command of Javascript
 D3js is a library written in javascript
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">
 D3js makes it easy to manipulate SVG
graphics
 D3 = Data Driven Documents
 Produce interactive visualizations (web)
 Has several libraries to help with creating
graphics
 Focus on the visualization part (not the code)
 Support for binding data
 Selections
 CSS-style selector to select DOM nodes
 Manipulations (append, remove, etc.)
 Transitions
 “smoothly” interpolate attributes of graphic, creating
an aesthetically pleasing visual
 Better than recreating each element
 Data-binding
 Use a dataset (json, csv, javascript arrays, etc.) to
allow D3 to create an object for each element
 Based on a coordinate system with (0,0) at
top left
 Basic shapes include
 Lines, Rectangles, Circles, and Polygons
 Paths allow highly customized polygons
 Using basic shapes to create interactive
charts like bar charts, area charts, pie charts
 More Advanced creations are possible
<body>
<svg width=400 height=520 >
<line x1=10 y1=50 x2= 300 y2= 200 stroke-width="10"
stroke="red" stroke-linecap="round"/>
<rect width=100 height=50 x=150 y=25 rx=40 ry=10 stroke-
width=2 stroke=steelblue fill=#888 fill-opacity=.5 />
<circle cx=62 cy=150 r=25 stroke-width=5 stroke=steelblue
fill=#888 />
<polygon points="60,250 10,420 115, 420" />
<path d="M 120 120, L 220 220, 420 120 Z" stroke="steelblue"
stroke-width="2" fill="lightyellow"></path>
</body>
d3.select("body") // select <body> tag
.append("svg") // add <svg> tag
.attr("width", "100") // width of svg, use default for height
.append("rect") // add <rect> element
.attr("width", 50) // set attribute of rect
.attr("height", 150) // set attribute of rect
.attr("x", 25) // move 25 px from left of svg
.attr("y", 25) // move 25 px from top of svg
.style("fill", "blue"); // add some style
d3.select("body") // select <body> tag
.append("svg") // add <svg> tag
.attr("width", "100")
.append("circle") // add <circle> element
.attr("cx", 50) // move center of circle 50 px from left of svg
.attr("cy", 50) // move center of circle 50 px from top of svg
.attr("r", 25) // radius of circle
.style("fill", "blue"); // add some style
//The data for our line; simply an array of x,y coordinates for each line segment
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60, "y": 40},
{ "x": 80, "y": 5}, { "x": 100, "y": 60}];
//This accessor function will use the x,y coordinates and create a path of points
var lineFunction = d3.svg.line() // we’ll revisit this later
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear"); // we’ll revisit this later
//The SVG Container
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData)) // concept of dynamic property; calls the lineFunction
defined above
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
Interpolate(“linear”)
Interpolate(“step-before”)
d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 100).append("text")
.text("hello world")
.attr("stroke", "blue")
.attr("stroke-width", 1)
.attr("x", 10)
.attr("y", 10)
.attr("transform","rotate(25)");
d3.select("body").append("svg")
.append("text")
.text("hello world")
.attr(
{stroke: "blue",
"stroke-width": "0.5",
x: 10,
y: 10,
transform: "rotate(25)"
});
Javascript shorthand for creating a bag of properties
d3.select("body")
.append("svg")
.attr("width", 350)
.attr("height", 220)
// add <polygon> element
.append("polygon")
.attr("points", "200,10 250,190 160,210")
.attr("fill", "green")
.attr("stroke", "red")
.attr("stroke-width", 3);
d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300)
.append("path")
.attr("d",
"M 100 350 Q 150 -300 300 0")
.attr("fill", "green") // add some style
.attr("stroke", "red")
.attr("stroke-width", 3);
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = ellipticalArc
Z = closepath
 D3.js includes a set of Path Data Generators helper
classes for generating SVG Path instructions.
 d3.svg.line - create a new line generator
 d3.svg.line.radial - create a new radial line generator
 d3.svg.area - create a new area generator
 d3.svg.area.radial - create a new radial area generator
 d3.svg.arc - create a new arc generator
 d3.svg.symbol - create a new symbol generator
 d3.svg.chord - create a new chord generator
 d3.svg.diagonal - create a new diagonal generator
 d3.svg.diagonal.radial - create a new radial diagonal
generator
var arc = d3.svg.arc() // What does this do?
.innerRadius(20)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI) ;
// Angles are specified in radians;
0 corresponds to 12 o’clock (negative y)
and proceeds clockwise, repeating at 2π
var chart =
d3.select("body").append("svg:svg")
.attr("width", 200)
.attr("height", 250).append("svg:g")
.attr("transform", "translate(50,150)") ;
chart.append("svg:path")
.attr("fill", "green")
.attr("d", arc) ;
endAngle(Math.PI)
endAngle(0.5* Math.PI)
 Where are we?
 We know about SVG shapes
 We know a little bit about D3js
 We can create different shapes using D3js syntax
 What haven’t we done?
 No Data examples
 No interactive examples (can’t show much in ppt)
var data = [
{x: 5, y: 15, w: 10, h:25},
{x: 20, y: 5, w: 10, h:35},
{x: 35, y: 20, w: 10, h:20}
];
var svg = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 60);
var grp = svg.append("g").selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr({
x: function(d){ return d.x;},
y: function(d){ return d.y;},
width: function(d){return d.w;},
height: function(d) {return d.h;},
fill: "#95B3D7"
});
var data = [
{x: 5, y: 15, w: 10, h:25},
{x: 20, y: 5, w: 10, h:35},
{x: 35, y: 20, w: 10, h:20}
];
var svg =
document.createElementNS("http://www.w3.org
/2000/svg", "svg");
svg.setAttribute("width", 100);
svg.setAttribute("height", 60);
var svgNS = svg.namespaceURI;
for(var z =0; z<data.length; z++){
var rect =
document.createElementNS(svgNS,'rect');
rect.setAttribute('x',data[z].x);
rect.setAttribute('y',data[z].y);
rect.setAttribute('width',data[z].w);
rect.setAttribute('height',data[z].h);
rect.setAttribute('fill','#95B3D7');
svg.appendChild(rect);
}
document.body.appendChild(svg);
D3Way (no looping) Javascript
 Greater flexibility with more complex data
 Handles binding automatically
 Easier transitions
 grp.attr("transform", "translate(20,20)");
 Moves the entire group 20x20
 A little tough to understand at first
 Makes sense after reviewing examples
 General Pattern:
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42]) // array of numbers
.text(String);
// Enter… this will be called for each data element
p.enter().append("p")
.text(String);
// Exit…
p.exit().remove();
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
// join “p” with data items
.text(function(d){
console.log(d);
return (d*d).toString();
});
 Notice we can call a function
to get the data element
 Since there are no “p” tags in
the body, nothing is displayed
 No log information is created
<body>
</body>
html output
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d){
console.log(d);
return d.toString();});
p.enter().append("p")
.text(function(d) {
console.log ("value of d is: " + d.toString());
return (d*2).toString();});
 Notice the console output (original
values) and the eventual data that’s
rendered (value doubled)
 Essentially, create a “p” tag for each
data element
<body>
<p>8</p><p>16</p><p>30</p>
<p>32</p><p>46</p><p>84</p>
</body>
console.log output
html output
This time the html body tag has
some <p> tags defined like this:
<body>
<p>this is p1</p>
<p>this is p2</p>
<p>this is p3</p>
</body>
Here’s the D3 “update” code:
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d){
console.log("d in update:" + d.toString());
return d.toString();
});
Notice the original <p> text has
been replaced
<body>
<p>4</p>
<p>8</p>
<p>15</p>
</body>
html output
console.log output
The html body tag has some
<p> tags defined like this:
<body>
<p>this is p1</p>
<p>this is p2</p>
<p>this is p3</p>
</body>
Here’s the D3 Enter code:
p.enter().append("p")
.text(function(d) {
console.log ("value of d is: " + d.toString());
return (d*2).toString();});
Notice the last three <p> tags
have the doubled value
<body>
<p>4</p>
<p>8</p>
<p>15</p>
<p>32</p>
<p>46</p>
<p>84</p>
</body>
html output
console.log output
var data = [4, 8, 15, 16, 23, 42];
function createSomething(){
var p = d3.select("body").selectAll("p")
.data(data)
.text(function(d){
console.log("d in update:" + d.toString());
return d.toString();});
p.enter().append("p")
.text(function(d) {
console.log ("value of d is: " + d.toString());
return (d*2).toString();})
// attach click event to remove an element
.on("click", function(d, i){
console.log(“onclick d, i: “ + d + “, “ + i);
data.splice(d, 1); // let’s remove a value
from data
createSomething();
});
// Exit ...
p.exit().remove();
}
createSomething();
Clicked on 46.What happened
to 32 and 84?
From the
“update”
From the
Enter
selection
The
onclick
removed
an item
from the
array
When data is updated (removed), one
of the <p> is also removed. Notice
that the values are not doubled.
That’s because the update selection
was executed, not Enter. The log
output confirms that.
// what would happened if we added an element ???
var data = [4, 8, 15, 16, 23, 42];
function createSomething(){
var p = d3.select("body").selectAll("p")
.data(data)
.text(function(d){
console.log("d in update:" + d.toString());
return d.toString();});
p.enter().append("p")
.text(function(d) {
console.log ("value of d is: " + d.toString());
return (d*2).toString();})
.on("click", function(){
console.log(“addding 10 to data“);
// add the number 10 to the top of array
d.splice(0,0, 10);
createSomething();
});
// Exit ...
p.exit().remove();
}
createSomething();
Notice that the new value was joined
with the first <p>; the first 6 <p> were
updated, and the 7th was inserted
(that’s why it has the double value)Clicked on 46.What happened
to 32?
// what would happened if we added an
element ???
var data = [4, 8, 15, 16, 23, 42];
function createSomething(){
var p = d3.select("body").selectAll("p")
.data(data)
.text(function(d){
console.log("d in update:" + d.toString());
return d.toString();});
p.enter().append("p")
.text(function(d) {
console.log ("value of d is: " + d.toString());
return (d*2).toString();})
.on("click", function(){
console.log(“addding 10 to data“);
// add the number 10 to the bottom of array
d.splice(4,0, 10);
createSomething();
});
// Exit ...
p.exit().remove();
}
createSomething();
What will be displayed
when you click on 46?
Look at the log output.
 Understanding the Update, Enter, Exit
selections is critical
 Now we know about SVG graphicsAND
 D3 Scripting (a little bit) AND
 Selections
 So now you are only bound by your
imagination (and a bit of geometry)
 A Bar chart is simply a set of rectangles
 Let’s use D3 to create some rectangles
 Here’s something that looks like a bar chart
with 5 rectangles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="http://d3js.org/d3.v3.min.js"></script>
<script>
<!– on right side -->
</script>
</head>
<body>
</body>
</html>
var w = 300;
var h = 100;
var padding = 2;
var data = [15, 10, 50, 20, 25];
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect") // select all rect
.data(data) // our data
.enter() // cross your fingers
.append("rect") // it will append rect
.attr("x", function(d,i) {
return i*(w/dataset.length);
}) // set x … d is data and i is index of data
.attr("y", function(d, i){
return h-(d);
}) // set y … remember y start in top-left corner
.attr("width", w/dataset.length - padding)
.attr("height", function(d) {
return d;
});
var w = 300;
var h = 200;
var padding = 2;
var dataset = [15, 10, 45, 20, 25];
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
function getColor(v) {
if (v<=20) {return "#666666"; }
else if(v<40) {return "#FF5010";}
else {return "#FF0000";}
}
svg.selectAll("rect") // select all rect
.data(dataset) // our data
.enter() // will append if doesn't exist
.append("rect") // it will append rect
.attr("x", function(d,i) {
return i*(w/dataset.length);
})
.attr("y", function(d, i){
return h-(d*4);
})
.attr("width", w/dataset.length - padding)
.attr("height", function(d) {
return d*4;
})
.attr("fill", function(d) {return getColor(d);});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {return d;})
.attr({
"text-anchor": "middle",
x: function(d,i){
return i*(w/dataset.length)+(w/dataset.length - padding) /2;
},
y: function(d) {return h-(d*4)+14;}, // drop it inside the bar
"font-family": "sans-serif",
"font-size": 12,
"fill": "#ffffff"
});
var w = 300, //width
h = 300, //height
r = 100, //radius
color = d3.scale.category20c(); //builtin range of colors
data = [{
"label": "one",
"value": 20
}, {
"label": "two",
"value": 50
}, {
"label": "three",
"value": 30
}];
var vis = d3.select("body")
.append("svg:svg") //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")"); //move the center of the pie chart from 0, 0 to radius,
radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) {
return d.value;
}); //we must tell it out to access the value of each element in our data array

var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and
value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a
selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element
associated with each slice)
.attr("class", "slice"); //allow us to style things in the slices (like text)
arcs.append("svg:path")
.attr("fill", function(d, i) {
return color(i);
}) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing
function
arcs.append("svg:text") //add a label to each slice
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
})
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) {
return data[i].label;
}); //get the label from our original data array
 Scaling is important for creatingAxis
 Can also be used to resize graphics
 Use d3.scale.linear() to create scale
var scale = d3.scale.linear()
.domain([130,350]) // min/max
.range([10,100]); // output range;
// now use the scale object to get scaled value
console.log(scale(130)); // 10
console.log(scale(350)); // 100
console.log(scale(300)); // 79.54
console.log(scale(150)); // 18.18
 Transitions deal with animation; Not possible
to show in a presentation (see demos later)
 A little ironic that we can’t show transitions in ppt
 Very Powerful feature of D3
 A very simply transition:
d3.select("body") .style("color", "green") // make the body green
.transition() .style("color", "red"); // then transition to red
 https://www.youtube.com/watch?v=vLk7mlAtEXI
 http://bl.ocks.org/mbostock/3943967
http://bl.ocks.org/mbostock/32bd93b1cc0fbccc9bf9
Introduction to d3js (and SVG)
 https://github.com/mbostock/d3/wiki/Gallery
 Source code available for all examples
 Copy source and play with it in a javascript
environment (jsfiddle.net, jsbin.com, etc.)
 Use debugger and console.log liberally to
better understand what’s happening
 Debugging in javascript
 Examples from today
 Examples from NYTimes.com
 Examples from around the Internet
Introduction to d3js (and SVG)

Más contenido relacionado

La actualidad más candente

Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutesJos Dirksen
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic TutorialTao Jiang
 
Introduction to data visualisations with d3.js — Data Driven Documents
Introduction to data visualisations with d3.js — Data Driven DocumentsIntroduction to data visualisations with d3.js — Data Driven Documents
Introduction to data visualisations with d3.js — Data Driven DocumentsMichał Oniszczuk
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)Oleksii Prohonnyi
 
A Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js TutorialA Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js TutorialYoung-Ho Kim
 
D3.js: Data Visualization for the Web
D3.js: Data Visualization for the Web D3.js: Data Visualization for the Web
D3.js: Data Visualization for the Web Outliers Collective
 
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.jsFlorian Georg
 
Time Series Analysis by JavaScript LL matsuri 2013
Time Series Analysis by JavaScript LL matsuri 2013 Time Series Analysis by JavaScript LL matsuri 2013
Time Series Analysis by JavaScript LL matsuri 2013 Daichi Morifuji
 
D3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand wordsD3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand wordsApptension
 
The Ring programming language version 1.5 book - Part 8 of 31
The Ring programming language version 1.5 book - Part 8 of 31The Ring programming language version 1.5 book - Part 8 of 31
The Ring programming language version 1.5 book - Part 8 of 31Mahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196Mahmoud Samir Fayed
 
GreenDao Introduction
GreenDao IntroductionGreenDao Introduction
GreenDao IntroductionBooch Lin
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 CanvasMindy McAdams
 
Groovy collection api
Groovy collection apiGroovy collection api
Groovy collection apitrygvea
 

La actualidad más candente (20)

D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
Utahjs D3
Utahjs D3Utahjs D3
Utahjs D3
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutes
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic Tutorial
 
D3
D3D3
D3
 
Introduction to data visualisations with d3.js — Data Driven Documents
Introduction to data visualisations with d3.js — Data Driven DocumentsIntroduction to data visualisations with d3.js — Data Driven Documents
Introduction to data visualisations with d3.js — Data Driven Documents
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
 
A Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js TutorialA Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js Tutorial
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
Introduction to D3
Introduction to D3 Introduction to D3
Introduction to D3
 
D3.js: Data Visualization for the Web
D3.js: Data Visualization for the Web D3.js: Data Visualization for the Web
D3.js: Data Visualization for the Web
 
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
 
Time Series Analysis by JavaScript LL matsuri 2013
Time Series Analysis by JavaScript LL matsuri 2013 Time Series Analysis by JavaScript LL matsuri 2013
Time Series Analysis by JavaScript LL matsuri 2013
 
D3 js
D3 jsD3 js
D3 js
 
D3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand wordsD3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand words
 
The Ring programming language version 1.5 book - Part 8 of 31
The Ring programming language version 1.5 book - Part 8 of 31The Ring programming language version 1.5 book - Part 8 of 31
The Ring programming language version 1.5 book - Part 8 of 31
 
The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196
 
GreenDao Introduction
GreenDao IntroductionGreenDao Introduction
GreenDao Introduction
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Groovy collection api
Groovy collection apiGroovy collection api
Groovy collection api
 

Destacado

A short introduction of D3js
A short introduction of D3jsA short introduction of D3js
A short introduction of D3jsdreampuf
 
Advanced D3 Charting
Advanced D3 ChartingAdvanced D3 Charting
Advanced D3 Chartingdcryan
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
Data visualization with d3 may19
Data visualization with d3 may19Data visualization with d3 may19
Data visualization with d3 may19Michael Posso
 
Irelands Inspiration For Tomorrow
Irelands Inspiration For TomorrowIrelands Inspiration For Tomorrow
Irelands Inspiration For TomorrowMichael Browne
 
HTML5 and SVG
HTML5 and SVGHTML5 and SVG
HTML5 and SVGyarcub
 
Examples of D3 Visualizations
Examples of D3 VisualizationsExamples of D3 Visualizations
Examples of D3 VisualizationsMD AMAN KHAN
 
Philly TUG - Best of Tableau Web Nov. 2015
Philly TUG - Best of Tableau Web Nov. 2015Philly TUG - Best of Tableau Web Nov. 2015
Philly TUG - Best of Tableau Web Nov. 2015Joshua Tapley
 
Fun with D3.js: Data Visualization Eye Candy with Streaming JSON
Fun with D3.js: Data Visualization Eye Candy with Streaming JSONFun with D3.js: Data Visualization Eye Candy with Streaming JSON
Fun with D3.js: Data Visualization Eye Candy with Streaming JSONTomomi Imura
 
Tableau Best Practices for OBIEE
Tableau Best Practices for OBIEETableau Best Practices for OBIEE
Tableau Best Practices for OBIEEBI Connector
 
D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015Brian Coffey
 
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau -  Data, Graphs, Filters, Dashboards and Advanced featuresLearning Tableau -  Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced featuresVenkata Reddy Konasani
 
25 Employee Engagement Ideas
25 Employee Engagement Ideas25 Employee Engagement Ideas
25 Employee Engagement IdeasHppy
 
15 Employee Engagement activities that you can start doing now
15 Employee Engagement activities that you can start doing now15 Employee Engagement activities that you can start doing now
15 Employee Engagement activities that you can start doing nowHppy
 
Tableau presentation
Tableau presentationTableau presentation
Tableau presentationkt166212
 

Destacado (20)

A short introduction of D3js
A short introduction of D3jsA short introduction of D3js
A short introduction of D3js
 
Advanced D3 Charting
Advanced D3 ChartingAdvanced D3 Charting
Advanced D3 Charting
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Data visualization with d3 may19
Data visualization with d3 may19Data visualization with d3 may19
Data visualization with d3 may19
 
Irelands Inspiration For Tomorrow
Irelands Inspiration For TomorrowIrelands Inspiration For Tomorrow
Irelands Inspiration For Tomorrow
 
HTML5 and SVG
HTML5 and SVGHTML5 and SVG
HTML5 and SVG
 
Java fundamentals
Java fundamentalsJava fundamentals
Java fundamentals
 
Examples of D3 Visualizations
Examples of D3 VisualizationsExamples of D3 Visualizations
Examples of D3 Visualizations
 
Philly TUG - Best of Tableau Web Nov. 2015
Philly TUG - Best of Tableau Web Nov. 2015Philly TUG - Best of Tableau Web Nov. 2015
Philly TUG - Best of Tableau Web Nov. 2015
 
d3Kit
d3Kitd3Kit
d3Kit
 
Fun with D3.js: Data Visualization Eye Candy with Streaming JSON
Fun with D3.js: Data Visualization Eye Candy with Streaming JSONFun with D3.js: Data Visualization Eye Candy with Streaming JSON
Fun with D3.js: Data Visualization Eye Candy with Streaming JSON
 
Tableau Best Practices for OBIEE
Tableau Best Practices for OBIEETableau Best Practices for OBIEE
Tableau Best Practices for OBIEE
 
Android Booting Scenarios
Android Booting ScenariosAndroid Booting Scenarios
Android Booting Scenarios
 
D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015
 
Self Motivation
 Self Motivation Self Motivation
Self Motivation
 
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau -  Data, Graphs, Filters, Dashboards and Advanced featuresLearning Tableau -  Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
 
25 Employee Engagement Ideas
25 Employee Engagement Ideas25 Employee Engagement Ideas
25 Employee Engagement Ideas
 
15 Employee Engagement activities that you can start doing now
15 Employee Engagement activities that you can start doing now15 Employee Engagement activities that you can start doing now
15 Employee Engagement activities that you can start doing now
 
Tableau presentation
Tableau presentationTableau presentation
Tableau presentation
 
Employee Engagement
Employee EngagementEmployee Engagement
Employee Engagement
 

Similar a Introduction to d3js (and SVG)

Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tddMarcos Iglesias
 
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.jsMichael Hackstein
 
The Ring programming language version 1.5.3 book - Part 52 of 184
The Ring programming language version 1.5.3 book - Part 52 of 184The Ring programming language version 1.5.3 book - Part 52 of 184
The Ring programming language version 1.5.3 book - Part 52 of 184Mahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 42 of 184
The Ring programming language version 1.5.3 book - Part 42 of 184The Ring programming language version 1.5.3 book - Part 42 of 184
The Ring programming language version 1.5.3 book - Part 42 of 184Mahmoud Samir Fayed
 
The Ring programming language version 1.8 book - Part 48 of 202
The Ring programming language version 1.8 book - Part 48 of 202The Ring programming language version 1.8 book - Part 48 of 202
The Ring programming language version 1.8 book - Part 48 of 202Mahmoud Samir Fayed
 
The Ring programming language version 1.10 book - Part 52 of 212
The Ring programming language version 1.10 book - Part 52 of 212The Ring programming language version 1.10 book - Part 52 of 212
The Ring programming language version 1.10 book - Part 52 of 212Mahmoud Samir Fayed
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityEb Styles
 
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 AppsEPAM
 
The Ring programming language version 1.8 book - Part 50 of 202
The Ring programming language version 1.8 book - Part 50 of 202The Ring programming language version 1.8 book - Part 50 of 202
The Ring programming language version 1.8 book - Part 50 of 202Mahmoud Samir Fayed
 
The Ring programming language version 1.9 book - Part 51 of 210
The Ring programming language version 1.9 book - Part 51 of 210The Ring programming language version 1.9 book - Part 51 of 210
The Ring programming language version 1.9 book - Part 51 of 210Mahmoud Samir Fayed
 
The Ring programming language version 1.4.1 book - Part 12 of 31
The Ring programming language version 1.4.1 book - Part 12 of 31The Ring programming language version 1.4.1 book - Part 12 of 31
The Ring programming language version 1.4.1 book - Part 12 of 31Mahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 44 of 184
The Ring programming language version 1.5.3 book - Part 44 of 184The Ring programming language version 1.5.3 book - Part 44 of 184
The Ring programming language version 1.5.3 book - Part 44 of 184Mahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 54 of 184
The Ring programming language version 1.5.3 book - Part 54 of 184The Ring programming language version 1.5.3 book - Part 54 of 184
The Ring programming language version 1.5.3 book - Part 54 of 184Mahmoud Samir Fayed
 
The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180Mahmoud Samir Fayed
 

Similar a Introduction to d3js (and SVG) (20)

Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tdd
 
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
 
The Ring programming language version 1.5.3 book - Part 52 of 184
The Ring programming language version 1.5.3 book - Part 52 of 184The Ring programming language version 1.5.3 book - Part 52 of 184
The Ring programming language version 1.5.3 book - Part 52 of 184
 
The Ring programming language version 1.5.3 book - Part 42 of 184
The Ring programming language version 1.5.3 book - Part 42 of 184The Ring programming language version 1.5.3 book - Part 42 of 184
The Ring programming language version 1.5.3 book - Part 42 of 184
 
The Ring programming language version 1.8 book - Part 48 of 202
The Ring programming language version 1.8 book - Part 48 of 202The Ring programming language version 1.8 book - Part 48 of 202
The Ring programming language version 1.8 book - Part 48 of 202
 
The Ring programming language version 1.10 book - Part 52 of 212
The Ring programming language version 1.10 book - Part 52 of 212The Ring programming language version 1.10 book - Part 52 of 212
The Ring programming language version 1.10 book - Part 52 of 212
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Introduction to R
Introduction to RIntroduction to R
Introduction to R
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
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
 
SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
Supstat nyc subway
Supstat nyc subwaySupstat nyc subway
Supstat nyc subway
 
The Ring programming language version 1.8 book - Part 50 of 202
The Ring programming language version 1.8 book - Part 50 of 202The Ring programming language version 1.8 book - Part 50 of 202
The Ring programming language version 1.8 book - Part 50 of 202
 
The Ring programming language version 1.9 book - Part 51 of 210
The Ring programming language version 1.9 book - Part 51 of 210The Ring programming language version 1.9 book - Part 51 of 210
The Ring programming language version 1.9 book - Part 51 of 210
 
The Ring programming language version 1.4.1 book - Part 12 of 31
The Ring programming language version 1.4.1 book - Part 12 of 31The Ring programming language version 1.4.1 book - Part 12 of 31
The Ring programming language version 1.4.1 book - Part 12 of 31
 
The Ring programming language version 1.5.3 book - Part 44 of 184
The Ring programming language version 1.5.3 book - Part 44 of 184The Ring programming language version 1.5.3 book - Part 44 of 184
The Ring programming language version 1.5.3 book - Part 44 of 184
 
The Ring programming language version 1.5.3 book - Part 54 of 184
The Ring programming language version 1.5.3 book - Part 54 of 184The Ring programming language version 1.5.3 book - Part 54 of 184
The Ring programming language version 1.5.3 book - Part 54 of 184
 
The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180
 

Más de zahid-mian

Mongodb Aggregation Pipeline
Mongodb Aggregation PipelineMongodb Aggregation Pipeline
Mongodb Aggregation Pipelinezahid-mian
 
MongoD Essentials
MongoD EssentialsMongoD Essentials
MongoD Essentialszahid-mian
 
Hadoop Technologies
Hadoop TechnologiesHadoop Technologies
Hadoop Technologieszahid-mian
 
Intro to modern cryptography
Intro to modern cryptographyIntro to modern cryptography
Intro to modern cryptographyzahid-mian
 
Hadoop M/R Pig Hive
Hadoop M/R Pig HiveHadoop M/R Pig Hive
Hadoop M/R Pig Hivezahid-mian
 
NoSQL Databases
NoSQL DatabasesNoSQL Databases
NoSQL Databaseszahid-mian
 
Statistics101: Numerical Measures
Statistics101: Numerical MeasuresStatistics101: Numerical Measures
Statistics101: Numerical Measureszahid-mian
 
Amazon SimpleDB
Amazon SimpleDBAmazon SimpleDB
Amazon SimpleDBzahid-mian
 
C# 6 New Features
C# 6 New FeaturesC# 6 New Features
C# 6 New Featureszahid-mian
 

Más de zahid-mian (9)

Mongodb Aggregation Pipeline
Mongodb Aggregation PipelineMongodb Aggregation Pipeline
Mongodb Aggregation Pipeline
 
MongoD Essentials
MongoD EssentialsMongoD Essentials
MongoD Essentials
 
Hadoop Technologies
Hadoop TechnologiesHadoop Technologies
Hadoop Technologies
 
Intro to modern cryptography
Intro to modern cryptographyIntro to modern cryptography
Intro to modern cryptography
 
Hadoop M/R Pig Hive
Hadoop M/R Pig HiveHadoop M/R Pig Hive
Hadoop M/R Pig Hive
 
NoSQL Databases
NoSQL DatabasesNoSQL Databases
NoSQL Databases
 
Statistics101: Numerical Measures
Statistics101: Numerical MeasuresStatistics101: Numerical Measures
Statistics101: Numerical Measures
 
Amazon SimpleDB
Amazon SimpleDBAmazon SimpleDB
Amazon SimpleDB
 
C# 6 New Features
C# 6 New FeaturesC# 6 New Features
C# 6 New Features
 

Último

STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptxSTOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptxFurkanTasci3
 
Elements of language learning - an analysis of how different elements of lang...
Elements of language learning - an analysis of how different elements of lang...Elements of language learning - an analysis of how different elements of lang...
Elements of language learning - an analysis of how different elements of lang...PrithaVashisht1
 
The market for cross-border mortgages in Europe
The market for cross-border mortgages in EuropeThe market for cross-border mortgages in Europe
The market for cross-border mortgages in Europe321k
 
Empowering Decisions A Guide to Embedded Analytics
Empowering Decisions A Guide to Embedded AnalyticsEmpowering Decisions A Guide to Embedded Analytics
Empowering Decisions A Guide to Embedded AnalyticsGain Insights
 
Stochastic Dynamic Programming and You.pptx
Stochastic Dynamic Programming and You.pptxStochastic Dynamic Programming and You.pptx
Stochastic Dynamic Programming and You.pptxjkmrshll88
 
Báo cáo Social Media Benchmark 2024 cho dân Marketing
Báo cáo Social Media Benchmark 2024 cho dân MarketingBáo cáo Social Media Benchmark 2024 cho dân Marketing
Báo cáo Social Media Benchmark 2024 cho dân MarketingMarketingTrips
 
Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...
Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...
Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...Neo4j
 
Paul Martin (Gartner) - Show Me the AI Money.pdf
Paul Martin (Gartner) - Show Me the AI Money.pdfPaul Martin (Gartner) - Show Me the AI Money.pdf
Paul Martin (Gartner) - Show Me the AI Money.pdfdcphostmaster
 
PPT for Presiding Officer.pptxvvdffdfgggg
PPT for Presiding Officer.pptxvvdffdfggggPPT for Presiding Officer.pptxvvdffdfgggg
PPT for Presiding Officer.pptxvvdffdfggggbhadratanusenapati1
 
STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptxSTOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptxFurkanTasci3
 
Data Collection from Social Media Platforms
Data Collection from Social Media PlatformsData Collection from Social Media Platforms
Data Collection from Social Media PlatformsMahmoud Yasser
 
2024 Build Generative AI for Non-Profits
2024 Build Generative AI for Non-Profits2024 Build Generative AI for Non-Profits
2024 Build Generative AI for Non-ProfitsTimothy Spann
 
Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...
Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...
Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...ferisulianta.com
 
Using DAX & Time-based Analysis in Data Warehouse
Using DAX & Time-based Analysis in Data WarehouseUsing DAX & Time-based Analysis in Data Warehouse
Using DAX & Time-based Analysis in Data WarehouseThinkInnovation
 
Understanding the Impact of video length on student performance
Understanding the Impact of video length on student performanceUnderstanding the Impact of video length on student performance
Understanding the Impact of video length on student performancePrithaVashisht1
 
Neo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdf
Neo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdfNeo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdf
Neo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdfNeo4j
 
Brain Tumor Detection with Machine Learning.pptx
Brain Tumor Detection with Machine Learning.pptxBrain Tumor Detection with Machine Learning.pptx
Brain Tumor Detection with Machine Learning.pptxShammiRai3
 
Air Con Energy Rating Info411 Presentation.pdf
Air Con Energy Rating Info411 Presentation.pdfAir Con Energy Rating Info411 Presentation.pdf
Air Con Energy Rating Info411 Presentation.pdfJasonBoboKyaw
 
Microeconomic Group Presentation Apple.pdf
Microeconomic Group Presentation Apple.pdfMicroeconomic Group Presentation Apple.pdf
Microeconomic Group Presentation Apple.pdfmxlos0
 

Último (20)

STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptxSTOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptx
 
Elements of language learning - an analysis of how different elements of lang...
Elements of language learning - an analysis of how different elements of lang...Elements of language learning - an analysis of how different elements of lang...
Elements of language learning - an analysis of how different elements of lang...
 
The market for cross-border mortgages in Europe
The market for cross-border mortgages in EuropeThe market for cross-border mortgages in Europe
The market for cross-border mortgages in Europe
 
Target_Company_Data_breach_2013_110million
Target_Company_Data_breach_2013_110millionTarget_Company_Data_breach_2013_110million
Target_Company_Data_breach_2013_110million
 
Empowering Decisions A Guide to Embedded Analytics
Empowering Decisions A Guide to Embedded AnalyticsEmpowering Decisions A Guide to Embedded Analytics
Empowering Decisions A Guide to Embedded Analytics
 
Stochastic Dynamic Programming and You.pptx
Stochastic Dynamic Programming and You.pptxStochastic Dynamic Programming and You.pptx
Stochastic Dynamic Programming and You.pptx
 
Báo cáo Social Media Benchmark 2024 cho dân Marketing
Báo cáo Social Media Benchmark 2024 cho dân MarketingBáo cáo Social Media Benchmark 2024 cho dân Marketing
Báo cáo Social Media Benchmark 2024 cho dân Marketing
 
Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...
Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...
Deloitte+RedCross_Talk to your data with Knowledge-enriched Generative AI.ppt...
 
Paul Martin (Gartner) - Show Me the AI Money.pdf
Paul Martin (Gartner) - Show Me the AI Money.pdfPaul Martin (Gartner) - Show Me the AI Money.pdf
Paul Martin (Gartner) - Show Me the AI Money.pdf
 
PPT for Presiding Officer.pptxvvdffdfgggg
PPT for Presiding Officer.pptxvvdffdfggggPPT for Presiding Officer.pptxvvdffdfgggg
PPT for Presiding Officer.pptxvvdffdfgggg
 
STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptxSTOCK PRICE ANALYSIS  Furkan Ali TASCI --.pptx
STOCK PRICE ANALYSIS Furkan Ali TASCI --.pptx
 
Data Collection from Social Media Platforms
Data Collection from Social Media PlatformsData Collection from Social Media Platforms
Data Collection from Social Media Platforms
 
2024 Build Generative AI for Non-Profits
2024 Build Generative AI for Non-Profits2024 Build Generative AI for Non-Profits
2024 Build Generative AI for Non-Profits
 
Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...
Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...
Prediction Of Cryptocurrency Prices Using Lstm, Svm And Polynomial Regression...
 
Using DAX & Time-based Analysis in Data Warehouse
Using DAX & Time-based Analysis in Data WarehouseUsing DAX & Time-based Analysis in Data Warehouse
Using DAX & Time-based Analysis in Data Warehouse
 
Understanding the Impact of video length on student performance
Understanding the Impact of video length on student performanceUnderstanding the Impact of video length on student performance
Understanding the Impact of video length on student performance
 
Neo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdf
Neo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdfNeo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdf
Neo4j Graph Summit 2024 Workshop - EMEA - Breda_and_Munchen.pdf
 
Brain Tumor Detection with Machine Learning.pptx
Brain Tumor Detection with Machine Learning.pptxBrain Tumor Detection with Machine Learning.pptx
Brain Tumor Detection with Machine Learning.pptx
 
Air Con Energy Rating Info411 Presentation.pdf
Air Con Energy Rating Info411 Presentation.pdfAir Con Energy Rating Info411 Presentation.pdf
Air Con Energy Rating Info411 Presentation.pdf
 
Microeconomic Group Presentation Apple.pdf
Microeconomic Group Presentation Apple.pdfMicroeconomic Group Presentation Apple.pdf
Microeconomic Group Presentation Apple.pdf
 

Introduction to d3js (and SVG)

  • 1. Zahid Mian Part of the Brown-bag Series
  • 2.  SVG  Basic Shapes  Paths  Javascript vs. D3js  Creating a Bar Graph  Scaling  What Next?
  • 3.  SVG (ScalableVector Graphics)  Scalable images  Open standard  Files saved as standard XML  Need to have good command of Javascript  D3js is a library written in javascript  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">  D3js makes it easy to manipulate SVG graphics
  • 4.  D3 = Data Driven Documents  Produce interactive visualizations (web)  Has several libraries to help with creating graphics  Focus on the visualization part (not the code)  Support for binding data
  • 5.  Selections  CSS-style selector to select DOM nodes  Manipulations (append, remove, etc.)  Transitions  “smoothly” interpolate attributes of graphic, creating an aesthetically pleasing visual  Better than recreating each element  Data-binding  Use a dataset (json, csv, javascript arrays, etc.) to allow D3 to create an object for each element
  • 6.  Based on a coordinate system with (0,0) at top left  Basic shapes include  Lines, Rectangles, Circles, and Polygons  Paths allow highly customized polygons  Using basic shapes to create interactive charts like bar charts, area charts, pie charts  More Advanced creations are possible
  • 7. <body> <svg width=400 height=520 > <line x1=10 y1=50 x2= 300 y2= 200 stroke-width="10" stroke="red" stroke-linecap="round"/> <rect width=100 height=50 x=150 y=25 rx=40 ry=10 stroke- width=2 stroke=steelblue fill=#888 fill-opacity=.5 /> <circle cx=62 cy=150 r=25 stroke-width=5 stroke=steelblue fill=#888 /> <polygon points="60,250 10,420 115, 420" /> <path d="M 120 120, L 220 220, 420 120 Z" stroke="steelblue" stroke-width="2" fill="lightyellow"></path> </body>
  • 8. d3.select("body") // select <body> tag .append("svg") // add <svg> tag .attr("width", "100") // width of svg, use default for height .append("rect") // add <rect> element .attr("width", 50) // set attribute of rect .attr("height", 150) // set attribute of rect .attr("x", 25) // move 25 px from left of svg .attr("y", 25) // move 25 px from top of svg .style("fill", "blue"); // add some style
  • 9. d3.select("body") // select <body> tag .append("svg") // add <svg> tag .attr("width", "100") .append("circle") // add <circle> element .attr("cx", 50) // move center of circle 50 px from left of svg .attr("cy", 50) // move center of circle 50 px from top of svg .attr("r", 25) // radius of circle .style("fill", "blue"); // add some style
  • 10. //The data for our line; simply an array of x,y coordinates for each line segment var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20}, { "x": 40, "y": 10}, { "x": 60, "y": 40}, { "x": 80, "y": 5}, { "x": 100, "y": 60}]; //This accessor function will use the x,y coordinates and create a path of points var lineFunction = d3.svg.line() // we’ll revisit this later .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .interpolate("linear"); // we’ll revisit this later //The SVG Container var svgContainer = d3.select("body").append("svg") .attr("width", 200) .attr("height", 200); //The line SVG Path we draw var lineGraph = svgContainer.append("path") .attr("d", lineFunction(lineData)) // concept of dynamic property; calls the lineFunction defined above .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); Interpolate(“linear”) Interpolate(“step-before”)
  • 11. d3.select("body").append("svg") .attr("width", 100) .attr("height", 100).append("text") .text("hello world") .attr("stroke", "blue") .attr("stroke-width", 1) .attr("x", 10) .attr("y", 10) .attr("transform","rotate(25)"); d3.select("body").append("svg") .append("text") .text("hello world") .attr( {stroke: "blue", "stroke-width": "0.5", x: 10, y: 10, transform: "rotate(25)" }); Javascript shorthand for creating a bag of properties
  • 12. d3.select("body") .append("svg") .attr("width", 350) .attr("height", 220) // add <polygon> element .append("polygon") .attr("points", "200,10 250,190 160,210") .attr("fill", "green") .attr("stroke", "red") .attr("stroke-width", 3);
  • 13. d3.select("body") .append("svg") .attr("width", 500) .attr("height", 300) .append("path") .attr("d", "M 100 350 Q 150 -300 300 0") .attr("fill", "green") // add some style .attr("stroke", "red") .attr("stroke-width", 3); M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = ellipticalArc Z = closepath
  • 14.  D3.js includes a set of Path Data Generators helper classes for generating SVG Path instructions.  d3.svg.line - create a new line generator  d3.svg.line.radial - create a new radial line generator  d3.svg.area - create a new area generator  d3.svg.area.radial - create a new radial area generator  d3.svg.arc - create a new arc generator  d3.svg.symbol - create a new symbol generator  d3.svg.chord - create a new chord generator  d3.svg.diagonal - create a new diagonal generator  d3.svg.diagonal.radial - create a new radial diagonal generator
  • 15. var arc = d3.svg.arc() // What does this do? .innerRadius(20) .outerRadius(100) .startAngle(0) .endAngle(Math.PI) ; // Angles are specified in radians; 0 corresponds to 12 o’clock (negative y) and proceeds clockwise, repeating at 2π var chart = d3.select("body").append("svg:svg") .attr("width", 200) .attr("height", 250).append("svg:g") .attr("transform", "translate(50,150)") ; chart.append("svg:path") .attr("fill", "green") .attr("d", arc) ; endAngle(Math.PI) endAngle(0.5* Math.PI)
  • 16.  Where are we?  We know about SVG shapes  We know a little bit about D3js  We can create different shapes using D3js syntax  What haven’t we done?  No Data examples  No interactive examples (can’t show much in ppt)
  • 17. var data = [ {x: 5, y: 15, w: 10, h:25}, {x: 20, y: 5, w: 10, h:35}, {x: 35, y: 20, w: 10, h:20} ]; var svg = d3.select("body").append("svg") .attr("width", 100) .attr("height", 60); var grp = svg.append("g").selectAll("rect") .data(data) .enter() .append("rect") .attr({ x: function(d){ return d.x;}, y: function(d){ return d.y;}, width: function(d){return d.w;}, height: function(d) {return d.h;}, fill: "#95B3D7" }); var data = [ {x: 5, y: 15, w: 10, h:25}, {x: 20, y: 5, w: 10, h:35}, {x: 35, y: 20, w: 10, h:20} ]; var svg = document.createElementNS("http://www.w3.org /2000/svg", "svg"); svg.setAttribute("width", 100); svg.setAttribute("height", 60); var svgNS = svg.namespaceURI; for(var z =0; z<data.length; z++){ var rect = document.createElementNS(svgNS,'rect'); rect.setAttribute('x',data[z].x); rect.setAttribute('y',data[z].y); rect.setAttribute('width',data[z].w); rect.setAttribute('height',data[z].h); rect.setAttribute('fill','#95B3D7'); svg.appendChild(rect); } document.body.appendChild(svg); D3Way (no looping) Javascript
  • 18.  Greater flexibility with more complex data  Handles binding automatically  Easier transitions  grp.attr("transform", "translate(20,20)");  Moves the entire group 20x20
  • 19.  A little tough to understand at first  Makes sense after reviewing examples  General Pattern: // Update… var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) // array of numbers .text(String); // Enter… this will be called for each data element p.enter().append("p") .text(String); // Exit… p.exit().remove();
  • 20. // Update… var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) // join “p” with data items .text(function(d){ console.log(d); return (d*d).toString(); });  Notice we can call a function to get the data element  Since there are no “p” tags in the body, nothing is displayed  No log information is created <body> </body> html output
  • 21. var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d){ console.log(d); return d.toString();}); p.enter().append("p") .text(function(d) { console.log ("value of d is: " + d.toString()); return (d*2).toString();});  Notice the console output (original values) and the eventual data that’s rendered (value doubled)  Essentially, create a “p” tag for each data element <body> <p>8</p><p>16</p><p>30</p> <p>32</p><p>46</p><p>84</p> </body> console.log output html output
  • 22. This time the html body tag has some <p> tags defined like this: <body> <p>this is p1</p> <p>this is p2</p> <p>this is p3</p> </body> Here’s the D3 “update” code: var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d){ console.log("d in update:" + d.toString()); return d.toString(); }); Notice the original <p> text has been replaced <body> <p>4</p> <p>8</p> <p>15</p> </body> html output console.log output
  • 23. The html body tag has some <p> tags defined like this: <body> <p>this is p1</p> <p>this is p2</p> <p>this is p3</p> </body> Here’s the D3 Enter code: p.enter().append("p") .text(function(d) { console.log ("value of d is: " + d.toString()); return (d*2).toString();}); Notice the last three <p> tags have the doubled value <body> <p>4</p> <p>8</p> <p>15</p> <p>32</p> <p>46</p> <p>84</p> </body> html output console.log output
  • 24. var data = [4, 8, 15, 16, 23, 42]; function createSomething(){ var p = d3.select("body").selectAll("p") .data(data) .text(function(d){ console.log("d in update:" + d.toString()); return d.toString();}); p.enter().append("p") .text(function(d) { console.log ("value of d is: " + d.toString()); return (d*2).toString();}) // attach click event to remove an element .on("click", function(d, i){ console.log(“onclick d, i: “ + d + “, “ + i); data.splice(d, 1); // let’s remove a value from data createSomething(); }); // Exit ... p.exit().remove(); } createSomething(); Clicked on 46.What happened to 32 and 84? From the “update” From the Enter selection The onclick removed an item from the array When data is updated (removed), one of the <p> is also removed. Notice that the values are not doubled. That’s because the update selection was executed, not Enter. The log output confirms that.
  • 25. // what would happened if we added an element ??? var data = [4, 8, 15, 16, 23, 42]; function createSomething(){ var p = d3.select("body").selectAll("p") .data(data) .text(function(d){ console.log("d in update:" + d.toString()); return d.toString();}); p.enter().append("p") .text(function(d) { console.log ("value of d is: " + d.toString()); return (d*2).toString();}) .on("click", function(){ console.log(“addding 10 to data“); // add the number 10 to the top of array d.splice(0,0, 10); createSomething(); }); // Exit ... p.exit().remove(); } createSomething(); Notice that the new value was joined with the first <p>; the first 6 <p> were updated, and the 7th was inserted (that’s why it has the double value)Clicked on 46.What happened to 32?
  • 26. // what would happened if we added an element ??? var data = [4, 8, 15, 16, 23, 42]; function createSomething(){ var p = d3.select("body").selectAll("p") .data(data) .text(function(d){ console.log("d in update:" + d.toString()); return d.toString();}); p.enter().append("p") .text(function(d) { console.log ("value of d is: " + d.toString()); return (d*2).toString();}) .on("click", function(){ console.log(“addding 10 to data“); // add the number 10 to the bottom of array d.splice(4,0, 10); createSomething(); }); // Exit ... p.exit().remove(); } createSomething(); What will be displayed when you click on 46? Look at the log output.
  • 27.  Understanding the Update, Enter, Exit selections is critical  Now we know about SVG graphicsAND  D3 Scripting (a little bit) AND  Selections  So now you are only bound by your imagination (and a bit of geometry)
  • 28.  A Bar chart is simply a set of rectangles  Let’s use D3 to create some rectangles  Here’s something that looks like a bar chart with 5 rectangles
  • 29. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="http://d3js.org/d3.v3.min.js"></script> <script> <!– on right side --> </script> </head> <body> </body> </html> var w = 300; var h = 100; var padding = 2; var data = [15, 10, 50, 20, 25]; var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") // select all rect .data(data) // our data .enter() // cross your fingers .append("rect") // it will append rect .attr("x", function(d,i) { return i*(w/dataset.length); }) // set x … d is data and i is index of data .attr("y", function(d, i){ return h-(d); }) // set y … remember y start in top-left corner .attr("width", w/dataset.length - padding) .attr("height", function(d) { return d; });
  • 30. var w = 300; var h = 200; var padding = 2; var dataset = [15, 10, 45, 20, 25]; var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h); function getColor(v) { if (v<=20) {return "#666666"; } else if(v<40) {return "#FF5010";} else {return "#FF0000";} } svg.selectAll("rect") // select all rect .data(dataset) // our data .enter() // will append if doesn't exist .append("rect") // it will append rect .attr("x", function(d,i) { return i*(w/dataset.length); }) .attr("y", function(d, i){ return h-(d*4); }) .attr("width", w/dataset.length - padding) .attr("height", function(d) { return d*4; }) .attr("fill", function(d) {return getColor(d);}); svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) {return d;}) .attr({ "text-anchor": "middle", x: function(d,i){ return i*(w/dataset.length)+(w/dataset.length - padding) /2; }, y: function(d) {return h-(d*4)+14;}, // drop it inside the bar "font-family": "sans-serif", "font-size": 12, "fill": "#ffffff" });
  • 31. var w = 300, //width h = 300, //height r = 100, //radius color = d3.scale.category20c(); //builtin range of colors data = [{ "label": "one", "value": 20 }, { "label": "two", "value": 50 }, { "label": "three", "value": 30 }]; var vis = d3.select("body") .append("svg:svg") //create the SVG element inside the <body> .data([data]) //associate our data with the document .attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag .attr("height", h) .append("svg:g") //make a group to hold our pie chart .attr("transform", "translate(" + r + "," + r + ")"); //move the center of the pie chart from 0, 0 to radius, radius var arc = d3.svg.arc() //this will create <path> elements for us using arc data .outerRadius(r); var pie = d3.layout.pie() //this will create arc data for us given a list of values .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array  var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet) .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) .attr("class", "slice"); //allow us to style things in the slices (like text) arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); }) //set the color for each slice to be chosen from the color function defined above .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function arcs.append("svg:text") //add a label to each slice .attr("transform", function(d) { //set the label's origin to the center of the arc //we have to make sure to set these before calling arc.centroid d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50] }) .attr("text-anchor", "middle") //center the text on it's origin .text(function(d, i) { return data[i].label; }); //get the label from our original data array
  • 32.  Scaling is important for creatingAxis  Can also be used to resize graphics  Use d3.scale.linear() to create scale var scale = d3.scale.linear() .domain([130,350]) // min/max .range([10,100]); // output range; // now use the scale object to get scaled value console.log(scale(130)); // 10 console.log(scale(350)); // 100 console.log(scale(300)); // 79.54 console.log(scale(150)); // 18.18
  • 33.  Transitions deal with animation; Not possible to show in a presentation (see demos later)  A little ironic that we can’t show transitions in ppt  Very Powerful feature of D3  A very simply transition: d3.select("body") .style("color", "green") // make the body green .transition() .style("color", "red"); // then transition to red  https://www.youtube.com/watch?v=vLk7mlAtEXI  http://bl.ocks.org/mbostock/3943967
  • 36.  https://github.com/mbostock/d3/wiki/Gallery  Source code available for all examples  Copy source and play with it in a javascript environment (jsfiddle.net, jsbin.com, etc.)  Use debugger and console.log liberally to better understand what’s happening
  • 37.  Debugging in javascript  Examples from today  Examples from NYTimes.com  Examples from around the Internet