Skip to content

Instantly share code, notes, and snippets.

@quizzicol

quizzicol/README.md

Last active December 8, 2015 11:59
Show Gist options
  • Save quizzicol/76b8723ded323601af89 to your computer and use it in GitHub Desktop.
Save quizzicol/76b8723ded323601af89 to your computer and use it in GitHub Desktop.
Download ZIP
san francisco temperature
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
path{
fill: none;
stroke: black;
stroke-width: 2px;
}
</style>
</head>
<body>
<script>
var outerWidth = 500;
var outerHeight = 250;
var circleRadius = 3;
var margin = { left: 30, top: 30, right: 30, bottom: 30 };
var xColumn = "timestamp";
var yColumn = "temperature";
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var path = g.append("path");
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var xScale = d3.time.scale().range([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var line = d3.svg.line()
.x(function(d) { return xScale(d[xColumn]); })
.y(function(d) { return yScale(d[yColumn]); })
function render(data){
xScale.domain( d3.extent(data, function (d){ return d[xColumn]; }));
yScale.domain( d3.extent(data, function (d){ return d[yColumn]; }));
path.attr("d", line(data)) // the 'd' element is the line that has 'M50 500 L400 300 etc
}
function type(d){
d.timestamp = new Date(d.timestamp);
d.temperature = +d.temperature;
return d;
}
d3.csv("week_temperature_sf.csv", type, render);
</script>
</body>
</html>
Raw
week_temperature_sf.csv
timestamp temperature
2015-03-20T21:00:00.000Z 23.9516625615764
2015-03-20T22:00:00.000Z 23.0728888291688
2015-03-20T23:00:00.000Z 22.2708190476318
2015-03-21T00:00:00.000Z 21.3394373423804
2015-03-21T01:00:00.000Z 20.1010743049325
2015-03-21T02:00:00.000Z 18.4150717551479
2015-03-21T03:00:00.000Z 17.7483817583905
2015-03-21T04:00:00.000Z 17.6589726749868
2015-03-21T05:00:00.000Z 17.0922334804965
2015-03-21T06:00:00.000Z 17.9022626474071
2015-03-21T07:00:00.000Z 17.9134315019288
2015-03-21T08:00:00.000Z 17.9623415917395
2015-03-21T09:00:00.000Z 18.6299049947767
2015-03-21T10:00:00.000Z 18.7246461115231
2015-03-21T11:00:00.000Z 18.3452032121395
2015-03-21T12:00:00.000Z 17.9509405148159
2015-03-21T13:00:00.000Z 17.6459367384257
2015-03-21T14:00:00.000Z 18.0026108196051
2015-03-21T15:00:00.000Z 18.6413944821435
2015-03-21T16:00:00.000Z 19.3671431509997
2015-03-21T17:00:00.000Z 20.8082012083461
2015-03-21T18:00:00.000Z 22.5238576663828
2015-03-21T19:00:00.000Z 24.4214051463704
2015-03-21T20:00:00.000Z 26.2049693716955
2015-03-21T21:00:00.000Z 26.579802484894
2015-03-21T22:00:00.000Z 26.5525094442272
2015-03-21T23:00:00.000Z 23.9758724990251
2015-03-22T00:00:00.000Z 20.7705334007582
2015-03-22T01:00:00.000Z 19.5826361563267
2015-03-22T02:00:00.000Z 18.7265399946616
2015-03-22T03:00:00.000Z 18.2886029132647
2015-03-22T04:00:00.000Z 17.4904771411586
2015-03-22T05:00:00.000Z 17.1831430954037
2015-03-22T06:00:00.000Z 17.2898856656444
2015-03-22T07:00:00.000Z 17.8578100360021
2015-03-22T08:00:00.000Z 18.1992192220978
2015-03-22T09:00:00.000Z 18.13420905954
2015-03-22T10:00:00.000Z 18.5888149684944
2015-03-22T11:00:00.000Z 18.6733003026984
2015-03-22T12:00:00.000Z 19.1600833190036
2015-03-22T13:00:00.000Z 19.207095797011
2015-03-22T14:00:00.000Z 18.9847082241235
2015-03-22T15:00:00.000Z 19.4293802064908
2015-03-22T16:00:00.000Z 20.8493124700409
2015-03-22T17:00:00.000Z 21.5898145184046
2015-03-22T18:00:00.000Z 22.3397182467298
2015-03-22T19:00:00.000Z 22.7891858876349
2015-03-22T20:00:00.000Z 23.3412628564144
2015-03-22T21:00:00.000Z 23.4926420057589
2015-03-22T22:00:00.000Z 23.0962283240861
2015-03-22T23:00:00.000Z 22.2667502918227
2015-03-23T00:00:00.000Z 21.0266142557277
2015-03-23T01:00:00.000Z 20.0093349857605
2015-03-23T02:00:00.000Z 18.9851414732381
2015-03-23T03:00:00.000Z 18.5245615004214
2015-03-23T04:00:00.000Z 18.290694254732
2015-03-23T05:00:00.000Z 18.0595508666643
2015-03-23T06:00:00.000Z 18.4732789951039
2015-03-23T07:00:00.000Z 18.7258481532495
2015-03-23T08:00:00.000Z 18.5595128641976
2015-03-23T09:00:00.000Z 18.179674037842
2015-03-23T10:00:00.000Z 17.7681299392415
2015-03-23T11:00:00.000Z 17.443021321053
2015-03-23T12:00:00.000Z 17.3451205175492
2015-03-23T13:00:00.000Z 17.4374701133724
2015-03-23T14:00:00.000Z 17.8929191631296
2015-03-23T15:00:00.000Z 18.9122039984753
2015-03-23T16:00:00.000Z 19.6161969984469
2015-03-23T17:00:00.000Z 20.7299868156002
2015-03-23T18:00:00.000Z 21.7689130719553
2015-03-23T19:00:00.000Z 22.5533898355016
2015-03-23T20:00:00.000Z 22.8372668296634
2015-03-23T21:00:00.000Z 23.2014773800322
2015-03-23T22:00:00.000Z 22.5682062882985
2015-03-23T23:00:00.000Z 22.3205675513796
2015-03-24T00:00:00.000Z 20.8661118605035
2015-03-24T01:00:00.000Z 18.5360183512352
2015-03-24T02:00:00.000Z 17.5156724451801
2015-03-24T03:00:00.000Z 17.2066897483676
2015-03-24T04:00:00.000Z 17.1974604599623
2015-03-24T05:00:00.000Z 17.3377835934013
2015-03-24T06:00:00.000Z 17.28662295757
2015-03-24T07:00:00.000Z 17.4291104924263
2015-03-24T08:00:00.000Z 17.4228793012653
2015-03-24T09:00:00.000Z 17.4209561166271
2015-03-24T10:00:00.000Z 17.141757829703
2015-03-24T11:00:00.000Z 17.3048584589793
2015-03-24T12:00:00.000Z 17.337482794781
2015-03-24T13:00:00.000Z 17.7016509341158
2015-03-24T14:00:00.000Z 17.5637528905341
2015-03-24T15:00:00.000Z 18.8276163388499
2015-03-24T16:00:00.000Z 19.4404648699534
2015-03-24T17:00:00.000Z 20.5646049670802
2015-03-24T18:00:00.000Z 21.9525507884113
2015-03-24T19:00:00.000Z 21.9040221846194
2015-03-24T20:00:00.000Z 22.8197541616282
2015-03-24T21:00:00.000Z 22.2390831913042
2015-03-24T22:00:00.000Z 22.4688244906963
2015-03-24T23:00:00.000Z 21.9461828791739
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment