VOOZH about

URL: https://leanpub.com/read/D3-Tips-and-Tricks/leanpub-auto-appendices

⇱ Leanpub: Publish Early, Publish Often

Appendices

Simple Line Graph

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
 stroke: steelblue;
 stroke-width: 2;
 fill: none;
}

.axis path,
.axis line {
 fill: none;
 stroke: grey;
 stroke-width: 1;
 shape-rendering: crispEdges;
}

</style>
<body>

<!-- load the d3.js library --> 
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
 width = 600 - margin.left - margin.right,
 height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
 .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
 .orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
 .x(function(d) { return x(d.date); })
 .y(function(d) { return y(d.close); });
 
// Adds the svg canvas
var svg = d3.select("body")
 .append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", 
 "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data/data.csv", function(error, data) {
 data.forEach(function(d) {
 d.date = parseDate(d.date);
 d.close = +d.close;
 });

 // Scale the range of the data
 x.domain(d3.extent(data, function(d) { return d.date; }));
 y.domain([0, d3.max(data, function(d) { return d.close; })]);

 // Add the valueline path.
 svg.append("path")
 .attr("class", "line")
 .attr("d", valueline(data));

 // Add the X Axis
 svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);

 // Add the Y Axis
 svg.append("g")
 .attr("class", "y axis")
 .call(yAxis);

});

</script>
</body>

Graph with Many Features

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
 font: 12px Arial;
}

text.shadow {
 stroke: #fff;
 stroke-width: 2.5px;
 opacity: 0.9;
}

path { 
 stroke: steelblue;
 stroke-width: 2;
 fill: none;
}

.axis path,
.axis line {
 fill: none;
 stroke: grey;
 stroke-width: 1;
 shape-rendering: crispEdges;
}

.grid .tick {
 stroke: lightgrey;
 stroke-opacity: 0.7;
 shape-rendering: crispEdges;
}
.grid path {
 stroke-width: 0;
}

.area {
 fill: lightsteelblue;
 stroke-width: 0;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 30, right: 20, bottom: 35, left: 50},
 width = 600 - margin.left - margin.right,
 height = 270 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
 .scale(x)
 .orient("bottom")
 .ticks(5);

var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")
 .ticks(5);

var area = d3.svg.area()
 .x(function(d) { return x(d.date); })
 .y0(height)
 .y1(function(d) { return y(d.close); });

var valueline = d3.svg.line()
 .x(function(d) { return x(d.date); })
 .y(function(d) { return y(d.close); });
 
var svg = d3.select("body")
 .append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", 
 "translate(" + margin.left + "," + margin.top + ")");

// function for the x grid lines
function make_x_axis() {
 return d3.svg.axis()
 .scale(x)
 .orient("bottom")
 .ticks(5)
}

// function for the y grid lines
function make_y_axis() {
 return d3.svg.axis()
 .scale(y)
 .orient("left")
 .ticks(5)
}

// Get the data
d3.csv("data.csv", function(error, data) {
 data.forEach(function(d) {
 d.date = parseDate(d.date);
 d.close = +d.close;
 });

 // Scale the range of the data
 x.domain(d3.extent(data, function(d) { return d.date; }));
 y.domain([0, d3.max(data, function(d) { return d.close; })]);

 // Add the filled area
 svg.append("path")
 .datum(data)
 .attr("class", "area")
 .attr("d", area);

 // Draw the x Grid lines
 svg.append("g")
 .attr("class", "grid")
 .attr("transform", "translate(0," + height + ")")
 .call(make_x_axis()
 .tickSize(-height, 0, 0)
 .tickFormat("")
 )

 // Draw the y Grid lines
 svg.append("g") 
 .attr("class", "grid")
 .call(make_y_axis()
 .tickSize(-width, 0, 0)
 .tickFormat("")
 )

 // Add the valueline path.
 svg.append("path")
 .attr("d", valueline(data));

 // Add the X Axis
 svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);

 // Add the Y Axis
 svg.append("g")
 .attr("class", "y axis")
 .call(yAxis);

 // Add the text label for the X axis
 svg.append("text")
 .attr("transform",
 "translate(" + (width/2) + " ," + 
 (height+margin.bottom) + ")")
 .style("text-anchor", "middle")
 .text("Date");

 // Add the white background to the y axis label for legibility
 svg.append("text")
 .attr("transform", "rotate(-90)")
 .attr("y", 6)
 .attr("x", margin.top - (height / 2))
 .attr("dy", ".71em")
 .style("text-anchor", "end")
 .attr("class", "shadow")
 .text("Price ($)");

 // Add the text label for the Y axis
 svg.append("text")
 .attr("transform", "rotate(-90)")
 .attr("y", 6)
 .attr("x", margin.top - (height / 2))
 .attr("dy", ".71em")
 .style("text-anchor", "end")
 .text("Price ($)");

 // Add the title
 svg.append("text")
 .attr("x", (width / 2)) 
 .attr("y", 0 - (margin.top / 2))
 .attr("text-anchor", "middle")
 .style("font-size", "16px")
 .style("text-decoration", "underline")
 .text("Price vs Date Graph");

});

</script>
</body>

Graph with Area Gradient

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body { font: 12px Arial;}
.axis path,
.axis line {
 fill: none;
 stroke: grey;
 stroke-width: 1;
 shape-rendering: crispEdges;
}
.area { /* changed from line to area */
 fill: url(#area-gradient); /* url reference fill instead of stroke */
 stroke-width: 0px; /* removed stroke reference and any line*/
}

</style>
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
 width = 600 - margin.left - margin.right,
 height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
 .orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
 .orient("left").ticks(5); 
// Define the area (remove the line definition)
var area = d3.svg.area()
 .x(function(d) { return x(d.date); })
 .y0(height)
 .y1(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
 .append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform",
 "translate(" + margin.left + "," + margin.top + ")"
 );
// Get the data
d3.tsv("data/data.tsv", function(error, data) {
 data.forEach(function(d) {
 d.date = parseDate(d.date);
 d.close = +d.close;
 });
 // Scale the range of the data
 x.domain(d3.extent(data, function(d) { return d.date; }));
 y.domain([0, d3.max(data, function(d) { return d.close; })]);
 // Set the threshold
 svg.append("linearGradient") 
 .attr("id", "area-gradient") // change from line to area
 .attr("gradientUnits", "userSpaceOnUse") 
 .attr("x1", 0).attr("y1", y(0)) 
 .attr("x2", 0).attr("y2", y(1000)) 
 .selectAll("stop") 
 .data([ 
 {offset: "0%", color: "red"}, 
 {offset: "30%", color: "red"}, 
 {offset: "45%", color: "black"}, 
 {offset: "55%", color: "black"}, 
 {offset: "60%", color: "lawngreen"}, 
 {offset: "100%", color: "lawngreen"} 
 ]) 
 .enter().append("stop") 
 .attr("offset", function(d) { return d.offset; }) 
 .attr("stop-color", function(d) { return d.color; }); 
 // Add the filled area and remove the value line block
 svg.append("path")
 .datum(data)
 .attr("class", "area")
 .attr("d", area);
 // Add the X Axis
 svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);
 // Add the Y Axis
 svg.append("g")
 .attr("class", "y axis")
 .call(yAxis);
});

</script>
</body>

Bar Chart

<!DOCTYPE html>
<meta charset="utf-8">

<head>
	<style>

	.axis {
	 font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	 fill: none;
	 stroke: #000;
	 shape-rendering: crispEdges;
	}

	</style>
</head>

<body>
	
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
 width = 600 - margin.left - margin.right,
 height = 300 - margin.top - margin.bottom;

// Parse the date / time
var	parseDate = d3.time.format("%Y-%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
 .scale(x)
 .orient("bottom")
 .tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")
 .ticks(10);

var svg = d3.select("body").append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", 
 "translate(" + margin.left + "," + margin.top + ")");

d3.csv("bar-data.csv", function(error, data) {

 data.forEach(function(d) {
 d.date = parseDate(d.date);
 d.value = +d.value;
 });
	
 x.domain(data.map(function(d) { return d.date; }));
 y.domain([0, d3.max(data, function(d) { return d.value; })]);

 svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis)
 .selectAll("text")
 .style("text-anchor", "end")
 .attr("dx", "-.8em")
 .attr("dy", "-.55em")
 .attr("transform", "rotate(-90)" );

 svg.append("g")
 .attr("class", "y axis")
 .call(yAxis)
 .append("text")
 .attr("transform", "rotate(-90)")
 .attr("y", 6)
 .attr("dy", ".71em")
 .style("text-anchor", "end")
 .text("Value ($)");

 svg.selectAll("bar")
 .data(data)
 .enter().append("rect")
 .style("fill", "steelblue")
 .attr("x", function(d) { return x(d.date); })
 .attr("width", x.rangeBand())
 .attr("y", function(d) { return y(d.value); })
 .attr("height", function(d) { return height - y(d.value); });

});

</script>

</body>

Linking Objects

<!DOCTYPE html>
<meta charset="utf-8">

<body>

<!-- load the d3.js library -->	
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
 
var width = 449;
var height = 249;
var word = "gongoozler";
 
var holder = d3.select("body")
 .append("svg")
 .attr("width", width) 
 .attr("height", height); 

// draw a rectangle
holder.append("a")
 .attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)
 .append("rect") 
 .attr("x", 100)
 .attr("y", 50)
 .attr("height", 100)
 .attr("width", 200)
 .style("fill", "lightgreen")
 .attr("rx", 10)
 .attr("ry", 10);

// draw text on the screen
holder.append("text")
 .attr("x", 200)
 .attr("y", 100)
 .style("fill", "black")
 .style("font-size", "20px")
 .attr("dy", ".35em")
 .attr("text-anchor", "middle")
 .style("pointer-events", "none")
 .text(word);

</script>

</body>

A live version of this code can be found online on bl.ocks.org and GitHub.

PHP with MySQL Access

<?php
 $username = "homedbuser"; 
 $password = "homedbuser"; 
 $host = "localhost";
 $database="homedb";
 
 $server = mysql_connect($host, $username, $password);
 $connection = mysql_select_db($database, $server);

 $myquery = "
SELECT `date`, `close` FROM `data2`
";
 $query = mysql_query($myquery);
 
 if ( ! $myquery ) {
 echo mysql_error();
 die;
 }
 
 $data = array();
 
 for ($x = 0; $x < mysql_num_rows($query); $x++) {
 $data[] = mysql_fetch_assoc($query);
 }
 
 echo json_encode($data); 
 
 mysql_close($server);
?>

Simple Sankey Graph

<!DOCTYPE html>
<meta charset="utf-8">
<title>SANKEY Experiment</title>
<style>

.node rect {
 cursor: move;
 fill-opacity: .9;
 shape-rendering: crispEdges;
}
.node text {
 pointer-events: none;
 text-shadow: 0 1px 0 #fff;
}
.link {
 fill: none;
 stroke: #000;
 stroke-opacity: .2;
}
.link:hover {
 stroke-opacity: .5;
}

</style>
<body>
<p id="chart">
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="js/sankey.js"></script>
<script>

var units = "Widgets";
var margin = {top: 10, right: 10, bottom: 10, left: 10},
 width = 700 - margin.left – margin.right,
 height = 300 - margin.top – margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
 format = function(d) { return formatNumber(d) + " " + units; },
 color = d3.scale.category20();
// append the svg canvas to the page
var svg = d3.select("#chart").append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", 
 "translate(" + margin.left + "," + margin.top + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
 .nodeWidth(36)
 .nodePadding(40)
 .size([width, height]);
var path = sankey.link();
// load the data
d3.json("data/sankey-formatted.json", function(error, graph) {
 sankey
 .nodes(graph.nodes)
 .links(graph.links)
 .layout(32);
// add in the links
 var link = svg.append("g").selectAll(".link")
 .data(graph.links)
 .enter().append("path")
 .attr("class", "link")
 .attr("d", path)
 .style("stroke-width", function(d) { return Math.max(1, d.dy); })
 .sort(function(a, b) { return b.dy - a.dy; });
// add the link titles
 link.append("title")
 .text(function(d) {
 		return d.source.name + " → " + 
 d.target.name + "\n" + format(d.value); });
// add in the nodes
 var node = svg.append("g").selectAll(".node")
 .data(graph.nodes)
 .enter().append("g")
 .attr("class", "node")
 .attr("transform", function(d) { 
		 return "translate(" + d.x + "," + d.y + ")"; })
 .call(d3.behavior.drag()
 .origin(function(d) { return d; })
 .on("dragstart", function() { 
		 this.parentNode.appendChild(this); })
 .on("drag", dragmove));
// add the rectangles for the nodes
 node.append("rect")
 .attr("height", function(d) { return d.dy; })
 .attr("width", sankey.nodeWidth())
 .style("fill", function(d) { 
		 return d.color = color(d.name.replace(/ .*/, "")); })
 .style("stroke", function(d) { 
		 return d3.rgb(d.color).darker(2); })
 .append("title")
 .text(function(d) { 
		 return d.name + "\n" + format(d.value); });
// add in the title for the nodes
 node.append("text")
 .attr("x", -6)
 .attr("y", function(d) { return d.dy / 2; })
 .attr("dy", ".35em")
 .attr("text-anchor", "end")
 .attr("transform", null)
 .text(function(d) { return d.name; })
 .filter(function(d) { return d.x < width / 2; })
 .attr("x", 6 + sankey.nodeWidth())
 .attr("text-anchor", "start");
// the function for moving the nodes
 function dragmove(d) {
 d3.select(this).attr("transform", 
 "translate(" + (
 d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
 )
 + "," + (
 d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
 ) + ")");
 sankey.relayout();
 link.attr("d", path);
 }
});

</script>
</body>
</html>

Simple Tree Diagram

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">

 <title>Collapsible Tree Example</title>

 <style>

	.node circle {
	 fill: #fff;
	 stroke: steelblue;
	 stroke-width: 3px;
	}

	.node text { font: 12px sans-serif; }

	.link {
	 fill: none;
	 stroke: #ccc;
	 stroke-width: 2px;
	}
	
 </style>

 </head>

 <body>

<!-- load the d3.js library -->	
<script src="http://d3js.org/d3.v3.min.js"></script>
	
<script>

var treeData = [
 {
 "name": "Top Level",
 "parent": "null",
 "children": [
 {
 "name": "Level 2: A",
 "parent": "Top Level",
 "children": [
 {
 "name": "Son of A",
 "parent": "Level 2: A"
 },
 {
 "name": "Daughter of A",
 "parent": "Level 2: A"
 }
 ]
 },
 {
 "name": "Level 2: B",
 "parent": "Top Level"
 }
 ]
 }
];

// ************** Generate the tree diagram	 *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
	width = 960 - margin.right - margin.left,
	height = 500 - margin.top - margin.bottom;
	
var i = 0;

var tree = d3.layout.tree()
	.size([height, width]);

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom)
 .append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
 
update(root);

function update(source) {

 // Compute the new tree layout.
 var nodes = tree.nodes(root).reverse(),
	 links = tree.links(nodes);

 // Normalize for fixed-depth.
 nodes.forEach(function(d) { d.y = d.depth * 180; });

 // Declare the nodes…
 var node = svg.selectAll("g.node")
	 .data(nodes, function(d) { return d.id || (d.id = ++i); });

 // Enter the nodes.
 var nodeEnter = node.enter().append("g")
	 .attr("class", "node")
	 .attr("transform", function(d) { 
		 return "translate(" + d.y + "," + d.x + ")"; });

 nodeEnter.append("circle")
	 .attr("r", 10)
	 .style("fill", "#fff");

 nodeEnter.append("text")
	 .attr("x", function(d) { 
		 return d.children || d._children ? -13 : 13; })
	 .attr("dy", ".35em")
	 .attr("text-anchor", function(d) { 
		 return d.children || d._children ? "end" : "start"; })
	 .text(function(d) { return d.name; })
	 .style("fill-opacity", 1);

 // Declare the links…
 var link = svg.selectAll("path.link")
	 .data(links, function(d) { return d.target.id; });

 // Enter the links.
 link.enter().insert("path", "g")
	 .attr("class", "link")
	 .attr("d", diagonal);

}

</script>
	
 </body>
</html>

Interactive Tree Diagram

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">

 <title>Tree Example</title>

 <style>
 
 .node {
 cursor: pointer;
 }

 .node circle {
 fill: #fff;
 stroke: steelblue;
 stroke-width: 3px;
 }

 .node text {
 font: 12px sans-serif;
 }

 .link {
 fill: none;
 stroke: #ccc;
 stroke-width: 2px;
 }
 
 </style>

 </head>

 <body>

<!-- load the d3.js library --> 
<script src="http://d3js.org/d3.v3.min.js"></script>
 
<script>

var treeData = [
 {
 "name": "Top Level",
 "parent": "null",
 "children": [
 {
 "name": "Level 2: A",
 "parent": "Top Level",
 "children": [
 {
 "name": "Son of A",
 "parent": "Level 2: A"
 },
 {
 "name": "Daughter of A",
 "parent": "Level 2: A"
 }
 ]
 },
 {
 "name": "Level 2: B",
 "parent": "Top Level"
 }
 ]
 }
];


// ************** Generate the tree diagram *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
 width = 960 - margin.right - margin.left,
 height = 500 - margin.top - margin.bottom;
 
var i = 0,
 duration = 750,
 root;

var tree = d3.layout.tree()
 .size([height, width]);

var diagonal = d3.svg.diagonal()
 .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
 .attr("width", width + margin.right + margin.left)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
 
update(root);

d3.select(self.frameElement).style("height", "500px");

function update(source) {

 // Compute the new tree layout.
 var nodes = tree.nodes(root).reverse(),
 links = tree.links(nodes);

 // Normalize for fixed-depth.
 nodes.forEach(function(d) { d.y = d.depth * 180; });

 // Update the nodes…
 var node = svg.selectAll("g.node")
 .data(nodes, function(d) { return d.id || (d.id = ++i); });

 // Enter any new nodes at the parent's previous position.
 var nodeEnter = node.enter().append("g")
 .attr("class", "node")
 .attr("transform", function(d) { 
		 return "translate(" + source.y0 + "," + source.x0 + ")"; })
 .on("click", click);

 nodeEnter.append("circle")
 .attr("r", 1e-6)
 .style("fill", function(d) { 
		 return d._children ? "lightsteelblue" : "#fff"; });

 nodeEnter.append("text")
 .attr("x", function(d) { 
		 return d.children || d._children ? -13 : 13; })
 .attr("dy", ".35em")
 .attr("text-anchor", function(d) { 
		 return d.children || d._children ? "end" : "start"; })
 .text(function(d) { return d.name; })
 .style("fill-opacity", 1e-6);

 // Transition nodes to their new position.
 var nodeUpdate = node.transition()
 .duration(duration)
 .attr("transform", function(d) { 
		 return "translate(" + d.y + "," + d.x + ")"; });

 nodeUpdate.select("circle")
 .attr("r", 10)
 .style("fill", function(d) { 
		 return d._children ? "lightsteelblue" : "#fff"; });

 nodeUpdate.select("text")
 .style("fill-opacity", 1);

 // Transition exiting nodes to the parent's new position.
 var nodeExit = node.exit().transition()
 .duration(duration)
 .attr("transform", function(d) { 
		 return "translate(" + source.y + "," + source.x + ")"; })
 .remove();

 nodeExit.select("circle")
 .attr("r", 1e-6);

 nodeExit.select("text")
 .style("fill-opacity", 1e-6);

 // Update the links…
 var link = svg.selectAll("path.link")
 .data(links, function(d) { return d.target.id; });

 // Enter any new links at the parent's previous position.
 link.enter().insert("path", "g")
 .attr("class", "link")
 .attr("d", function(d) {
 var o = {x: source.x0, y: source.y0};
 return diagonal({source: o, target: o});
 });

 // Transition links to their new position.
 link.transition()
 .duration(duration)
 .attr("d", diagonal);

 // Transition exiting nodes to the parent's new position.
 link.exit().transition()
 .duration(duration)
 .attr("d", function(d) {
 var o = {x: source.x, y: source.y};
 return diagonal({source: o, target: o});
 })
 .remove();

 // Stash the old positions for transition.
 nodes.forEach(function(d) {
 d.x0 = d.x;
 d.y0 = d.y;
 });
}

// Toggle children on click.
function click(d) {
 if (d.children) {
 d._children = d.children;
 d.children = null;
 } else {
 d.children = d._children;
 d._children = null;
 }
 update(d);
}

</script>
 
 </body>
</html>

Force Layout Diagram

<!DOCTYPE html>
<meta charset="utf-8">
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style>

path.link {
 fill: none;
 stroke: #666;
 stroke-width: 1.5px;
}

path.link.twofive {
 opacity: 0.25;
}

path.link.fivezero {
 opacity: 0.50;
}

path.link.sevenfive {
 opacity: 0.75;
}

path.link.onezerozero {
 opacity: 1.0;
}

circle {
 fill: #ccc;
 stroke: #fff;
 stroke-width: 1.5px;
}

text {
 fill: #000;
 font: 10px sans-serif;
 pointer-events: none;
}

</style>
<body>
<script>

// get the data
d3.csv("data/force.csv", function(error, links) {

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
 link.source = nodes[link.source] || 
 (nodes[link.source] = {name: link.source});
 link.target = nodes[link.target] || 
 (nodes[link.target] = {name: link.target});
 link.value = +link.value;
});

var width = 960,
 height = 500;

var force = d3.layout.force()
 .nodes(d3.values(nodes))
 .links(links)
 .size([width, height])
 .linkDistance(60)
 .charge(-300)
 .on("tick", tick)
 .start();

// Set the range
var	v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
links.forEach(function(link) {
	if (v(link.value) <= 25) {
		link.type = "twofive";
	} else if (v(link.value) <= 50 && v(link.value) > 25) {
		link.type = "fivezero";
	} else if (v(link.value) <= 75 && v(link.value) > 50) {
		link.type = "sevenfive";
	} else if (v(link.value) <= 100 && v(link.value) > 75) {
		link.type = "onezerozero";
	}
});

var svg = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height);

// build the arrow.
svg.append("svg:defs").selectAll("marker")
 .data(["end"])
 .enter().append("svg:marker")
 .attr("id", String)
 .attr("viewBox", "0 -5 10 10")
 .attr("refX", 15)
 .attr("refY", -1.5)
 .attr("markerWidth", 6)
 .attr("markerHeight", 6)
 .attr("orient", "auto")
 .append("svg:path")
 .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
 .data(force.links())
 .enter().append("svg:path")
 .attr("class", function(d) { return "link " + d.type; })
 .attr("marker-end", "url(#end)");

// define the nodes
var node = svg.selectAll(".node")
 .data(force.nodes())
 .enter().append("g")
 .attr("class", "node")
 .on("click", click)
 .on("dblclick", dblclick)
 .call(force.drag);

// add the nodes
node.append("circle")
 .attr("r", 5);

// add the text 
node.append("text")
 .attr("x", 12)
 .attr("dy", ".35em")
 .text(function(d) { return d.name; });

// add the curvy lines
function tick() {
 path.attr("d", function(d) {
 var dx = d.target.x - d.source.x,
 dy = d.target.y - d.source.y,
 dr = Math.sqrt(dx * dx + dy * dy);
 return "M" + 
 d.source.x + "," + 
 d.source.y + "A" + 
 dr + "," + dr + " 0 0,1 " + 
 d.target.x + "," + 
 d.target.y;
 });

 node
 .attr("transform", function(d) { 
		 return "translate(" + d.x + "," + d.y + ")"; });
}

// action to take on mouse click
function click() {
 d3.select(this).select("text").transition()
 .duration(750)
 .attr("x", 22)
 .style("fill", "steelblue")
 .style("stroke", "lightsteelblue")
 .style("stroke-width", ".5px")
 .style("font", "20px sans-serif");
 d3.select(this).select("circle").transition()
 .duration(750)
 .attr("r", 16)
 .style("fill", "lightsteelblue");
}

// action to take on mouse double click
function dblclick() {
 d3.select(this).select("circle").transition()
 .duration(750)
 .attr("r", 6)
 .style("fill", "#ccc");
 d3.select(this).select("text").transition()
 .duration(750)
 .attr("x", 12)
 .style("stroke", "none")
 .style("fill", "black")
 .style("stroke", "none")
 .style("font", "10px sans-serif");
}

});

</script>
</body>
</html>

Bullet Chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin: auto;
 padding-top: 40px;
 position: relative;
 width: 800px;
}

button {
 position: absolute;
 right: 40px;
 top: 10px;
}

.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }

</style>
<button>Update</button>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="js/bullet.js"></script>
<script>

var margin = {top: 5, right: 40, bottom: 20, left: 120},
 width = 800 - margin.left - margin.right,
 height = 50 - margin.top - margin.bottom;

var chart = d3.bullet()
 .width(width)
 .height(height);

d3.json("data/cpu1.json", function(error, data) {
 var svg = d3.select("body").selectAll("svg")
 .data(data)
 .enter().append("svg")
 .attr("class", "bullet")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 .call(chart);

 var title = svg.append("g")
 .style("text-anchor", "end")
 .attr("transform", "translate(-6," + height / 2 + ")");

 title.append("text")
 .attr("class", "title")
 .text(function(d) { return d.title; });

 title.append("text")
 .attr("class", "subtitle")
 .attr("dy", "1em")
 .text(function(d) { return d.subtitle; });

 d3.selectAll("button").on("click", function() {
 svg.datum(randomize).call(chart.duration(1000));
 });
});

function randomize(d) {
 if (!d.randomizer) d.randomizer = randomizer(d);
 d.markers = d.markers.map(d.randomizer);
 d.measures = d.measures.map(d.randomizer);
 return d;
}

function randomizer(d) {
 var k = d3.max(d.ranges) * .2;
 return function(d) {
 return Math.max(0, d + k * (Math.random() - .5));
 };
}

</script>
</body>

Map with zoom / pan and cities

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
 stroke: white;
 stroke-width: 0.25px;
 fill: grey;
}

</style>
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="js/topojson.v0.min.js"></script>
<script>

var width = 960,
 height = 500;

var projection = d3.geo.mercator()
 .center([0, 5 ])
 .scale(900)
 .rotate([-180,0]);

var svg = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height);

var path = d3.geo.path()
 .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("json/world-110m2.json", function(error, topology) {
 g.selectAll("path")
 .data(topojson.object(topology, topology.objects.countries)
 .geometries)
 .enter()
 .append("path")
 .attr("d", path)
 
 // load and display the cities
 d3.csv("data/cities.csv", function(error, data) {
 g.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", function(d) {
 return projection([d.lon, d.lat])[0];
 })
 .attr("cy", function(d) {
 return projection([d.lon, d.lat])[1];
 })
 .attr("r", 5)
 .style("fill", "red");
 });

});

// zoom and pan
var zoom = d3.behavior.zoom()
 .on("zoom",function() {
 g.attr("transform","translate("+ 
 d3.event.translate.join(",")+")scale("+d3.event.scale+")");
 g.selectAll("path") 
 .attr("d", path.projection(projection)); 
 g.selectAll("circle")
 .attr("d", path.projection(projection));
 });

svg.call(zoom)

</script>
</body>
</html>