maning · December 31, 2015 19:49
diff --git a/data.tsv b/data.tsv
 date pulse respiratory temperature
 20130829 2000 112 24 36.5
 20130829 2400 107 26 38.9
 20130830 0400 83 26 38.6
 20130830 0800 110 26 38.7
 20130830 1200 127 28 37
 20130830 1600 96 24 37
 20130830 2000 92 24 37.4
 20130830 2400 87 24 38.3
 20130831 0400 74 21 36.8
 20130831 0800 77 22 36.2
 20130831 1200 85 22 36.2
 20130831 1600 90 24 36.5
 20130831 2000 92 22 36.9
 20130831 2400 83 22 36.3
 20130901 0400 89 22 36.5
 20130901 0800 101 24 37.1
 20130901 1200 96 22 36.8
 20130901 1600 84 22 36.8
 20130901 2000 88 24 36.3
 20130901 2400 64 25 36
 20130902 0400 68 24 36
 20130902 0800 93 26 36.8
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 
 body {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin: auto;
 position: relative;
 width: 960px;
 }
 
 text {
 font: 10px sans-serif;
 }
 
 .axis path,
 .axis line {
 fill: none;
 stroke: #000;
 shape-rendering: crispEdges;
 }
 
 .x.axis path {
 display: none;
 }
 
 .line {
 fill: none;
 stroke: steelblue;
 stroke-width: 1.5px;
 }
 
 form {
 position: absolute;
 right: 10px;
 top: 10px;
 }
 
 </style>
 <form>
 <label><input type="radio" name="city" value="respiratory" checked> respiratory</label>
 <label><input type="radio" name="city" value="pulse"> pulse</label>
 <label><input type="radio" name="city" value="temperature"> temperature</label>
 </form>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
 var margin = {top: 20, right: 80, bottom: 30, left: 50},
 width = 960 - margin.left - margin.right,
 height = 500 - margin.top - margin.bottom;
 
 var city = "New York",
 parseDate = d3.time.format("%Y%m%d %H%M").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");
 
 var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left");
 
 var line = d3.svg.line()
 .interpolate("basis")
 .x(function(d) { return x(d.date); })
 .y(function(d) { return y(d[city]); });
 
 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.tsv("data.tsv", function(error, data) {
 data.forEach(function(d) {
 d.date = parseDate(d.date);
 d["New York"] = +d["New York"];
 d["San Francisco"] = +d["San Francisco"];
 });
 
 x.domain([data[0].date, data[data.length - 1].date]);
 y.domain(d3.extent(data, function(d) { return d[city]; }));
 
 svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);
 
 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("Temperature (ºF)");
 
 svg.append("path")
 .datum(data)
 .attr("class", "line")
 .attr("d", line);
 
 svg.append("text")
 .datum(data[data.length - 1])
 .attr("class", "label")
 .attr("transform", transform)
 .attr("x", 3)
 .attr("dy", ".35em")
 .text(city);
 
 d3.selectAll("input").on("change", change);
 
 var timeout = setTimeout(function() {
 d3.select("input[value=\"San Francisco\"]").property("checked", true).each(change);
 }, 2000);
 
 function change() {
 clearTimeout(timeout);
 
 city = this.value;
 
 // First transition the line & label to the new city.
 var t0 = svg.transition().duration(750);
 t0.selectAll(".line").attr("d", line);
 t0.selectAll(".label").attr("transform", transform).text(city);
 
 // Then transition the y-axis.
 y.domain(d3.extent(data, function(d) { return d[city]; }));
 var t1 = t0.transition();
 t1.selectAll(".line").attr("d", line);
 t1.selectAll(".label").attr("transform", transform);
 t1.selectAll(".y.axis").call(yAxis);
 }
 
 function transform(d) {
 return "translate(" + x(d.date) + "," + y(d[city]) + ")";
 }
 });
 
 </script>
	date pulse respiratory temperature
	20130829 2000 112 24 36.5
	20130829 2400 107 26 38.9
	20130830 0400 83 26 38.6
	20130830 0800 110 26 38.7
	20130830 1200 127 28 37
	20130830 1600 96 24 37
	20130830 2000 92 24 37.4
	20130830 2400 87 24 38.3
	20130831 0400 74 21 36.8
	20130831 0800 77 22 36.2
	20130831 1200 85 22 36.2
	20130831 1600 90 24 36.5
	20130831 2000 92 22 36.9
	20130831 2400 83 22 36.3
	20130901 0400 89 22 36.5
	20130901 0800 101 24 37.1
	20130901 1200 96 22 36.8
	20130901 1600 84 22 36.8
	20130901 2000 88 24 36.3
	20130901 2400 64 25 36
	20130902 0400 68 24 36
	20130902 0800 93 26 36.8
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

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

	text {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	<form>
	<label><input type="radio" name="city" value="respiratory" checked> respiratory</label>
	<label><input type="radio" name="city" value="pulse"> pulse</label>
	<label><input type="radio" name="city" value="temperature"> temperature</label>
	</form>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var city = "New York",
	parseDate = d3.time.format("%Y%m%d %H%M").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");

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

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d[city]); });

	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.tsv("data.tsv", function(error, data) {
	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d["New York"] = +d["New York"];
	d["San Francisco"] = +d["San Francisco"];
	});

	x.domain([data[0].date, data[data.length - 1].date]);
	y.domain(d3.extent(data, function(d) { return d[city]; }));

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

	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("Temperature (ºF)");

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);

	svg.append("text")
	.datum(data[data.length - 1])
	.attr("class", "label")
	.attr("transform", transform)
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(city);

	d3.selectAll("input").on("change", change);

	var timeout = setTimeout(function() {
	d3.select("input[value=\"San Francisco\"]").property("checked", true).each(change);
	}, 2000);

	function change() {
	clearTimeout(timeout);

	city = this.value;

	// First transition the line & label to the new city.
	var t0 = svg.transition().duration(750);
	t0.selectAll(".line").attr("d", line);
	t0.selectAll(".label").attr("transform", transform).text(city);

	// Then transition the y-axis.
	y.domain(d3.extent(data, function(d) { return d[city]; }));
	var t1 = t0.transition();
	t1.selectAll(".line").attr("d", line);
	t1.selectAll(".label").attr("transform", transform);
	t1.selectAll(".y.axis").call(yAxis);
	}

	function transform(d) {
	return "translate(" + x(d.date) + "," + y(d[city]) + ")";
	}
	});

	</script>