U.S. Unemployment by shawnbot

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="//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="//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>