Skip to content

Instantly share code, notes, and snippets.

@maning
Last active December 31, 2015 19:49
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 maning/8035929 to your computer and use it in GitHub Desktop.
Save maning/8035929 to your computer and use it in GitHub Desktop.
Chained Signs
We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment