Skip to content

Instantly share code, notes, and snippets.

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

Working with Small Multiples to show some of my training stats for the Leadville 100. Runs are segmented by day of week to highlight the weekly breakdown of miles, and a gradient scale in each bar to represent the average elevation gain per mile. Sorting with small multiple can be quite fun - applying a custom delay function causes each bar to begin transitions at a different time.

Activity Name Activity Type Month Date Long Date Date Value Day of Week Time Distance Elevation Gain Avg Pace Max Pace Avg HR Max HR Calories Training Effect
Boulder Running Running July Sun, Jul 12, 2015 12:24 PM 7/12/2015 42197 Sunday 4:00:19 17.34 3399 13:52 6:46 130 154 2120 4.3
Manitou Springs Running Running July Sat, Jul 11, 2015 8:38 AM 7/11/2015 42196 Saturday 6:40:50 32.11 7021 15:37 5:47 138 160 4765 5
Boulder Running Running July Thu, Jul 9, 2015 4:05 PM 7/9/2015 42194 Thursday 1:27:25 9.74 259 8:58 5:48 148 162 1247 5
Boulder Running Running July Wed, Jul 8, 2015 3:58 PM 7/8/2015 42193 Wednesday 2:49:58 14.01 2320 12:08 4:55 138 170 1844 5
Boulder Running Running July Tue, Jul 7, 2015 4:56 PM 7/7/2015 42192 Tuesday 1:36:06 10.09 295 9:31 4:49 144 160 1381 5
Boulder Running Running July Sun, Jul 5, 2015 11:24 AM 7/5/2015 42190 Sunday 55:34:00 6.06 164 9:10 5:35 144 160 798 5
Boulder Running Running July Wed, Jul 1, 2015 4:04 PM 7/1/2015 42186 Wednesday 57:43:00 5.14 161 11:14 6:02 122 135 688 3.4
Leadville Running Running June Mon, Jun 29, 2015 10:07 AM 6/29/2015 42184 Monday 3:47:49 20.81 1562 10:50 7:16 138 167 2987 5
Twin Lakes Running Running June Sun, Jun 28, 2015 8:38 AM 6/28/2015 42183 Sunday 6:22:26 21.21 6463 18:02 5:03 141 169 4799 5
Leadville Running Running June Sat, Jun 27, 2015 8:35 AM 6/27/2015 42182 Saturday 4:59:23 25.78 2871 11:37 6:46 143 163 4391 5
Boulder Running Running June Thu, Jun 25, 2015 2:45 PM 6/25/2015 42180 Thursday 1:45:54 10.17 285 10:25 6:04 179 210 1429 4
Boulder Running Running June Wed, Jun 24, 2015 4:50 PM 6/24/2015 42179 Wednesday 2:28:33 13.97 433 10:38 5:09 171 203 1942 3.9
Boulder Running Running June Tue, Jun 23, 2015 4:08 PM 6/23/2015 42178 Tuesday 1:58:21 10.08 1138 11:45 5:53 155 206 1474 3.5
Boulder Running Running June Sun, Jun 21, 2015 12:03 PM 6/21/2015 42176 Sunday 1:48:50 7.96 1562 13:40 8:02 148 187 1155 3
Boulder Running Running June Sat, Jun 20, 2015 9:47 AM 6/20/2015 42175 Saturday 2:42:18 12.03 2234 13:29 5:27 151 195 1873 3.2
Boulder Running Running June Thu, Jun 18, 2015 4:29 PM 6/18/2015 42173 Thursday 56:35:00 6.12 187 9:15 6:13 143 158 711 3.3
Boulder Running Running June Wed, Jun 17, 2015 4:23 PM 6/17/2015 42172 Wednesday 1:19:13 8.02 256 9:52 4:58 146 158 980 3.1
Boulder Running Running June Tue, Jun 16, 2015 4:05 PM 6/16/2015 42171 Tuesday 57:54:00 6.34 207 9:08 4:03 140 156 669 3
Leadville Running Running June Sun, Jun 14, 2015 7:46 AM 6/14/2015 42169 Sunday 5:15:32 24.9 1467 12:40 7:26 136 160 2965 3.8
Leadville Running Running June Sat, Jun 13, 2015 9:38 AM 6/13/2015 42168 Saturday 4:41:14 24.77 1640 11:21 6:33 144 162 3120 4
Boulder Running Running June Thu, Jun 11, 2015 3:49 PM 6/11/2015 42166 Thursday 43:50:00 5.1 184 8:36 4:51 146 161 503 3.3
Boulder Running Running June Wed, Jun 10, 2015 2:16 PM 6/10/2015 42165 Wednesday 2:12:22 9.92 1890 13:20 7:41 162 201 1487 4.5
Boulder Running Running June Tue, Jun 9, 2015 4:17 PM 6/9/2015 42164 Tuesday 59:11:00 5.1 161 11:36 6:10 177 207 719 4
Boulder Running Running June Sun, Jun 7, 2015 10:22 AM 6/7/2015 42162 Sunday 4:32:17 19.95 4088 13:39 3:37 148 183 2777 3.2
Boulder Running Running June Sat, Jun 6, 2015 10:19 AM 6/6/2015 42161 Saturday 4:25:15 18 4226 14:44 6:14 143 171 2271 --
Boulder Running Running June Thu, Jun 4, 2015 4:15 PM 6/4/2015 42159 Thursday 1:51:32 10.17 299 10:58 5:32 149 160 1183 3.3
Boulder Running Running June Wed, Jun 3, 2015 4:05 PM 6/3/2015 42158 Wednesday 2:07:06 10 1982 12:43 7:07 150 169 1288 3.8
Boulder Running Running June Tue, Jun 2, 2015 4:01 PM 6/2/2015 42157 Tuesday 1:53:53 10.03 308 11:22 5:17 142 182 1120 2.9
Boulder Running Running May Sun, May 31, 2015 11:32 AM 5/31/2015 42155 Sunday 4:07:39 19.75 2192 12:32 4:46 148 170 2639 3.8
Boulder Running Running May Sat, May 30, 2015 11:11 AM 5/30/2015 42154 Saturday 5:50:10 24.57 4370 14:15 5:07 149 186 3485 4.1
Boulder Running Running May Thu, May 28, 2015 3:59 PM 5/28/2015 42152 Thursday 1:40:15 10.01 308 10:01 7:22 150 173 1258 3.6
Boulder Running Running May Wed, May 27, 2015 4:36 PM 5/27/2015 42151 Wednesday 1:22:26 8.39 246 9:50 4:51 153 165 1062 3.4
Boulder Running Running May Tue, May 26, 2015 4:01 PM 5/26/2015 42150 Tuesday 59:28:00 6.26 197 9:30 6:23 147 169 739 3.2
Boulder Running Running May Sun, May 24, 2015 2:54 PM 5/24/2015 42148 Sunday 2:00:51 8.31 1381 14:33 4:55 137 179 1223 2.6
Boulder Running Running May Sat, May 23, 2015 10:31 AM 5/23/2015 42147 Saturday 2:04:38 9.33 1647 13:22 7:05 150 174 1541 3.9
Brooklyn Running Running May Thu, May 21, 2015 6:45 AM 5/21/2015 42145 Thursday 53:04:00 6.08 358 8:43 3:44 161 194 758 3.8
Brooklyn Running Running May Wed, May 20, 2015 6:42 AM 5/20/2015 42144 Wednesday 1:39:12 7.98 305 12:26 6:05 153 175 1128 2.8
Brooklyn Running Running May Tue, May 19, 2015 6:27 AM 5/19/2015 42143 Tuesday 54:50:00 6.11 243 8:59 5:39 147 163 781 3.8
Brooklyn Running Running May Sun, May 17, 2015 10:04 AM 5/17/2015 42141 Sunday 2:35:52 13.95 486 11:10 4:49 130 154 1441 3.1
Brooklyn Running Running May Sat, May 16, 2015 9:59 AM 5/16/2015 42140 Saturday 3:30:21 21 781 10:01 2:56 138 175 2160 3.5
Brooklyn Running Running May Thu, May 14, 2015 6:24 AM 5/14/2015 42138 Thursday 2:03:26 10.26 830 12:02 6:05 122 145 1049 2.7
Brooklyn Running Running May Wed, May 13, 2015 5:26 AM 5/13/2015 42137 Wednesday 2:20:32 12.27 433 11:27 5:00 140 172 1597 2.3
Brooklyn Running Running May Tue, May 12, 2015 6:30 AM 5/12/2015 42136 Tuesday 1:46:32 10.06 331 10:36 7:04 119 169 923 2.4
Brooklyn Running Running May Sun, May 10, 2015 11:03 AM 5/10/2015 42134 Sunday 38:42:00 4.07 144 9:30 5:45 136 180 463 2.3
Brooklyn Running Running May Sat, May 9, 2015 1:10 PM 5/9/2015 42133 Saturday 58:44:00 6.01 207 9:47 4:26 152 176 786 2.9
Brooklyn Running Running May Thu, May 7, 2015 6:51 AM 5/7/2015 42131 Thursday 26:45:00 3.11 98 8:37 6:00 157 183 400 3
Brooklyn Running Running May Wed, May 6, 2015 6:38 AM 5/6/2015 42130 Wednesday 34:36:00 3.93 128 8:48 3:40 143 187 486 3
Brooklyn Running Running May Tue, May 5, 2015 6:43 AM 5/5/2015 42129 Tuesday 32:09:00 3 102 10:44 6:28 136 176 374 2.4
Tomkins Cove Running Running May Sat, May 2, 2015 4:58 AM 5/2/2015 42126 Saturday 11:27:53 52 8396 13:14 6:18 147 187 6620 5
Brooklyn Running Running April Thu, Apr 30, 2015 7:40 AM 4/30/2015 42124 Thursday 22:13 2.97 108 7:29 3:25 180 202 391 3.4
Brooklyn Running Running April Wed, Apr 29, 2015 7:36 AM 4/29/2015 42123 Wednesday 32:13:00 4.04 125 7:58 5:03 175 206 524 3.5
Brooklyn Running Running April Tue, Apr 28, 2015 7:04 AM 4/28/2015 42122 Tuesday 24:09:00 3.01 115 8:02 4:31 162 206 365 3
Treadmill Running Running April Sat, Apr 25, 2015 3:01 PM 4/25/2015 42119 Saturday 14:59 1.03 7 14:37 9:43 124 163 140 1.5
Treadmill Running Running April Thu, Apr 23, 2015 11:48 AM 4/23/2015 42117 Thursday 24:42:00 2.01 1 12:19 9:19 130 192 241 1.9
Treadmill Running Running April Tue, Apr 21, 2015 11:38 AM 4/21/2015 42115 Tuesday 41:43:00 3.01 3 13:53 9:29 117 170 357 2
Brooklyn Running Running April Tue, Apr 14, 2015 6:55 AM 4/14/2015 42108 Tuesday 1:25:05 10.01 367 8:30 4:31 136 151 946 2.5
Brooklyn Running Running April Sun, Apr 12, 2015 11:01 AM 4/12/2015 42106 Sunday 2:56:10 20.01 764 8:48 6:41 150 210 1930 4
Brooklyn Running Running April Sat, Apr 11, 2015 8:38 AM 4/11/2015 42105 Saturday 1:34:36 10.01 489 9:27 4:19 170 208 1357 5
Brooklyn Running Running April Thu, Apr 9, 2015 6:23 AM 4/9/2015 42103 Thursday 48:44:00 6.23 246 7:50 4:06 167 195 747 4.9
Brooklyn Running Running April Wed, Apr 8, 2015 7:11 AM 4/8/2015 42102 Wednesday 1:03:13 8 331 7:54 5:45 172 198 1043 5
Brooklyn Running Running April Tue, Apr 7, 2015 6:31 AM 4/7/2015 42101 Tuesday 48:51:00 6.13 233 7:58 3:05 166 194 766 5
Brooklyn Running Running April Sun, Apr 5, 2015 9:20 AM 4/5/2015 42099 Sunday 3:30:01 20.07 666 8:47 4:59 147 164 2303 3.5
Brooklyn Running Running April Sat, Apr 4, 2015 10:39 AM 4/4/2015 42098 Saturday 4:44:48 30.01 1690 9:29 3:26 148 193 3431 3.9
Brooklyn Running Running April Thu, Apr 2, 2015 6:36 AM 4/2/2015 42096 Thursday 56:17:00 6.34 197 8:53 3:36 163 191 841 3.3
Brooklyn Running Running April Wed, Apr 1, 2015 7:06 AM 4/1/2015 42095 Wednesday 1:10:12 8.15 302 8:37 3:04 151 178 900 3.2
Brooklyn Running Running March Tue, Mar 31, 2015 7:45 AM 3/31/2015 42094 Tuesday 50:28:00 6.15 253 8:12 4:22 167 192 825 3.8
Brooklyn Running Running March Sat, Mar 28, 2015 12:14 PM 3/28/2015 42091 Saturday 2:59:13 20.71 886 8:39 4:27 147 188 2256 3.2
Brooklyn Running Running March Thu, Mar 26, 2015 7:20 AM 3/26/2015 42089 Thursday 50:10:00 6.14 262 8:11 5:37 148 184 743 3
Brooklyn Running Running March Wed, Mar 25, 2015 7:11 AM 3/25/2015 42088 Wednesday 1:05:53 8.01 312 8:13 4:57 142 159 886 2.8
Brooklyn Running Running March Tue, Mar 24, 2015 6:56 AM 3/24/2015 42087 Tuesday 52:07:00 6.05 253 8:37 6:55 153 191 720 2.8
Brooklyn Running Running March Sun, Mar 22, 2015 11:40 AM 3/22/2015 42085 Sunday 2:57:40 20.07 876 8:51 5:28 141 161 2176 3.2
Brooklyn Running Running March Sat, Mar 21, 2015 11:57 AM 3/21/2015 42084 Saturday 3:04:28 20.11 850 9:10 4:43 179 213 2749 3.6
Brooklyn Running Running March Thu, Mar 19, 2015 7:22 AM 3/19/2015 42082 Thursday 51:04:00 6.09 256 8:23 6:05 171 212 801 3.4
Brooklyn Running Running March Wed, Mar 18, 2015 7:08 AM 3/18/2015 42081 Wednesday 1:05:41 8.01 331 8:12 6:18 175 208 1058 3.8
Brooklyn Running Running March Tue, Mar 17, 2015 8:40 AM 3/17/2015 42080 Tuesday 47:31:00 6 253 7:55 4:10 155 189 753 3.5
Brooklyn Running Running March Sun, Mar 15, 2015 12:01 PM 3/15/2015 42078 Sunday 1:04:27 8.3 436 7:46 3:23 161 196 1010 3.6
Brooklyn Running Running March Sat, Mar 14, 2015 10:14 AM 3/14/2015 42077 Saturday 1:39:37 12 614 8:18 5:28 155 176 1539 4
Brooklyn Running Running March Thu, Mar 12, 2015 7:29 AM 3/12/2015 42075 Thursday 47:41:00 6.08 305 7:50 5:26 149 173 718 3.2
Brooklyn Running Running March Wed, Mar 11, 2015 6:41 AM 3/11/2015 42074 Wednesday 1:05:15 8.14 289 8:01 4:19 167 194 1053 4.3
Treadmill Running Running March Tue, Mar 10, 2015 11:39 AM 3/10/2015 42073 Tuesday 58:43:00 6.02 1 9:45 8:51 154 205 534 2
Brooklyn Running Running March Sun, Mar 8, 2015 11:12 AM 3/8/2015 42071 Sunday 3:22:58 20.01 912 10:09 3:58 145 198 2488 3.3
Brooklyn Running Running March Sat, Mar 7, 2015 9:35 AM 3/7/2015 42070 Saturday 5:05:59 30.01 1453 10:12 5:00 137 171 3248 3.6
Brooklyn Running Running March Thu, Mar 5, 2015 7:20 AM 3/5/2015 42068 Thursday 25:40:00 3.01 108 8:32 4:58 138 152 355 2.3
Brooklyn Running Running March Wed, Mar 4, 2015 7:10 AM 3/4/2015 42067 Wednesday 33:04:00 4.02 177 8:14 6:10 140 162 471 2.7
Brooklyn Running Running March Tue, Mar 3, 2015 6:27 AM 3/3/2015 42066 Tuesday 30:23:00 3.37 144 9:02 6:01 125 139 344 1.6
Brooklyn Running Running March Sun, Mar 1, 2015 10:46 AM 3/1/2015 42064 Sunday 1:02:35 8.01 338 7:49 4:49 152 173 920 3.4
Brooklyn Running Running February Sat, Feb 28, 2015 10:23 AM 2/28/2015 42063 Saturday 1:45:17 12.51 489 8:25 5:21 150 172 1342 3.2
Brooklyn Running Running February Thu, Feb 26, 2015 7:05 AM 2/26/2015 42061 Thursday 51:10:00 6.2 269 8:16 5:33 146 193 690 3.4
Treadmill Running Running February Wed, Feb 25, 2015 12:19 PM 2/25/2015 42060 Wednesday 1:16:15 8.02 1 9:30 8:14 158 188 1046 3.3
Treadmill Running Running February Tue, Feb 24, 2015 12:27 PM 2/24/2015 42059 Tuesday 1:04:19 6.5 3 9:54 8:56 155 193 588 2.1
Brooklyn Running Running February Sun, Feb 22, 2015 11:07 AM 2/22/2015 42057 Sunday 3:20:19 20.02 915 10:00 3:14 146 175 2426 3.5
Brooklyn Running Running February Sat, Feb 21, 2015 12:45 PM 2/21/2015 42056 Saturday 3:19:13 20.26 971 9:50 4:42 144 175 2368 3.4
Treadmill Running Running February Thu, Feb 19, 2015 12:15 PM 2/19/2015 42054 Thursday 51:39:00 5.06 1 10:12 8:34 158 191 678 3.2
Treadmill Running Running February Wed, Feb 18, 2015 12:00 PM 2/18/2015 42053 Wednesday 1:43:27 10.05 7 10:17 8:39 141 166 1097 2.5
Treadmill Running Running February Tue, Feb 17, 2015 12:19 PM 2/17/2015 42052 Tuesday 49:36:00 5.14 16 9:39 7:02 148 176 647 3.2
Treadmill Running Running February Sun, Feb 15, 2015 4:23 PM 2/15/2015 42050 Sunday 1:13:23 8.03 161 9:08 7:52 140 164 929 3
Brooklyn Running Running February Sat, Feb 14, 2015 3:03 PM 2/14/2015 42049 Saturday 1:57:10 12.56 522 9:20 4:27 138 166 1330 3
Brooklyn Running Running February Thu, Feb 12, 2015 8:07 AM 2/12/2015 42047 Thursday 48:45:00 6.02 279 8:06 6:53 155 169 771 3.7
Brooklyn Running Running February Wed, Feb 11, 2015 6:36 AM 2/11/2015 42046 Wednesday 1:04:32 8.05 459 8:01 3:56 146 163 860 3.2
Treadmill Running Running February Tue, Feb 10, 2015 12:58 PM 2/10/2015 42045 Tuesday 58:46:00 6.11 3 9:37 8:05 142 160 751 2.9
Brooklyn Running Running February Sun, Feb 8, 2015 12:20 PM 2/8/2015 42043 Sunday 1:24:25 10.07 367 8:23 4:44 156 177 1260 4.2
Treadmill Running Running February Sat, Feb 7, 2015 4:03 PM 2/7/2015 42042 Saturday 3:44:02 22.02 112 10:11 8:28 145 169 2317 3.7
Treadmill Running Running February Thu, Feb 5, 2015 12:40 PM 2/5/2015 42040 Thursday 56:07:00 6.02 7 9:19 7:11 144 164 796 3.3
Treadmill Running Running February Wed, Feb 4, 2015 12:17 PM 2/4/2015 42039 Wednesday 1:32:33 10.08 36 9:11 7:00 134 161 1064 2.9
Treadmill Running Running February Tue, Feb 3, 2015 12:20 PM 2/3/2015 42038 Tuesday 1:10:54 7.54 1 9:24 8:15 132 144 778 2.5
Brooklyn Running Running February Sun, Feb 1, 2015 12:42 PM 2/1/2015 42036 Sunday 1:28:46 10.04 400 8:50 5:49 139 163 1111 3.2
Treadmill Run Running January Sat, Jan 31, 2015 3:50 PM 1/31/2015 42035 Saturday 3:26:52 20.09 174 10:18 7:55 -- -- 2901 --
Brooklyn Running Running January Thu, Jan 29, 2015 6:40 AM 1/29/2015 42033 Thursday 56:01:00 6.51 260 8:37 5:05 141 155 713 3
Brooklyn Running Running January Wed, Jan 28, 2015 6:48 AM 1/28/2015 42032 Wednesday 1:11:47 8.15 384 8:49 4:39 133 149 790 2.6
Brooklyn Running Running January Tue, Jan 27, 2015 12:14 PM 1/27/2015 42031 Tuesday 57:51:00 6.39 272 9:04 5:54 140 156 718 3
Brooklyn Running Running January Sun, Jan 25, 2015 11:37 AM 1/25/2015 42029 Sunday 1:23:14 10.33 394 8:03 2:04 150 176 1020 4.2
Brooklyn Running Running January Sat, Jan 24, 2015 8:05 AM 1/24/2015 42028 Saturday 3:40:29 20.04 1063 11:00 4:58 -- -- 2856 --
Weekly Run Street Running January Thu, Jan 22, 2015 11:00 AM 1/22/2015 42026 Thursday 42:47:00 5.3 16 8:04 -- -- -- 668 --
Weekly Run Street Running January Wed, Jan 21, 2015 11:15 AM 1/21/2015 42025 Wednesday 1:22:41 10 161 8:16 -- -- -- 1246 --
Weekly Run Street Running January Tue, Jan 20, 2015 11:00 AM 1/20/2015 42024 Tuesday 43:59:00 5.3 16 8:18 -- -- -- 668 --
<!DOCTYPE html>
<!-- Paul Buffa 2015
-->
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
button {
font: 12px sans-serif;
text-align: center;
}
div {
margin-top: 10px;
margin-bottom: 10px;
font: 12px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.square {
stroke: #000;
stroke-opacity: .2;
stroke-width: 1;
}
.x {
font-size: 0px;
}
.background {
fill: #000;
fill-opacity: .02;
stroke-opacity: .1;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<div> &nbsp; Sort By:
<button id="sort_five">Distance Asc.</button>
<button id="sort_six">Distance Desc.</button>
<button id="sort_four">Elevation Gain per Mile Asc.</button>
<button id="sort_three">Elevation Gain per Mile Desc.</button>
<button id="sort_two">Date Asc.</button>
<button id="sort_one">Date Desc.</button>
</div>
<br />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 30, bottom: 40, left: 10},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var y = d3.scale.linear()
.range([height, 0])
.domain([0,53]);
var x = d3.scale.ordinal()
.rangeBands([0,width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(0);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var opacityScale = d3.scale.linear()
.domain([0,300])
.range([0.20, .70]);
var colorScale = d3.scale.linear()
.domain([0,300])
.range(["green","blue"]);
// Loading in running data
d3.tsv("data.tsv", function(error, data) {
// Making some modifications to the dataset
var parseDate = d3.time.format("%M/%d/%Y").parse;
var formatDate = d3.time.format("%M/%d");
data.forEach(function(d) {
d['Distance'] = +d['Distance'];
d['Calories'] = +d['Calories'];
d['Elevation Gain'] = +d['Elevation Gain'];
d['Date'] = formatDate(parseDate(d['Date']));
d['Elevation per Mile'] = d['Elevation Gain'] / d['Distance'];
});
// Setting the priority order for the chart series
var priority_order = ['Tuesday', 'Wednesday', 'Thursday', 'Saturday', 'Sunday', 'Monday'];
// Assigning key and main sort
var topics = d3.nest()
.key(function(d) { return d['Day of Week']; })
.sortKeys(d3.ascending)
.sortKeys(function(a,b) { return priority_order.indexOf(a) - priority_order.indexOf(b); })
.entries(data);
// SVG variable
var svg = d3.select("body").selectAll("svg")
.data(topics)
.enter().append("svg")
.attr("id", function(d) { return d.key; })
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", function(d) { return "chart " + d.key; })
.append("g")
.attr("transform", "translate(" + (margin.left + 20) + "," + margin.top + ")")
.each(multiple);
// Legend
var legend = d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 30);
// Adding Gradient
var gradient = legend.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "green")
.attr("stop-opacity", .3);
gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "blue")
.attr("stop-opacity", .7);
legend.append("svg:rect")
.attr("x", 790)
.attr("width", 100)
.attr("height", 10)
.style("fill", "url(#gradient)");
// Appending Legend text
legend.append("text")
.attr("x", 785)
.attr("y", 5)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text("Elevation Gain per Mile (ft)");
legend.append("text")
.attr("x", 795)
.attr("y", 15)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text("0");
legend.append("text")
.attr("x", 890)
.attr("y", 15)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text("300");
svg.append("text")
.attr("x", 0)
.attr("y", -8)
.style("text-anchor", "top")
.style("font", "14px sans-serif")
.style("font-weight", "bold")
.text(function(d) { return d.key; });
// Begin function for each loop on line 125
function multiple(topic) {
var svg = d3.select(this);
svg.append("rect")
.attr("class","background")
.attr("width", width)
.attr("height", height);
x.domain(topic.values
.sort(function(a, b) { return d3.ascending(a['Date Value'],b['Date Value']); })
.map(function(d) { return d['Date']; }));
// add in the dots
svg.selectAll(".square")
.data(topic.values)
.enter().append("rect")
.attr("width", 10)
.attr("height", function(d,i) { return height - y(d['Distance']); })
.attr("rx", 2)
.attr("ry", 2)
.style("fill", function(d) { return colorScale(d['Elevation per Mile']); })
.attr("class",function(d) { return "square " + d['Month'];})
.attr("id",function(d) { return d['Type']; })
.style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
.attr("y", function(d,i) { return y(d['Distance']); })
.attr("x", function(d, i) { return x(d['Date']); });
// Axis Labels
svg.selectAll("text")
.data(topic.values)
.enter().append("text")
.attr("class", function(d) { return "title " + d['Month'] + "text"; })
.attr("y", height + 6)
.attr("text-anchor", "top")
.style("writing-mode","tb-rl")
.attr("x", function(d, i) { return x(d['Date']) + 5; })
.text(function(d) { return d['Date']});
// appending the axes
svg.append("g")
.attr("class", "x axis")
.style("stroke-dasharray", function(d) {
if(d.key == 'Overall') { return "0, 0" }
else { return "1, 1" } })
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style("stroke-dasharray", function(d) {
if(d.key == 'Overall') { return "0, 0" }
else { return "1, 1" } })
.call(yAxis);
// Interactive Events - Sorts
// Sort by Date Descending
function changeSortOne() {
// turning off pointer events
d3.selectAll(".square")
.style("pointer-events","None");
d3.selectAll(".title")
.style("pointer-events","None");
d3.select("body").selectAll("svg")
.select("g")
.each(change);
function change(topic) {
var svg = d3.select(this);
x.domain(topic.values.sort(function(a, b) { return d3.descending(a['Date Value'],b['Date Value']); })
.map(function(d) { return d['Date']; }));
svg.selectAll(".square")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']); });
svg.selectAll(".title")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']) + 5; });
// turning pointer events back on
d3.selectAll(".square")
.transition()
.delay(4000)
.style("pointer-events","all");
d3.selectAll(".title")
.transition()
.delay(4000)
.style("pointer-events","all");
}
} // Ends Sort One
d3.selectAll("#sort_one").on("click", changeSortOne);
// Sort by Date Ascending
function changeSortTwo() {
// turning off pointer events
d3.selectAll(".square")
.style("pointer-events","None");
d3.selectAll(".title")
.style("pointer-events","None");
d3.select("body").selectAll("svg")
.select("g")
.each(change);
function change(topic) {
var svg = d3.select(this);
x.domain(topic.values.sort(function(a, b) { return d3.ascending(a['Date Value'],b['Date Value']); })
.map(function(d) { return d['Date']; }));
svg.selectAll(".square")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']); });
svg.selectAll(".title")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']) + 5; });
// turning pointer events back on
d3.selectAll(".square")
.transition()
.delay(4000)
.style("pointer-events","all");
d3.selectAll(".title")
.transition()
.delay(4000)
.style("pointer-events","all");
}
} // Ends Sort Two
d3.selectAll("#sort_two").on("click", changeSortTwo);
// Sort by Last Name
function changeSortThree() {
// turning off pointer events
d3.selectAll(".square")
.style("pointer-events","None");
d3.selectAll(".title")
.style("pointer-events","None");
d3.select("body").selectAll("svg")
.select("g")
.each(change);
function change(topic) {
var svg = d3.select(this);
x.domain(topic.values.sort(function(a, b) { return d3.descending(a['Elevation per Mile'],b['Elevation per Mile']); })
.map(function(d) { return d['Date']; }));
svg.selectAll(".square")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']); });
svg.selectAll(".title")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']) + 5; });
// turning pointer events back on
d3.selectAll(".square")
.transition()
.delay(4000)
.style("pointer-events","all");
d3.selectAll(".title")
.transition()
.delay(4000)
.style("pointer-events","all");
}
} // Ends Sort Three
d3.selectAll("#sort_three").on("click", changeSortThree);
// Sort by Elevation per Mile
function changeSortFour() {
// turning off pointer events
d3.selectAll(".square")
.style("pointer-events","None");
d3.selectAll(".title")
.style("pointer-events","None");
d3.select("body").selectAll("svg")
.select("g")
.each(change);
function change(topic) {
var svg = d3.select(this);
x.domain(topic.values.sort(function(a, b) { return d3.ascending(a['Elevation per Mile'],b['Elevation per Mile']); })
.map(function(d) { return d['Date']; }));
svg.selectAll(".square")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']); });
svg.selectAll(".title")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']) + 5; });
// turning pointer events back on
d3.selectAll(".square")
.transition()
.delay(4000)
.style("pointer-events","all");
d3.selectAll(".title")
.transition()
.delay(4000)
.style("pointer-events","all");
}
} // Ends Sort Four
d3.selectAll("#sort_four").on("click", changeSortFour);
// Sort by Distance Ascending
function changeSortFive() {
// turning off pointer events
d3.selectAll(".square")
.style("pointer-events","None");
d3.selectAll(".title")
.style("pointer-events","None");
d3.select("body").selectAll("svg")
.select("g")
.each(change);
function change(topic) {
var svg = d3.select(this);
x.domain(topic.values.sort(function(a, b) { return d3.ascending(a['Distance'],b['Distance']); })
.map(function(d) { return d['Date']; }));
svg.selectAll(".square")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']); });
svg.selectAll(".title")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']) + 5; });
// turning pointer events back on
d3.selectAll(".square")
.transition()
.delay(4000)
.style("pointer-events","all");
d3.selectAll(".title")
.transition()
.delay(4000)
.style("pointer-events","all");
}
} // Ends Sort Five
d3.selectAll("#sort_five").on("click", changeSortFive);
// Sort by Distane Descending
function changeSortSix() {
// turning off pointer events
d3.selectAll(".square")
.style("pointer-events","None");
d3.selectAll(".title")
.style("pointer-events","None");
d3.select("body").selectAll("svg")
.select("g")
.each(change);
function change(topic) {
var svg = d3.select(this);
x.domain(topic.values.sort(function(a, b) { return d3.descending(a['Distance'],b['Distance']); })
.map(function(d) { return d['Date']; }));
svg.selectAll(".square")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']); });
svg.selectAll(".title")
.transition()
.duration(2000)
.ease("bounce")
.delay(function(d,i) { return i * 50; })
.attr("x", function(d) { return x(d['Date']) + 5; });
// turning pointer events back on
d3.selectAll(".square")
.transition()
.delay(4000)
.style("pointer-events","all");
d3.selectAll(".title")
.transition()
.delay(4000)
.style("pointer-events","all");
}
}
d3.selectAll("#sort_six").on("click", changeSortSix);
} // Ends Multiple Loop
// Interactive Events - Hovers
function hover(d, i) {
d3.selectAll(".square")
.transition()
.duration(500)
.style("fill-opacity", .1)
.style("stroke-opacity", .2)
.attr("y", function(d,i) { return height - 5; })
.attr("height", 5);
d3.selectAll("." + d['Month'])
.transition()
.ease("elastic")
.duration(1500)
.attr("height", function(d,i) { return height - y(d['Distance']); })
.style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
.attr("y", function(d,i) { return y(d['Distance']); })
.style("stroke-opacity", 1);
d3.selectAll("." + d['Month'] + "text")
.style("fill-opacity", 1)
.style("font-size", 13);
}
function hoverOut(d, i) {
d3.selectAll(".square")
.transition()
.duration(500)
.style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
.style("stroke-opacity", .3)
.attr("height", function(d,i) { return height - y(d['Distance']); })
.attr("y", function(d,i) { return y(d['Distance']); });
d3.selectAll(".title")
.style("font-size", 10);
}
d3.selectAll(".square")
.on("mouseover", hover)
.on("mouseout", hoverOut);
d3.selectAll(".title")
.on("mouseover", hover)
.on("mouseout", hoverOut);
}); // Ends Data Function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment