Skip to content

Instantly share code, notes, and snippets.

@shawnbot

shawnbot/index.html

Created February 3, 2012 00:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shawnbot/1726790 to your computer and use it in GitHub Desktop.
Save shawnbot/1726790 to your computer and use it in GitHub Desktop.
Download ZIP
U.S. Unemployment
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>U.S. Unemployment</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 2em;
}
table {
margin: 1em 0;
border-collapse: collapse;
}
th, td {
font-family: monospace;
font-size: 12px;
padding: 3px 4px 2px 3px;
text-align: right;
}
</style>
</head>
<body>
<table id="unemployment">
<caption>U.S. Unemployment Rate</caption>
<thead>
<tr><th scope="row">Year</th><th scope="col">Jan</th><th scope="col">Feb</th><th scope="col">Mar</th><th scope="col">Apr</th><th scope="col">May</th><th scope="col">Jun</th><th scope="col">Jul</th><th scope="col">Aug</th><th scope="col">Sep</th><th scope="col">Oct</th><th scope="col">Nov</th><th scope="col">Dec</th></tr>
</thead>
<tbody>
<tr><th scope="row">2001</th><td>4.2</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.3</td><td>4.5</td><td>4.6</td><td>4.9</td><td>5.0</td><td>5.3</td><td>5.5</td><td>5.7</td></tr>
<tr><th scope="row">2002</th><td>5.7</td><td>5.7</td><td>5.7</td><td>5.9</td><td>5.8</td><td>5.8</td><td>5.8</td><td>5.7</td><td>5.7</td><td>5.7</td><td>5.9</td><td>6.0</td></tr>
<tr><th scope="row">2003</th><td>5.8</td><td>5.9</td><td>5.9</td><td>6.0</td><td>6.1</td><td>6.3</td><td>6.2</td><td>6.1</td><td>6.1</td><td>6.0</td><td>5.8</td><td>5.7</td></tr>
<tr><th scope="row">2004</th><td>5.7</td><td>5.6</td><td>5.8</td><td>5.6</td><td>5.6</td><td>5.6</td><td>5.5</td><td>5.4</td><td>5.4</td><td>5.5</td><td>5.4</td><td>5.4</td></tr>
<tr><th scope="row">2005</th><td>5.3</td><td>5.4</td><td>5.2</td><td>5.2</td><td>5.1</td><td>5.0</td><td>5.0</td><td>4.9</td><td>5.0</td><td>5.0</td><td>5.0</td><td>4.9</td></tr>
<tr><th scope="row">2006</th><td>4.7</td><td>4.8</td><td>4.7</td><td>4.7</td><td>4.6</td><td>4.6</td><td>4.7</td><td>4.7</td><td>4.5</td><td>4.4</td><td>4.5</td><td>4.4</td></tr>
<tr><th scope="row">2007</th><td>4.6</td><td>4.5</td><td>4.4</td><td>4.5</td><td>4.4</td><td>4.6</td><td>4.7</td><td>4.6</td><td>4.7</td><td>4.7</td><td>4.7</td><td>5.0</td></tr>
<tr><th scope="row">2008</th><td>5.0</td><td>4.9</td><td>5.1</td><td>5.0</td><td>5.4</td><td>5.6</td><td>5.8</td><td>6.1</td><td>6.1</td><td>6.5</td><td>6.8</td><td>7.3</td></tr>
<tr><th scope="row">2009</th><td>7.8</td><td>8.3</td><td>8.7</td><td>8.9</td><td>9.4</td><td>9.5</td><td>9.5</td><td>9.6</td><td>9.8</td><td>10.</td><td>9.9</td><td>9.9</td></tr>
<tr><th scope="row">2010</th><td>9.7</td><td>9.8</td><td>9.8</td><td>9.9</td><td>9.6</td><td>9.4</td><td>9.5</td><td>9.6</td><td>9.5</td><td>9.5</td><td>9.8</td><td>9.4</td></tr>
<tr><th scope="row">2011</th><td>9.1</td><td>9.0</td><td>8.9</td><td>9.0</td><td>9.0</td><td>9.1</td><td>9.1</td><td>9.1</td><td>9.0</td><td>8.9</td><td>8.7</td><td>8.5</td></tr>
</tbody>
</table>
<p>Figures courtesy of the <a href="http://data.bls.gov/timeseries/LNS14000000">Bureau of Labor Statistics</a></p>
<script type="text/javascript">
// monkey patch d3 to support the 3.0 data/map API
if (d3.version < "3.0") {
d3.selection.prototype.data = d3.selection.prototype.map;
d3.selection.prototype.map = function(map) {
var out = [];
this.each(function(d, i) {
out.push(map.call(this, d, i));
});
return out;
};
}
// run the parser, assigning data to each row and cell
var table = d3.select("#unemployment");
// get the cells and bind their data to a number
var cells = table.selectAll("tbody td")
.data(function(d, i) {
return Number(this.textContent);
});
// color scale
var fill = d3.scale.linear()
.domain([4, 7, 10])
// this is the colorbrewer YlOrBr[3] scheme
.range(["rgb(255,247,188)","rgb(254,196,79)","rgb(217,95,14)"]);
cells.style("background-color", fill);
// select the rows
var rows = table.selectAll("tbody tr")
// then normalize the values
.data(function(d, i) {
// grab the array of values for all this row's cells
var values = d3.select(this)
.selectAll("td")
.map(function(d) { return d; });
// create a scale to normalize them to the 0-1 range
var normalize = d3.scale.linear()
.domain([d3.min(values), d3.max(values)])
.range([0, 1]);
// return an array of normalized values
return values.map(normalize);
});
// establish dimensions of each chart
var width = 100,
height = 16,
pad = 2;
// create a chart for each row, enclosed in a <td>
var charts = rows.append("td").attr("class", "chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// our x scale goes from left to right over 12 monthly steps
var x = d3.scale.linear()
.domain([0, 11])
.range([pad, width - pad]);
// our y scale goes from bottom to top over a 0-1 range
var y = d3.scale.linear()
.domain([0, 1])
.range([height - pad, pad]);
// our line generator assigns the x value by index, y by value
var line = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
// append <path> elements and use the line generator
charts.append("path")
.attr("stroke", "#666")
.attr("fill", "none")
.attr("d", line);
// append a <circle> element for the last data point
charts.append("circle")
.data(function(d, i) {
return d[d.length - 1];
})
.attr("fill", "#666")
.attr("r", 2)
.attr("cx", x.range()[1])
.attr("cy", y);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment