Skip to content

Instantly share code, notes, and snippets.

@pstuffa
Last active September 7, 2016 14:33
Show Gist options
  • Save pstuffa/89c708400b3e30efbc96 to your computer and use it in GitHub Desktop.
Save pstuffa/89c708400b3e30efbc96 to your computer and use it in GitHub Desktop.
Running I

Working on Bostocks Difference Chart to show some of my running stats. This here has daily milage outlined by the black line, week over week improvement in green, and previous week's milage in gray.

Date Start Time Distance Previous Week Distance Cumulative Distance Previous Week Cumulative Distance Elevation Gain Avg Speed(Avg Pace) Max Speed(Best Pace) Avg HR Max HR Calories Training Effect
20150120 Tue, Jan 20, 2015 11:00 AM 43:59:00 5 5 5 5 0 8:18 -- -- -- 668 --
20150121 Wed, Jan 21, 2015 11:15 AM 1:22:41 10 10 15 15 0 8:16 -- -- -- 1,246 --
20150122 Thu, Jan 22, 2015 11:00 AM 42:47:00 5 5 20 20 0 8:04 -- -- -- 668 --
20150124 Sat, Jan 24, 2015 8:05 AM 3:40:29 20 20 40 40 1063 11:00 4:58 -- -- 2,856 --
20150125 Sun, Jan 25, 2015 11:37 AM 1:23:14 10 10 50 50 394 8:03 2:04 150 176 1,020 4.2
20150127 Tue, Jan 27, 2015 12:14 PM 57:51:00 6 5 56 55 272 9:04 5:54 140 156 718 3
20150128 Wed, Jan 28, 2015 6:48 AM 1:11:47 8 10 64 65 384 8:49 4:39 133 149 790 2.6
20150129 Thu, Jan 29, 2015 6:40 AM 56:01:00 7 5 71 70 260 8:37 5:05 141 155 713 3
20150131 Sat, Jan 31, 2015 3:50 PM 3:26:52 20 20 91 90 174 10:18 7:55 -- -- 2,901 --
20150201 Sun, Feb 1, 2015 12:42 PM 1:28:46 10 10 101 100 400 8:50 5:49 139 163 1,111 3.2
20150203 Tue, Feb 3, 2015 12:20 PM 1:10:54 8 6 109 106 0 9:24 8:15 132 144 778 2.5
20150203 Tue, Feb 3, 2015 12:15 PM 4:54 1 8 110 114 0 12.2 0 110 127 42 1.1
20150204 Wed, Feb 4, 2015 12:17 PM 1:32:33 10 7 120 121 36 9:11 7:00 134 161 1,064 2.9
20150205 Thu, Feb 5, 2015 12:40 PM 56:07:00 6 20 126 141 7 9:19 7:11 144 164 796 3.3
20150207 Sat, Feb 7, 2015 4:03 PM 3:24:02 22 8 148 149 112 10:11 8:28 145 169 2,317 3.7
20150208 Sun, Feb 8, 2015 12:20 PM 1:24:25 10 10 158 159 367 8:23 4:44 156 177 1,260 4.2
20150210 Tue, Feb 10, 2015 12:58 PM 58:46:00 6 6 164 165 3 9:37 8:05 142 160 751 2.9
20150211 Wed, Feb 11, 2015 6:36 AM 1:04:32 8 20 172 185 459 8:01 3:56 146 163 860 3.2
20150212 Thu, Feb 12, 2015 8:07 AM 48:45:00 6 2 178 187 279 8:06 6:53 155 169 771 3.7
20150214 Sat, Feb 14, 2015 3:03 PM 1:57:10 13 10 191 197 522 9:20 4:27 138 166 1,330 3
20150215 Sun, Feb 15, 2015 4:23 PM 1:13:23 8 6 199 203 161 9:08 7:52 140 164 929 3
20150217 Tue, Feb 17, 2015 12:19 PM 49:36:00 5 0 204 203 16 9:39 7:02 148 176 647 3.2
20150218 Wed, Feb 18, 2015 12:00 PM 1:43:27 10 8 214 211 7 10:17 8:39 141 166 1,097 2.5
20150219 Thu, Feb 19, 2015 12:15 PM 51:39:00 5 6 219 217 0 10:12 8:34 158 191 678 3.2
20150221 Sat, Feb 21, 2015 12:45 PM 3:19:13 20 13 239 230 971 9:50 4:42 144 175 2,368 3.4
20150222 Sun, Feb 22, 2015 11:07 AM 3:20:19 20 8 259 238 915 10:00 3:14 146 175 2,426 3.5
20150224 Tue, Feb 24, 2015 12:27 PM 1:04:19 7 5 266 243 3 9:54 8:56 155 193 588 2.1
20150225 Wed, Feb 25, 2015 12:19 PM 1:16:15 8 10 274 253 0 9:30 8:14 158 188 1,046 3.3
20150226 Thu, Feb 26, 2015 7:05 AM 51:10:00 6 20 280 273 269 8:16 5:33 146 193 690 3.4
20150228 Sat, Feb 28, 2015 10:23 AM 1:45:17 13 20 293 293 489 8:25 5:21 150 172 1,342 3.2
20150301 Sun, Mar 1, 2015 10:46 AM 1:02:35 8 7 301 300 338 7:49 4:49 152 173 920 3.4
20150303 Tue, Mar 3, 2015 6:27 AM 30:23:00 3 8 304 308 144 9:02 6:01 125 139 344 1.6
20150304 Wed, Mar 4, 2015 7:10 AM 33:04:00 4 0 308 308 177 8:14 6:10 140 162 471 2.7
20150305 Thu, Mar 5, 2015 7:20 AM 25:40:00 3 6 311 314 108 8:32 4:58 138 152 355 2.3
20150307 Sat, Mar 7, 2015 9:35 AM 5:05:59 30 13 341 327 1453 10:12 5:00 137 171 3,248 3.6
20150308 Sun, Mar 8, 2015 11:12 AM 3:22:58 20 8 361 335 912 10:09 3:58 145 198 2,488 3.3
20150310 Tue, Mar 10, 2015 11:39 AM 58:43:00 6 3 367 338 0 9:45 8:51 154 205 534 2
20150311 Wed, Mar 11, 2015 6:41 AM 1:05:15 8 3 375 341 289 8:01 4:19 167 194 1,053 4.3
20150312 Thu, Mar 12, 2015 7:29 AM 47:41:00 6 30 381 371 305 7:50 5:26 149 173 718 3.2
20150314 Sat, Mar 14, 2015 10:14 AM 1:39:37 12 20 393 391 614 8:18 5:28 155 176 1,539 4
20150315 Sun, Mar 15, 2015 12:01 PM 1:04:27 8 6 401 397 436 7:46 3:23 161 196 1,010 3.6
20150317 Tue, Mar 17, 2015 8:40 AM 47:31:00 6 1 407 398 253 7:55 4:10 155 189 753 3.5
20150318 Wed, Mar 18, 2015 7:08 AM 1:05:41 8 8 415 406 331 8:12 6:18 175 208 1,058 3.8
20150319 Thu, Mar 19, 2015 7:22 AM 51:04:00 6 6 421 412 256 8:23 6:05 171 212 801 3.4
20150321 Sat, Mar 21, 2015 11:57 AM 3:04:28 20 12 441 424 850 9:10 4:43 179 213 2,749 3.6
20150322 Sun, Mar 22, 2015 11:40 AM 2:57:40 20 8 461 432 876 8:51 5:28 141 161 2,176 3.2
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
stroke: #000;
stroke-dasharray: 3, 4;
}
.area.above {
fill: rgb(200,200,200);
}
.area.below {
fill: rgb(175,235,125);
}
.line {
fill: "none";
stroke: #000;
stroke-width: 1.5px;
stroke-opacity:0.5px;
}
p {
font-size: 16px;
padding-left: 50px;
}
.legend {
font-size: 12px;
}
rect {
stroke-width: 2;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 950 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var parseDate = d3.time.format("%Y%m%d").parse;
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var color = d3.scale.category20b();
var line = d3.svg.area()
.interpolate("step")
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d["Distance"]); });
var area = d3.svg.area()
.interpolate("step")
.x(function(d) { return x(d["Date"]); })
.y1(function(d) { return y(d["Distance"]); });
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 + ")");
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d["Date"] = parseDate(d["Date"]);
d["Distance"] = +d["Distance"];
d["Week over Week Distance"] = +d["Previous Week Distance"];
});
x.domain(d3.extent(data, function(d) { return d["Date"]; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["Distance"], d["Previous Week Distance"]); }),
d3.max(data, function(d) { return Math.max(d["Distance"], d["Previous Week Distance"]); })
]);
svg.datum(data);
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(height));
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(0))
.on("mouseover", mouseoverOne)
.on("mouseout", mouseout);;
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area.y0(function(d) { return y(d["Week over Week Distance"]); }))
.on("mouseover", mouseoverTwo)
.on("mouseout", mouseout);
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area)
.on("mouseover", mouseoverOne)
.on("mouseout", mouseout);
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Daily Miles");
var div = d3.select("body").append("div")
.style("position", "absolute")
.style("text-align", "center")
.style("width", "200px")
.style("height", "2em")
.style("line-height","2em")
.style("font", "11px, Helvetica, sans-serif;")
.style("color", "white")
.style("pointer-events", "none")
.style("background", "rgb(100,100,100)")
.style("border-radius", "8px")
.style("opacity", 0);
function mouseoverOne(d) {
div.html("Week Over Week Improvement")
.style("left", (d3.event.pageX + 9) + "px")
.style("top", (d3.event.pageY - 43) + "px")
.style("opacity", 1);
}
function mouseoverTwo(d) {
div.html("Last Week Miles")
.style("left", (d3.event.pageX + 9) + "px")
.style("top", (d3.event.pageY - 43) + "px")
.style("opacity", 1);
}
function mouseout() {
div.style("opacity", 1e-6);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment