Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Last active April 30, 2016 20:52
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/3502078 to your computer and use it in GitHub Desktop.
Save tmcw/3502078 to your computer and use it in GitHub Desktop.
Download ZIP
Running year-by-year
Raw
index.html
<html>
<head>
<title>runs over time</title>
<style>
body { margin: 0; padding: 0; background:#f8f8f8; }
svg {
font: 10px sans-serif;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
.area {
stroke-width:0;
fill-opacity:0.1;
}
.year {
text-anchor:end;
}
.axis path, .axis line {
fill: none;
stroke: #eee;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v2.js"></script>
<script src="vis.js"></script>
</body>
Raw
out.json
[{"date":"2011-07-21T00:28:12.000Z","distance":4661.04},{"date":"2011-07-17T22:00:18.000Z","distance":786.76},{"date":"2011-07-15T23:28:00.000Z","distance":3682.82},{"date":"2011-07-24T23:05:21.000Z","distance":4772.49},{"date":"2009-08-30T13:41:31.000Z","distance":6158.19},{"date":"2009-09-01T23:30:02.000Z","distance":5774.67},{"date":"2009-09-03T23:07:42.000Z","distance":2601.71},{"date":"2009-09-05T16:05:23.000Z","distance":6436.53},{"date":"2009-09-08T23:49:29.000Z","distance":3522.94},{"date":"2009-09-12T20:44:11.000Z","distance":5433.02},{"date":"2011-12-03T19:21:01.000Z","distance":4255.99},{"date":"2011-09-04T22:10:17.000Z","distance":3826.02},{"date":"2011-08-03T22:20:32.000Z","distance":2386.15},{"date":"2011-07-29T00:18:07.000Z","distance":3045.92},{"date":"2011-07-26T23:45:40.000Z","distance":4293.61},{"date":"2011-12-06T01:28:10.000Z","distance":4905.29},{"date":"2009-09-16T23:14:56.000Z","distance":4431.47},{"date":"2009-09-19T20:37:32.000Z","distance":3663.35},{"date":"2009-09-19T20:17:36.000Z","distance":2496.04},{"date":"2011-12-31T22:02:01.000Z","distance":4220.18},{"date":"2012-02-01T13:02:49.000Z","distance":3286.88},{"date":"2009-10-04T16:02:12.000Z","distance":6568.98},{"date":"2012-03-11T20:58:50.000Z","distance":8910.84},{"date":"2012-02-11T20:00:20.000Z","distance":2074.44},{"date":"2012-02-07T12:21:58.000Z","distance":3539.21},{"date":"2012-03-13T22:26:24.000Z","distance":3215.08},{"date":"2012-03-15T23:24:31.000Z","distance":4462.47},{"date":"2012-03-21T22:56:19.000Z","distance":3824.62},{"date":"2009-10-13T22:59:20.000Z","distance":3305.02},{"date":"2012-04-02T14:25:19.000Z","distance":8140.9},{"date":"2012-04-14T17:25:19.000Z","distance":14489.35},{"date":"2012-04-04T16:07:08.000Z","distance":4301.73},{"date":"2012-04-15T19:02:10.000Z","distance":4020.37},{"date":"2012-04-17T23:38:32.000Z","distance":8483.07},{"date":"2012-04-21T20:54:03.000Z","distance":9653.82},{"date":"2012-04-23T23:12:40.000Z","distance":4842.15},{"date":"2012-04-24T22:53:13.000Z","distance":8676.08},{"date":"2012-04-26T23:16:31.000Z","distance":8343.37},{"date":"2012-04-28T19:19:07.000Z","distance":6991.76},{"date":"2012-05-04T23:48:38.000Z","distance":3023.72},{"date":"2012-05-03T22:48:41.000Z","distance":5883.94},{"date":"2012-04-30T22:29:02.000Z","distance":6015.78},{"date":"2012-05-06T11:02:11.000Z","distance":21219.41},{"date":"2012-05-12T19:43:18.000Z","distance":3179.63},{"date":"2012-05-08T23:03:54.000Z","distance":4299.44},{"date":"2009-11-01T21:14:30.000Z","distance":4370.67},{"date":"2012-05-16T23:30:25.000Z","distance":4529.75},{"date":"2012-05-20T16:01:06.000Z","distance":3299.59},{"date":"2012-05-22T23:42:08.000Z","distance":6567.63},{"date":"2012-05-24T23:48:02.000Z","distance":5209.2},{"date":"2012-05-26T23:09:10.000Z","distance":2697.12},{"date":"2012-05-28T18:43:56.000Z","distance":4543.35},{"date":"2012-06-02T23:26:47.000Z","distance":6892.34},{"date":"2012-05-31T23:25:07.000Z","distance":7175.11},{"date":"2012-06-07T23:26:09.000Z","distance":5319.33},{"date":"2012-06-09T22:36:09.000Z","distance":8615.06},{"date":"2012-06-08T23:29:40.000Z","distance":1057.09},{"date":"2012-06-23T21:11:04.000Z","distance":6576.3},{"date":"2012-07-30T23:00:34.000Z","distance":6618.81},{"date":"2012-07-11T22:39:55.000Z","distance":5707.99},{"date":"2012-07-06T11:23:30.000Z","distance":3665.78},{"date":"2012-06-29T00:12:10.000Z","distance":3410.2},{"date":"2012-08-10T22:14:59.000Z","distance":5856.15},{"date":"2012-08-05T13:54:53.000Z","distance":5475.82},{"date":"2012-08-13T22:23:31.000Z","distance":3990.5},{"date":"2012-08-12T23:48:18.000Z","distance":5845.61},{"date":"2012-08-16T23:34:01.000Z","distance":3476.27},{"date":"2012-08-15T22:54:29.000Z","distance":5622.31},{"date":"2012-08-18T22:10:23.000Z","distance":10283.28},{"date":"2010-03-13T18:49:08.000Z","distance":4998.15},{"date":"2009-11-07T21:13:14.000Z","distance":7243.28},{"date":"2010-03-16T23:06:19.000Z","distance":5545.99},{"date":"2010-03-20T19:40:34.000Z","distance":5823.67},{"date":"2010-03-21T18:25:48.000Z","distance":5157.03},{"date":"2010-04-04T17:19:59.000Z","distance":5314.4},{"date":"2010-04-19T11:49:12.000Z","distance":3025.59},{"date":"2010-04-10T21:23:15.000Z","distance":4799.99},{"date":"2010-04-25T16:08:14.000Z","distance":6947.65},{"date":"2010-06-29T11:12:19.000Z","distance":5158.08},{"date":"2010-06-22T23:35:25.000Z","distance":3878.8},{"date":"2010-06-21T22:00:33.000Z","distance":201.12},{"date":"2010-07-02T11:13:35.000Z","distance":3713.85},{"date":"2010-07-03T13:16:17.000Z","distance":8919.55},{"date":"2010-07-15T00:14:21.000Z","distance":4494.64},{"date":"2010-08-10T23:54:47.000Z","distance":4510.79},{"date":"2010-07-27T23:13:00.000Z","distance":112.37},{"date":"2010-07-27T23:09:38.000Z","distance":586.43},{"date":"2010-09-13T22:48:15.000Z","distance":5489.34},{"date":"2010-10-17T17:26:30.000Z","distance":6808.24},{"date":"2011-02-09T00:20:20.000Z","distance":3951.52},{"date":"2011-02-13T16:49:55.000Z","distance":7116.29},{"date":"2011-02-18T02:39:06.000Z","distance":5648.52},{"date":"2011-02-19T22:03:42.000Z","distance":8530.82},{"date":"2011-02-27T21:12:43.000Z","distance":5021.97},{"date":"2011-03-27T18:35:25.000Z","distance":4913.68},{"date":"2011-04-15T22:47:46.000Z","distance":4876.58},{"date":"2011-04-17T16:47:39.000Z","distance":4755.66},{"date":"2011-04-20T17:34:37.000Z","distance":6457.15},{"date":"2011-04-30T18:16:05.000Z","distance":8792.49},{"date":"2011-05-15T20:53:27.000Z","distance":2943.96},{"date":"2011-06-26T23:43:57.000Z","distance":3736.66},{"date":"2011-06-30T22:15:26.000Z","distance":6503.52},{"date":"2011-07-02T21:15:20.000Z","distance":4008.34},{"date":"2011-07-14T23:59:15.000Z","distance":5152.4}]
Raw
vis.js
d3.json('out.json', function(out) {
var margin = {top: 20, right: 0, bottom: 20, left: 0},
width = 640 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var formatNumber = d3.format("d");
var y = d3.scale.linear()
.domain([0, 200])
.range([height, 0]);
var x = d3.time.scale()
.domain([new Date(2010, 0, 1), new Date(2011, 0, 1)])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(d3.time.months)
.tickFormat(d3.time.format("%b"))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(width)
.ticks(4)
.tickFormat(formatMiles)
.orient("right");
var years = d3.nest()
.key(function(d) {
return d.date.getFullYear();
})
.entries(out.map(function(o) {
o.date = new Date(o.date);
return o;
}));
for (var yr in years) {
var total = 0;
years[yr].values = years[yr].values.sort(function(a, b) {
return a.date - b.date;
}).map(function(k) {
total += (k.distance * 0.000621371);
k.total = total;
return k;
});
}
var color = d3.scale.category10();
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 + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis);
gy.selectAll("g").filter(function(d) { return d; })
.classed("minor", true);
gy.selectAll("text")
.attr("x", 4)
.attr("dy", -4);
var line = d3.svg.line()
.x(function(d) {
var year_normal = d.date.setYear(2010);
return x(year_normal);
})
.y(function(d) {
return y(d.total);
});
var area = d3.svg.area()
.x(function(d) {
var year_normal = d.date.setYear(2010);
return x(year_normal);
})
.y0(height)
.y1(function(d) {
return y(d.total);
});
svg.selectAll('path.line')
.data(years)
.enter()
.append("path")
.style("stroke", function(d) { return color(d.key); })
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
});
svg.selectAll('path.area')
.data(years)
.enter()
.append("path")
.style("fill", function(d) { return color(d.key); })
.attr("class", "area")
.attr("d", function(d) {
return area(d.values);
});
svg.selectAll('text.year')
.data(years)
.enter()
.append("text")
.style("fill", function(d) { return color(d.key); })
.attr("class", "year")
.attr('dx', -5)
.attr('dy', -5)
.attr("transform", function(d) {
var last = d.values[d.values.length - 1];
var year_normal = last.date.setYear(2010);
return 'translate(' + x(year_normal) + ',' +
y(last.total) + ')';
})
.text(function(d) {
return d.key;
});
function formatMiles(d) {
return formatNumber(d) + 'mi';
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment