A standalone D3 line chart.
This is example 107 of the screencast Introduction to D3.
forked from curran's block: Standalone Line Chart
license: mit |
A standalone D3 line chart.
This is example 107 of the screencast Introduction to D3.
forked from curran's block: Standalone Line Chart
<!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> | |
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> | |
<style> | |
.chart-line { | |
fill: none; | |
stroke: black; | |
stroke-width: 1px; | |
} | |
.axis text { | |
font-family: 'Poiret One', cursive; | |
font-size: 12pt; | |
} | |
.axis .label { | |
font-size: 22pt; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var outerWidth = 960; | |
var outerHeight = 500; | |
var margin = { left: 70, top: 5, right: 5, bottom: 60 }; | |
var xColumn = "timestamp"; | |
var yColumn = "temperature"; | |
var xAxisLabelText = "Time"; | |
var xAxisLabelOffset = 48; | |
var yAxisLabelText = "Temperature °C"; | |
var yAxisLabelOffset = 40; | |
var innerWidth = outerWidth - margin.left - margin.right; | |
var innerHeight = outerHeight - margin.top - margin.bottom; | |
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") | |
.attr("class", "chart-line"); | |
var xAxisG = g.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + innerHeight + ")") | |
var xAxisLabel = xAxisG.append("text") | |
.style("text-anchor", "middle") | |
.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")") | |
.attr("class", "label") | |
.text(xAxisLabelText); | |
var yAxisG = g.append("g") | |
.attr("class", "y axis"); | |
var yAxisLabel = yAxisG.append("text") | |
.style("text-anchor", "middle") | |
.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)") | |
.attr("class", "label") | |
.text(yAxisLabelText); | |
var xScale = d3.time.scale().range([0, innerWidth]); | |
var yScale = d3.scale.linear().range([innerHeight, 0]); | |
var xAxis = d3.svg.axis().scale(xScale).orient("bottom") | |
.ticks(5) | |
.outerTickSize(0); | |
var yAxis = d3.svg.axis().scale(yScale).orient("left") | |
.ticks(5) | |
.tickFormat(d3.format("s")) | |
.outerTickSize(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]; })); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
path.attr("d", line(data)); | |
} | |
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> |
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 | |
2015-03-25T00:00:00.000Z | 21.3218883084538 | |
2015-03-25T01:00:00.000Z | 19.9688738415096 | |
2015-03-25T02:00:00.000Z | 18.9409031033049 | |
2015-03-25T03:00:00.000Z | 18.1829931467353 | |
2015-03-25T04:00:00.000Z | 17.6071132686007 | |
2015-03-25T05:00:00.000Z | 17.4155712472229 | |
2015-03-25T06:00:00.000Z | 17.8112238813252 | |
2015-03-25T07:00:00.000Z | 18.0118371454174 | |
2015-03-25T08:00:00.000Z | 17.9925110740977 | |
2015-03-25T09:00:00.000Z | 17.9146107460869 | |
2015-03-25T10:00:00.000Z | 17.6354297651737 | |
2015-03-25T11:00:00.000Z | 17.2990959392658 | |
2015-03-25T12:00:00.000Z | 16.8942534144482 | |
2015-03-25T13:00:00.000Z | 17.0215911252788 | |
2015-03-25T14:00:00.000Z | 17.5370547200027 | |
2015-03-25T15:00:00.000Z | 19.6239569219906 | |
2015-03-25T16:00:00.000Z | 21.4284862546897 | |
2015-03-25T17:00:00.000Z | 22.5971622932944 | |
2015-03-25T18:00:00.000Z | 24.4516364021043 | |
2015-03-25T19:00:00.000Z | 26.314179825294 | |
2015-03-25T20:00:00.000Z | 27.2966725797272 | |
2015-03-25T21:00:00.000Z | 27.8594008881709 | |
2015-03-25T22:00:00.000Z | 26.98771523591 | |
2015-03-25T23:00:00.000Z | 26.1419652896808 | |
2015-03-26T00:00:00.000Z | 24.2967135065912 | |
2015-03-26T01:00:00.000Z | 21.2627783997077 | |
2015-03-26T02:00:00.000Z | 19.6223366524463 | |
2015-03-26T03:00:00.000Z | 18.9702936572059 | |
2015-03-26T04:00:00.000Z | 18.64173108115 | |
2015-03-26T05:00:00.000Z | 18.5430028446263 | |
2015-03-26T06:00:00.000Z | 18.2597209484404 | |
2015-03-26T07:00:00.000Z | 17.8251835175158 | |
2015-03-26T08:00:00.000Z | 17.4726877440558 | |
2015-03-26T09:00:00.000Z | 17.651946077925 | |
2015-03-26T10:00:00.000Z | 17.7491791888976 | |
2015-03-26T11:00:00.000Z | 17.5917881825657 | |
2015-03-26T12:00:00.000Z | 17.5239416379086 | |
2015-03-26T13:00:00.000Z | 17.5307201091079 | |
2015-03-26T14:00:00.000Z | 18.2489964460844 | |
2015-03-26T15:00:00.000Z | 20.2797517883074 | |
2015-03-26T16:00:00.000Z | 21.888709612845 | |
2015-03-26T17:00:00.000Z | 23.8693783046019 | |
2015-03-26T18:00:00.000Z | 25.6434924437705 | |
2015-03-26T19:00:00.000Z | 27.3338701714523 | |
2015-03-26T20:00:00.000Z | 30.235307632747 | |
2015-03-26T21:00:00.000Z | 31.6784014189275 | |
2015-03-26T22:00:00.000Z | 32.4243323492878 | |
2015-03-26T23:00:00.000Z | 33.1688980688728 | |
2015-03-27T00:00:00.000Z | 30.8713221141196 | |
2015-03-27T01:00:00.000Z | 26.8944097638179 | |
2015-03-27T02:00:00.000Z | 24.6128150483182 | |
2015-03-27T03:00:00.000Z | 22.889746429207 | |
2015-03-27T04:00:00.000Z | 21.7148736202902 | |
2015-03-27T05:00:00.000Z | 20.8438711038614 | |
2015-03-27T06:00:00.000Z | 19.2559699722154 | |
2015-03-27T07:00:00.000Z | 18.337368653838 | |
2015-03-27T08:00:00.000Z | 17.6177708093268 | |
2015-03-27T09:00:00.000Z | 17.1977444392481 | |
2015-03-27T10:00:00.000Z | 16.7043132969425 | |
2015-03-27T11:00:00.000Z | 16.2471811295094 | |
2015-03-27T12:00:00.000Z | 16.087861898997 | |
2015-03-27T13:00:00.000Z | 15.6362635324538 | |
2015-03-27T14:00:00.000Z | 15.692528763157 | |
2015-03-27T15:00:00.000Z | 16.1186855064984 | |
2015-03-27T16:00:00.000Z | 17.3886258325874 | |
2015-03-27T17:00:00.000Z | 18.2540910121364 | |
2015-03-27T18:00:00.000Z | 19.5148327389508 | |
2015-03-27T19:00:00.000Z | 20.6023266315466 | |
2015-03-27T20:00:00.000Z | 21.3854066767194 | |
2015-03-27T21:00:00.000Z | 21.9084983994613 |