Skip to content

Instantly share code, notes, and snippets.

@scottpham

scottpham/.block

Created May 31, 2017 21:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save scottpham/ca37e5d5ebf7ff7bfcedffeabf89a43a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save scottpham/ca37e5d5ebf7ff7bfcedffeabf89a43a to your computer and use it in GitHub Desktop.
Download ZIP
Standalone Line Chart
Raw
.block
license: mit
Raw
README.md
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>
<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>
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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment