Skip to content

Instantly share code, notes, and snippets.

@JimShady

JimShady/README.md

Last active August 29, 2015 14:04
Show Gist options
  • Save JimShady/d84c5b6d0c5d651333e4 to your computer and use it in GitHub Desktop.
Save JimShady/d84c5b6d0c5d651333e4 to your computer and use it in GitHub Desktop.
Download ZIP
BBC PM2.5 data collected in July 2014
Raw
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.

Raw
bbc.csv
date pm25
2014-07-28 15:15 0.0162
2014-07-28 15:16 0.0084
2014-07-28 15:17 0.0066
2014-07-28 15:18 0.0126
2014-07-28 15:19 0.0132
2014-07-28 15:20 0.0138
2014-07-28 15:21 0.015
2014-07-28 15:22 0.015
2014-07-28 15:23 0.0204
2014-07-28 15:24 0.0168
2014-07-28 15:25 0.0186
2014-07-28 15:26 0.0168
2014-07-28 15:27 0.018
2014-07-28 15:28 0.0132
2014-07-28 15:29 0.0126
2014-07-28 15:30 0.009
2014-07-28 15:31 0.0078
2014-07-28 15:32 0.009
2014-07-28 15:33 0.0108
2014-07-28 15:34 0.0228
2014-07-28 15:35 0.018
2014-07-28 15:36 0.015
2014-07-28 15:37 0.0204
2014-07-28 15:38 0.0144
2014-07-28 15:39 0.0216
2014-07-28 15:40 0.0258
2014-07-28 15:41 0.0252
2014-07-28 15:42 0.0144
2014-07-28 15:43 0.0162
2014-07-28 15:44 0.0168
2014-07-28 15:45 0.0162
2014-07-28 15:46 0.0108
2014-07-28 15:47 0.0126
2014-07-28 15:48 0.0132
2014-07-28 15:49 0.0144
2014-07-28 15:50 0.015
2014-07-28 15:51 0.0132
2014-07-28 15:52 0.0156
2014-07-28 15:53 0.0144
2014-07-28 15:54 0.0258
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
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment