BBC PM2.5 data collected in July 2014

README.md

This graph shows PM2.5 data collected by BBC reporters over the 28 and 29 of July 2014. The raw data was collected via a Microaeth A51, downloaded, reformatted, and then multiplied by 0.6.

2014-07-29 07:27,0.0162 2014-07-29 07:28,0.0138 2014-07-29 07:29,0.0138 2014-07-29 07:30,0.0144 2014-07-29 07:31,0.0138 2014-07-29 07:32,0.0132 2014-07-29 07:33,0.015 2014-07-29 07:34,0.0132 2014-07-29 07:35,0.0132 2014-07-29 07:36,0.0126 2014-07-29 07:37,0.0126 2014-07-29 07:38,0.0132 2014-07-29 07:39,0.012 2014-07-29 07:40,0.0192 2014-07-29 07:41,0.0126 2014-07-29 07:42,0.0132 2014-07-29 07:43,0.0132 2014-07-29 07:44,0.0138 2014-07-29 07:45,0.015 2014-07-29 07:46,0.0138 2014-07-29 07:47,0.0144 2014-07-29 07:48,0.0126 2014-07-29 07:49,0.0138 2014-07-29 07:50,0.0126 2014-07-29 07:51,0.0138 2014-07-29 07:52,0.0138 2014-07-29 07:53,0.0138 2014-07-29 07:54,0.0144 2014-07-29 07:55,0.0138 2014-07-29 07:56,0.0162 2014-07-29 07:57,0.0168 2014-07-29 07:58,0.0168 2014-07-29 07:59,0.0156 2014-07-29 08:00,0.015 2014-07-29 08:01,0.0138 2014-07-29 08:02,0.0156 2014-07-29 08:03,0.0144 2014-07-29 08:04,0.0162 2014-07-29 09:14,0.0108 2014-07-29 09:15,0.0114 2014-07-29 09:16,0.0114 2014-07-29 09:17,0.0126 2014-07-29 09:18,0.012 2014-07-29 09:19,0.0096 2014-07-29 09:20,0.0096 2014-07-29 09:21,0.0102 2014-07-29 09:22,0.0108 2014-07-29 09:23,0.0114 2014-07-29 09:24,0.0126 2014-07-29 09:25,0.0126 2014-07-29 09:26,0.0096 2014-07-29 09:27,0.0114 2014-07-29 09:28,0.0108 2014-07-29 09:29,0.0114 2014-07-29 09:30,0.0156 2014-07-29 09:31,0.012 2014-07-29 09:32,0.0186 2014-07-29 09:33,0.0144 2014-07-29 09:34,0.012 2014-07-29 09:35,0.0114 2014-07-29 09:36,0.012 2014-07-29 09:37,0.012 2014-07-29 09:38,0.012 2014-07-29 09:39,0.0126 2014-07-29 09:40,0.015 2014-07-29 09:41,0.0138 2014-07-29 09:42,0.0234 2014-07-29 09:43,0.021 2014-07-29 09:44,0.021 2014-07-29 09:45,0.015 2014-07-29 09:46,0.0162 2014-07-29 09:47,0.018 2014-07-29 09:48,0.0144 2014-07-29 09:49,0.0186 2014-07-29 09:50,0.0246 2014-07-29 09:51,0.0168 2014-07-29 09:52,0.015 2014-07-29 10:38,0.0102 2014-07-29 10:39,0.0216 2014-07-29 10:40,0.0114 2014-07-29 10:41,0.0126 2014-07-29 10:42,0.0132 2014-07-29 10:43,0.012 2014-07-29 10:44,0.0126 2014-07-29 10:45,0.0126 2014-07-29 10:46,0.0138 2014-07-29 10:47,0.012 2014-07-29 10:48,0.0126 2014-07-29 10:49,0.0126 2014-07-29 10:50,0.012 2014-07-29 10:51,0.0138 2014-07-29 10:52,0.0162 2014-07-29 10:53,0.0174 2014-07-29 10:54,0.0156 2014-07-29 10:55,0.0138 2014-07-29 10:56,0.0132 2014-07-29 10:57,0.0132 2014-07-29 10:58,0.0132 2014-07-29 10:59,0.0138 2014-07-29 11:00,0.0162 2014-07-29 11:01,0.0162 2014-07-29 11:02,0.0138 2014-07-29 11:03,0.0144 2014-07-29 11:04,0.0132 2014-07-29 11:05,0.0138 2014-07-29 11:06,0.0126 2014-07-29 11:07,0.0126 2014-07-29 11:08,0.0132 2014-07-29 11:09,0.012 2014-07-29 11:10,0.0156 2014-07-29 11:11,0.015 2014-07-29 11:12,0.0144 2014-07-29 11:13,0.0144 2014-07-29 11:14,0.015 2014-07-29 11:15,0.0168 2014-07-29 11:16,0.018 2014-07-29 11:17,0.018 2014-07-29 11:18,0.0174 2014-07-29 11:19,0.0192 2014-07-29 11:20,0.0186 2014-07-29 11:21,0.0138 2014-07-29 11:22,0.0138 2014-07-29 11:23,0.0132 2014-07-29 11:24,0.0138 2014-07-29 11:25,0.0138 2014-07-29 11:26,0.0174 2014-07-29 11:27,0.021 2014-07-29 11:28,0.0204 2014-07-29 12:51,0.0066 2014-07-29 12:52,0.0072 2014-07-29 12:53,0.0084 2014-07-29 12:54,0.0078 2014-07-29 12:55,0.0084 2014-07-29 12:56,0.0096 2014-07-29 12:57,0.0084 2014-07-29 12:58,0.0084 2014-07-29 12:59,0.0078 2014-07-29 13:00,0.0072 2014-07-29 13:01,0.0072 2014-07-29 13:02,0.0078 2014-07-29 13:03,0.0078 2014-07-29 13:04,0.0072 2014-07-29 13:05,0.0078 2014-07-29 13:06,0.0084 2014-07-29 13:07,0.0084 2014-07-29 13:08,0.0084 2014-07-29 13:09,0.0084 2014-07-29 13:10,0.009 2014-07-29 13:11,0.0084 2014-07-29 13:12,0.0084 2014-07-29 13:13,0.009 2014-07-29 13:14,0.0102 2014-07-29 13:15,0.0096 2014-07-29 13:16,0.0096 2014-07-29 13:17,0.0084 2014-07-29 13:18,0.0096 2014-07-29 13:19,0.0102 2014-07-29 13:20,0.009 2014-07-29 13:21,0.009 2014-07-29 13:22,0.009 2014-07-29 13:23,0.0096 2014-07-29 13:24,0.0102 2014-07-29 13:25,0.0096 2014-07-29 13:26,0.0102 2014-07-29 13:27,0.0096 2014-07-29 13:28,0.0096 2014-07-29 13:29,0.0096 2014-07-29 13:30,0.009 2014-07-29 13:31,0.009 2014-07-29 13:32,0.009 2014-07-29 13:33,0.0084 2014-07-29 13:34,0.0084 2014-07-29 13:35,0.009 2014-07-29 13:36,0.0084 2014-07-29 13:37,0.0084 2014-07-29 13:38,0.009 2014-07-29 13:39,0.0084 2014-07-29 13:40,0.0084 2014-07-29 13:41,0.0084 2014-07-29 13:42,0.0084 2014-07-29 13:43,0.0096 2014-07-29 13:44,0.009 2014-07-29 13:45,0.0084 2014-07-29 13:46,0.0084 2014-07-29 13:47,0.0084 2014-07-29 13:48,0.0078 2014-07-29 13:49,0.0084 2014-07-29 13:50,0.0084 2014-07-29 13:51,0.0084 2014-07-29 13:52,0.0126 2014-07-29 13:53,0.012 2014-07-29 13:54,0.0186 2014-07-29 13:55,0.0228 2014-07-29 13:56,0.0228 2014-07-29 13:57,0.0162 2014-07-29 13:58,0.024 2014-07-29 13:59,0.0198 2014-07-29 14:00,0.0174 2014-07-29 14:01,0.015 2014-07-29 14:02,0.0198 2014-07-29 14:03,0.0168 2014-07-29 14:04,0.0126 2014-07-29 14:05,0.0096 2014-07-29 14:06,0.0102

bbc.csv

index.html

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

svg {
  font: 10px sans-serif;
}

.area {
  fill: steelblue;
  clip-path: url(#clip);
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

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

var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;

var parseDate = d3.time.format("%Y-%m-%d %H:%M").parse;

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

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

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

var area2 = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x2(d.date); })
    .y0(height2)
    .y1(function(d) { return y2(d.pm25); });

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

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

d3.csv("bbc.csv", type, function(error, data) {
  x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.pm25; }))]);
  x2.domain(x.domain());
  y2.domain(y.domain());

  focus.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

  focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  focus.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  context.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area2);

  context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);
});

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
}

function type(d) {
  d.date = parseDate(d.date);
  d.price = +d.pm25;
  return d;
}

</script>