Skip to content

Instantly share code, notes, and snippets.

@nadinesk

nadinesk/data.tsv

Created May 19, 2016 00:46
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 nadinesk/a54be2ef5866243fdd9834e48f3402b2 to your computer and use it in GitHub Desktop.
Save nadinesk/a54be2ef5866243fdd9834e48f3402b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.tsv
date Average San Jose, CA San Francisco, CA Urban Honolulu, HI Santa Cruz, CA Vineyard Haven, MA Kahului, HI Kapaa, HI Santa Maria-Santa Barbara, CA Key West, FL Los Angeles-Long Beach-Anaheim, CA
1997 54.33490279 179.8333333 152.5833333 192.5 159.8333333 129.5833333 156.9166667 139.1666667 126.5833333 137.5833333 119.0833333
1998 58.98184986 206.8333333 171.3333333 183.8333333 186.5 146.5 157.9166667 135.6666667 140.2 150.8333333 128.4166667
1999 62.12977897 232.6666667 196.25 181.5833333 211.6666667 172.5 165.5833333 143 162.5833333 161.3333333 141.75
2000 66.05594385 305 245.4166667 185.5833333 265.9166667 221.9166667 179.4166667 156.6666667 197.6666667 179.6666667 155.6666667
2001 70.50133594 329.9166667 279.6666667 192.5833333 308 249.0833333 200 158.25 238.75 203.3333333 173.25
2002 75.16756272 330.5 294.5833333 210.25 318.4166667 298.8333333 219.3333333 189.5833333 271.6666667 240.5833333 200
2003 81.59594602 338 319.4166667 243.9166667 344.6666667 330.0833333 266.0833333 236.8333333 311.8333333 306.0833333 241.3333333
2004 91.38838112 383.0833333 369.9166667 297.9166667 398.4166667 385.6666667 353.5 320.5 380.9166667 404.4166667 308.1666667
2005 104.4808116 453.5 441.5833333 375.25 476 430.6666667 439.6666667 413.6666667 443.5 528 368.1666667
2006 112.4905833 476.1666667 456.1666667 424.6666667 482.0833333 445 498.6666667 452 427.1666667 534.75 406.1666667
2007 112.0326382 478 441.25 424.9166667 456.5833333 425.8333333 483.8333333 432.9166667 389.5 464.25 389.5
2008 105.6066906 429.5833333 382 414.75 388.25 394.25 440.4166667 394.6666667 344 375.1666667 328.25
2009 101.2748956 371.9166667 337.25 389.1666667 362.4166667 380.0833333 377.1666667 341.5833333 316.75 320 281.1666667
2010 98.8909442 372.25 330.5 391.0833333 345.3333333 374.4166667 344.75 313.25 304.6666667 301.9166667 276.25
2011 94.71907308 355.25 310.0833333 387.25 324.0833333 380 314.6666667 296.0833333 276.4166667 285.1666667 262.25
2012 94.0053246 379.4166667 318.4166667 393.1666667 328.8333333 376.25 313.0833333 289.9166667 262.3333333 284 262.4166667
2013 98.21263345 451.5833333 381.3333333 421.3333333 370.8333333 381.3333333 348.9166667 324.1666667 306.4166667 306.1666667 305
2014 102.7825227 511 432.5833333 455.3333333 410.9166667 405.8333333 399.5833333 359.75 345.5833333 330.5 340
2015 106.4159253 568.8333333 477.5833333 471.8333333 448.1666667 437.5833333 425.5833333 391.0833333 365.4166667 363.4166667 357.75
2016 109.1020166 610.6666667 510.6666667 476.6666667 463.6666667 441.6666667 440 398.6666667 365.6666667 390 370.6666667
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#example1 {
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;
}
.focus text {
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
<body>
<div id="example1"></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 120, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x2 = d3.time.scale()
.range([0, width]);
var y1 = d3.scale.linear()
.range([height, 0]);
var color1 = d3.scale.category10();
var xAxis1 = d3.svg.axis()
.scale(x2)
.orient("bottom");
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x2(d.date); })
.y(function(d) { return y1(d.temperature); });
var svg1 = d3.select("#example1").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 + ")");
var focus = svg1.append("g")
.attr("transform", "translate(-100,-100)")
.attr("class", "focus");
focus.append("circle")
.attr("r", 3.5);
focus.append("text")
.attr("y", -10);
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
color1.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var cities = color1.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
x2.domain(d3.extent(data, function(d) { return d.date; }));
y1.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis1);
svg1.append("g")
.attr("class", "y axis")
.call(yAxis1)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
var city = svg1.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color1(d.name);})
.on("mouseover",function(d) {focus.select("text").text(d.temperature)});
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.filter (function(d,i){ return i % 2 === 1 ? this: null;})
.attr("transform", function(d) { return "translate(" + x2(d.value.date) + "," + y1(d.value.temperature ) + ")"; })
.attr("x", 1)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.filter (function(d,i){ return i % 2 === 0 ? this: null;})
.attr("transform", function(d) { return "translate(" + x2(d.value.date) + "," + y1(d.value.temperature) + ")"; })
.attr("x", 30)
.attr("dy", "-.35em")
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment