Introduction to d3js (and SVG)

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

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)

 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…
.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

.data([4, 8, 15, 16, 23, 42])
.text(function(d){
console.log(d);
return d.toString();});
.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>
81630
324684
</body>
console.log output
html output

This time the html body tag has
some tags defined like this:
<body>
this is p1
this is p2
this is p3
</body>
Here’s the D3 “update” code:
.data([4, 8, 15, 16, 23, 42])
.text(function(d){
console.log("d in update:" + d.toString());
return d.toString();
});
Notice the original text has
been replaced
<body>
4
8
15
</body>
html output
console.log output

The html body tag has some
 tags defined like this:
<body>
this is p1
this is p2
this is p3
</body>
Here’s the D3 Enter code:
.text(function(d) {
return (d*2).toString();});
Notice the last three tags
have the doubled value
<body>
4
8
15
32
46
84
</body>
html output
console.log output

// what would happened if we added an element ???
var data = [4, 8, 15, 16, 23, 42];
.data(data)
.text(function(d){
.text(function(d) {
.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 ; the first 6 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];
.data(data)
.text(function(d){
.text(function(d) {
.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];
.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;
});

 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

 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)

Introduction to d3js (and SVG)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to d3js (and SVG)

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

More from zahid-mian

More from zahid-mian (9)

Recently uploaded

Recently uploaded (20)

Introduction to d3js (and SVG)