introduction to d3js (and svg)

Zahid MianPart of the Brown-bag Series

SVG Basic Shapes Paths Javascript vs. D3js Creating a Bar Graph Scaling What Next?

SVG (Scalable Vector 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 segmentvar 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 Containervar svgContainer = d3.select("body").append("svg")

.attr("width", 200)

.attr("height", 200);

//The line SVG Path we drawvar lineGraph = svgContainer.append("path")

.attr("d", lineFunction(lineData)) // concept of dynamic property; calls the lineFunctiondefined 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 = elliptical Arc

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 elementp.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>

81630324684

</body>

console.log output

html output

This time the html body tag has some tags defined like this:<body>this is p1this is p2this is p3

</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 text has been replaced

<body>

4815

</body>

html output

console.log output

The html body tag has some tags defined like this:<body>this is p1this is p2this is p3

</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 tags have the doubled value

<body>4815324684

</body>

html output

console.log output

// 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 arrayd.splice(0,0, 10);createSomething();

});


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];

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 arrayd.splice(4,0, 10);createSomething();

});


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 graphics AND 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;

});

Scaling is important for creating Axis 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 valueconsole.log(scale(130)); // 10console.log(scale(350)); // 100console.log(scale(300)); // 79.54console.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

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

https://github.com/mbostock/d3/wiki/Gallery

Debugging in javascript Examples from today Examples from NYTimes.com Examples from around the Internet

introduction to d3js (and svg)

Data & Analytics