Skip to content

Instantly share code, notes, and snippets.

@ColinEberhardt

ColinEberhardt/.block

Last active February 3, 2023 22:28
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Training miles vs finish time
Raw
.block
license: mit
Raw
README.md

This charts shows the finish times vs average weekly training mieage fow 1,000 London Marathon 2016 finishers as obtained from strava athletes data. The data is rendered using a combination of d3 and d3fc components.

Raw
index.html
<!DOCTYPE html>
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="//unpkg.com/d3@5.5.0"></script>
<script src="//unpkg.com/d3fc@14.0.41"></script>
<style>
body {
font-family: sans-serif;
font-size: 1.2em;
}
.tick {
font-size: 1.2em;
}
.multi:nth-child(1) .point {
opacity: 0.2;
}
svg>.multi:nth-child(2) {
fill: blue;
stroke: blue;
}
.y-axis-label {
transform: rotate(-90deg) translateY(20px) !important;
white-space: nowrap;
}
.point {
fill: inherit;
stroke: inherit;
}
.line {
stroke: inherit;
}
</style>
<div id='chart' style='height: 400px'></div>
<script src="miles-vs-finish.js" type='text/babel'></script>
Raw
miles-vs-finish.csv
miles finish
17.025 17837
69.2 9937
22.56875 12170
24.225 13137
16.95625 22578
51.59375 14703
69.56875 10060
38.89375 10026
14.2625 17948
41.1375 10761
23.1 16401
10.2 385177
45.0875 13617
20.01875 16558
35.51875 11176
27.8625 15376
1.7625 23309
23.625 13680
68.4125 12411
15.99375 13569
11.74375 16332
26.8125 15616
34.25 10538
14.425 16746
16.9375 17895
28.9125 14919
13.71875 12418
27.4125 10245
22.83125 12195
40.59375 12757
58.8875 10699
18.4875 33667
12.0625 14256
22.85625 20223
31.2 11729
14.0375 19812
25.60625 13152
24.2 14534
16 12505
27.50625 10677
58.0125 9282
31.38125 12362
18.39375 13133
32.95625 12082
37.7 12477
15.7875 18871
31.49375 10295
18.5625 21882
35.61875 13393
37.625 14058
33.9375 12643
21.53125 14899
16.24375 17133
12.79375 15625
21.73125 18944
94.40625 9920
21.05 12253
26.91875 10432
33.66875 10726
42.54375 12789
28.85625 13494
26.7875 14707
42.3875 11338
12.575 15696
13.668750000000001 14734
31.7375 28663
13.6125 19053
24.01875 15233
19.85 16198
50.475 11193
16.4375 19098
41.2 10231
19.63125 15380
13.43125 22076
18.1625 14051
25.975 15828
24.2875 14151
23.975 10124
16.16875 14351
28.64375 15778
40.375 11693
17.28125 20505
18.91875 15846
16.1125 12962
20.78125 13595
20.9 13201
38.4125 10469
22.09375 17823
26.65 13094
10.03125 14184
20.44375 13222
38.14375 9911
17.93125 14739
32.675 14574
8.7625 17834
70.2875 10540
15.68125 14834
21.5 15088
4.875 23226
28.53125 16128
21.99375 12825
12.1375 16469
21.38125 13957
12.2125 15435
12.674999999999999 18513
47.86875 12196
33.61875 13074
39.20625 11895
13.83125 14182
32.39375 12442
17.725 20044
18.59375 17058
12.50625 17622
20.16875 14269
11.0875 13124
16.70625 12854
22.8375 16197
28.79375 13722
17.175 21366
24.19375 13410
78.46875 10626
20.5125 15213
14.95625 15135
33.5875 15859
35.1 10241
14.28125 14738
25.75 11592
66.45 9863
33.33125 11719
68.64375 10710
27.75625 13597
10.0875 11474
9.8375 13404
22.33125 14542
32.7 12730
21.88125 15867
21.7875 10557
34.95625 10494
52.4625 9827
15.16875 15449
40.25625 15416
34.4375 12314
34.94375 10512
60.5375 12586
23.95 16643
42.44375 11497
11.2375 18447
21.20625 13743
17.25 18990
26.30625 14361
39.40625 10863
23.24375 13366
39.18125 30433
24.5625 12867
24.49375 15841
29.56875 12341
11.225 17924
29.5625 11257
9.2375 17626
63.7875 9490
10.28125 20301
83.35625 9735
22.70625 14166
10.69375 13251
21.8625 12872
29.30625 18239
26.94375 13483
29.212500000000002 10486
20.8875 15197
52.64375 10459
25.775 18669
11.09375 14862
46.85 10779
20.55 15740
22.24375 12265
55.64375 13057
26.2125 11795
19.84375 14281
37.99375 13968
42.96875 9852
23.1375 16195
18.5625 14264
27.775 16867
30.1125 13309
33.55625 14338
35.125 11614
22.2875 12052
26.43125 14327
21.6125 14774
29.05 12626
20.725 18781
54.40625 11365
16.8625 20481
23.58125 13723
54.825 11649
26.54375 16801
31.7625 10879
28.6125 15318
19.3625 17841
13.1875 15309
20.20625 15405
16.08125 15038
10.05 17395
35.6 16610
30.51875 13260
30.03125 20550
44.43125 13959
27.725 14076
13.025 15452
21.1875 17393
43.9375 10127
16.7625 16352
16.79375 14389
73.60625 10229
16.35 15720
36.16875 14898
30.8 16067
20.325 17299
27.5125 13523
49.2375 12520
15.86875 16829
26.44375 12572
27.125 11517
17.24375 14907
31.0125 12715
20.275 20760
26.9125 11486
11.4625 22154
44.65 10426
24.04375 13918
31.5625 11477
28.7 22076
45.075 9814
22.60625 16227
15.9625 16401
16.36875 18354
8.6125 22336
21.10625 13115
48.31875 12656
32.1125 14351
23.2625 16709
32.925 11222
22.0875 12953
17.325 13605
23.38125 14907
51.0625 10997
13.8625 15995
9.66875 12675
38.875 10714
17.31875 17802
54.75625 11371
17.39375 16452
13.58125 19805
36.16875 19214
24.7125 17880
27.84375 15300
15.9375 12582
19.2625 17925
30.13125 12086
28.275 11154
20.38125 11657
22.45 13298
28.1 18634
36.1875 11700
29.8125 12599
38.925 11236
35.7375 15708
23.18125 14682
28.3375 16295
22.26875 13257
11.90625 17131
13.13125 14296
29.30625 12054
43.99375 12560
22.9375 9889
30.05625 15533
28.19375 14278
19.46875 13726
42.775 17969
20.10625 19632
71.125 12029
21.9875 15335
20.60625 12710
34.9875 12599
25.76875 16810
14.59375 21092
85.8375 8897
26.16875 12740
50.18125 12148
19.3125 20567
25.15 13442
32.5 11302
11.95 18524
29.493750000000002 16235
16.4 17148
33.9875 13702
11.84375 13004
48.26875 9403
21.83125 12565
33.7 12715
36.95 12079
11.69375 13154
23.60625 15327
24.28125 15890
28.84375 13563
26.7125 16631
31.91875 11834
12.44375 14294
61.28125 10716
30.575 21228
39.03125 14165
9.55625 17606
37.34375 13682
38.2875 11101
22.55625 10628
19.475 16177
26.71875 13962
48.5125 9781
15.9625 14088
39.88125 11411
33.81875 10811
13.64375 17214
33.725 13401
35 10473
15.19375 14765
25.46875 13432
11.2375 24612
41.075 10674
38.7125 12116
19.275 16283
24.275 13659
21.1625 17148
24.13125 12977
26.13125 14309
47.2625 9693
58.025 11036
22.15 16099
16.125 18633
33.4 13788
34.6625 10552
18.68125 14481
29.09375 11430
24.7 13382
24.53125 12280
37.9125 11254
17.6625 16230
23.69375 12432
16.8875 19110
35.3125 12186
22.975 10352
10.5625 14251
50.38125 10728
28.80625 16297
26.20625 17589
18.8 16359
31.3375 12667
19.9375 13528
11.69375 16471
16.6375 17434
27.849999999999998 15071
49.1875 15828
26.1875 11149
41.28125 13767
18.39375 11551
24.26875 15038
37.78125 11796
17.66875 17762
11.375 15841
26.30625 11496
15.16875 17453
24.83125 13469
47.76875 9638
27.10625 13680
61.074999999999996 9946
55.825 12069
62.14375 10789
31.31875 14001
24.54375 14925
36.3125 13445
28.46875 14959
22.98125 15714
12.96875 13045
26.18125 15968
26.8125 15305
22.55 13912
12.28125 13302
29.1375 15852
28.26875 16140
28.46875 15258
42.125 10728
14.16875 14360
65.225 10203
20.275 12993
30.68125 13707
51.36875 12138
33.41875 12460
19.21875 16738
8.3375 15756
29.625 14392
61.95625 10165
9.6125 19862
27.70625 24400
23.525 16085
12.8 17136
17.34375 14325
18.20625 15322
32.3875 12206
45.15625 10532
51.2875 10627
32.0875 12668
33.25625 10727
18.41875 14064
27.80625 11149
16.19375 22176
5.64375 19739
22.725 12300
35.275 20759
24.6125 11207
39.45625 14121
34.50625 11549
21.825 15722
40.19375 11752
51.29375 9145
19.05 13882
16.5375 14169
24.68125 17864
25.60625 13341
36.475 10146
18.70625 17252
34.4375 15364
18.85625 18184
12.3 16924
45.125 12881
53.10625 10239
34.88125 14084
21.89375 11331
43.26875 12632
24.39375 16639
19.38125 16303
35.58125 11425
19.18125 10744
13.55 20505
27.775 15792
5.3625 19110
6.09375 34334
68.99375 11183
14.61875 17283
67.275 10008
40.0375 10646
16.99375 16221
25.35 14054
71.3375 15569
20.69375 18858
54.475 10282
30.85625 18626
13.45 18205
31.3375 11646
32.925 108855
45.64375 11338
9.0875 14913
35.40625 11499
23.58125 17655
15.725 17555
16.51875 22296
16.85625 12900
37.025 10980
40.15625 10109
43.3125 15289
29.475 15527
23.84375 16816
13.125 20859
14.5875 17991
37.95 13790
56.175 10440
14.7375 12486
14.99375 20573
22.30625 15503
18.1625 18962
22.43125 14726
22.66875 15148
42.975 10606
26.75 9714
25.0625 13060
24.9875 14165
18.875 21213
13.59375 18554
32.325 12707
33.0375 14665
28.45 12752
19.2375 15287
8.7125 18600
32.5125 15400
14.875 21605
13.5875 13313
27.78125 17392
16.81875 19602
49 13404
41.58125 11307
30.60625 14536
19.1125 19161
23.16875 17961
25.74375 11441
25.9125 11168
9.4625 15270
20.76875 15633
23.5625 13404
37.35 12517
5.29375 14102
29.5 16061
24.69375 18685
12.3 14867
19.75625 17406
95.8875 11067
38.0875 20562
30.3 13965
29.85 11844
33.35 15892
36.89375 12572
23.90625 16636
19.88125 12028
22.80625 15077
37.29375 15810
43.10625 12042
51.8 12354
48.1375 16271
21.26875 16530
31.68125 13997
11.2 13565
43.55625 10117
24.20625 21028
41.74375 12292
17.6375 17540
26.0875 16478
19.7375 15688
33.59375 14883
10.58125 14063
32.34375 11662
42.13125 10691
13.5875 21617
3.69375 12214
9.7625 18735
66.14375 9825
22.89375 15294
20.575 15743
8.14375 19244
25.28125 16944
25.5125 17142
71.9875 10448
25.23125 13912
39.43125 15300
33.275 15865
21.2 12230
63.70625 11219
50 10416
24.6125 16055
18.525 17755
18.19375 21457
33.725 12501
27.93125 10561
30.44375 13493
21.28125 18136
15.612499999999999 15699
16.7125 15467
28.95625 13392
63.6 10744
11.5375 14769
17.6375 15456
19.55 12509
23.975 13536
16.7375 12246
28.825 13113
25.61875 14651
23.14375 14759
13.43125 18129
21.375 17825
24.9 15698
36.225 12040
20.625 15389
38.94375 10742
42.93125 15687
37.2875 14819
33.28125 12668
26.46875 10524
15.293750000000001 16810
11.84375 16422
26.6625 10428
25.05625 15122
28.48125 12458
24.5625 18278
13.05625 18149
52.1625 11030
14.94375 17226
16.66875 16452
18.33125 17340
63.84375 9074
22.6625 15171
29.4875 14486
17.4875 15636
31.93125 17669
25.70625 17536
64.2 10113
15.94375 15241
39.94375 15574
64.275 9821
11.58125 19242
27.94375 15369
11.10625 16292
59.4875 11488
21.43125 13113
16.125 13235
28.525 19848
29.8875 12509
21.60625 12631
33.54375 12283
41.40625 14924
30.125 17344
28.99375 16632
17.24375 16786
25.51875 13348
14.875 15616
20.2125 21997
15.0375 18326
37.4375 14380
27.33125 18357
22.95625 12843
18.51875 18342
15.4125 13042
56.70625 9350
72.00625 9880
59.46875 11702
86.4125 9511
39.8 10642
25.16875 11781
28.10625 14989
46.34375 10776
21.98125 12264
25.8 12527
31.05 12217
7.54375 9889875
44.30625 11425
22.7625 11593
26.9875 12286
25.58125 13485
5.6 21340
33.8625 15649
32.6375 13594
29.2625 13662
23.49375 12963
19.125 13409
25.2625 14271
80.58125 10405
23.24375 16885
16.28125 14252
11.74375 15291
11.55 11756
61.0125 10043
27.14375 17359
10.45 16276
72.70625 9643
16.3375 18022
15.59375 12929
15.40625 12348
23.5125 13285
21.68125 16227
16.75 21370
33.48125 17105
55.56875 10583
36.18125 12571
30.9875 11855
14.46875 19065
10.1375 23011
22.71875 13800
21.00625 11801
36.43125 12735
22.05 16369
36.275 12672
23.94375 14363
44.61875 10101
36.3125 11269
41.31875 11387
32.7625 10980
78.60625 10760
23.4125 11380
27.575 17143
30.962500000000002 14736
19.6 17455
9.24375 15097
7.7125 18092
7.9312499999999995 19203
12.94375 10428
32.91875 11949
11.225 14518
39.675 11545
45.4125 10177
14.775 23295
11.41875 15015
12.58125 18791
40.91875 10072
21.34375 10802
17.34375 17274
65.38125 11336
30.60625 14557
36.75625 12479
14.31875 18072
8.8875 13598
45.63125 12998
18.725 12490
8.96875 19034
46.025 10830
21.2375 11401
11.4125 19796
23.85625 12259
20.73125 13515
62.5625 10144
15.1125 14029
27.46875 11008
19.9125 13895
20.0875 17354
25.86875 12630
23.10625 13945
14.60625 20298
56.69375 9756
21.4625 13784
25.4 14036
15.1 13375
27.58125 13878
13.08125 13226
54.71875 10818
24.325 10723
24.4125 10660
24.06875 15137
22.7375 17321
16.54375 13478
65.84375 10484
39.64375 16900
21.0625 15995
38.8875 12448
18.30625 18161
12.45 25384
36.80625 9161
20.475 11295
31.08125 15266
24.6625 13150
22.5375 18237
21.35625 13523
38.69375 13974
46.0875 12421
63.44375 10795
19.14375 13964
36.79375 13190
62.4375 12279
41.5 10049
27.73125 12792
21.9625 17065
42.75 13634
21.78125 13554
22.20625 20430
22.175 15158
25.05625 15199
37.85 13458
13.9625 17697
23.96875 17392
14.275 14771
15.53125 17185
14.33125 16978
33.36875 15286
45.35 10546
50.16875 9120
20.64375 13750
12.025 17954
17.89375 13898
24.6875 17179
32.46875 19412
64 20471
39.20625 15276
33.51875 12412
13.168750000000001 16682
75.45 10537
27.325 16220
31.8125 13207
15.2125 17817
45.8125 11656
30.175 11614
29.21875 14905
16.80625 11730
32.63125 11925
39.5375 12833
32.1625 14287
47.325 11723
16.14375 17342
15.33125 16846
29.21875 12176
17.4375 13080
25.35625 11796
18.91875 17307
29.20625 13596
13.30625 20075
33.5875 13285
25.6125 12777
25.31875 13704
32.5875 14244
34.83125 12443
19.1125 20082
22.4875 16258
19.18125 16102
25.5875 14082
16.325 14776
13.85 21541
9.125 21120
23.95625 15799
29.83125 14535
27.10625 12039
34.5125 11160
30.575 12443
29.3625 15534
28.06875 14684
10.24375 21988
19.01875 14401
50.60625 11607
23.675 13664
22.9875 17747
21.95625 13876
20.1875 11989
26.4125 12680
22.4 16122
22.1125 13442
39.05 10787
48.05625 10108
46.86875 12613
13.2 14595
68.9625 11308
6.00625 23083
34.39375 14000
23.75625 14369
13.75 14306
44.775 11680
31.71875 15012
26.725 14055
14.6125 19566
31.7625 16900
15.35 13579
44.60625 10520
22.40625 15534
17.7 21554
38.09375 11736
35.6625 13187
15.24375 14556
25.0625 13542
24.8875 11181
13.35 14460
29.5625 12851
22.15 16666
20.55 14029
29.79375 13252
27.45625 14503
29.83125 16902
24.1875 16157
16.30625 14502
20.7375 24213
17.75 15200
23.2 15783
23.03125 19708
32.4 13070
31.78125 17670
39.0125 13292
66.60625 9728
22.79375 12474
21.14375 18780
43.95 11607
87.7875 10462
34.34375 17524
24.8375 15379
34.35625 13367
26.64375 12571
19.49375 15265
35.74375 11088
35.3125 10984
67.86875 9897
21.7875 17500
29.95625 11675
37.175 10774
32.8875 12654
9.45 18775
68.91875 11200
18.3625 13463
47.175 10597
23.23125 10404
18.7625 13685
16.49375 16202
15.33125 11754
38.3 12002
14.675 15413
29.4375 13997
38.28125 11977
21.49375 15030
23.2875 11678
36.325 12603
48.76875 10946
23.08125 13916
37.1 9603
34.0125 10663
19.0375 14840
21.16875 13517
54.7375 11950
26.90625 10601
18.1375 13739
23.025 12997
28.325 14334
14.325 16144
29.66875 15966
12.90625 14987
47.73125 17882
21.59375 15157
51.725 9544
26.75625 11873
23.81875 16675
29.8375 13491
27.68125 12630
37.03125 9829
12.59375 17132
23.25625 14745
20.3 18586
13.84375 19161
22.0125 14662
18.74375 15935
39.75625 13303
27.83125 16133
20.45 12665
30.975 12609
18.69375 12741
67.74375 9582
48.36875 12883
10.875 15282
57.45625 10723
44.925 10163
20.15625 13941
74.0125 9597
11.9875 20717
39.79375 14250
25.925 19698
26.63125 15104
36.53125 12129
19.45625 19156
66.6 9706
12.55 12666
29.775 13537
88.43125 10256
7.6 11790
35.9 10822
17.08125 17562
37.80625 10965
8.75 16756
32.9125 12447
43.19375 12310
31.8625 11544
33.90625 14440
13.8375 23929
18.7125 12493
74.09375 10851
11.46875 18241
23.53125 15609
36.00625 11460
24.45 15977
22.45 13639
26.76875 14997
28.18125 14876
51.3125 10996
20.45625 15088
17.525 15833
28.96875 13936
15.3625 13009
15.48125 14637
29.0375 11899
47.51875 9780
27.7625 13468
38.55625 11133
25.525 12790
36.0875 13856
32.6125 11760
22.681250000000002 13835
39.23125 12762
65.75 9588
31.36875 13772
37.4875 12859
46.075 10695
8.38125 14686
16.96875 16868
29.825 18574
24.8375 15028
21.88125 12965
35.60625 11782
20.6625 13072
23.4375 13109
14.9875 15680
27.425 14214
22.20625 16958
24.0125 8860
28.34375 13327
59.91875 9618
21.025 18877
25.84375 12469
23.73125 13907
12.25625 17064
42.65 10567
26.525 13512
28.3125 15392
26.15625 11909
31.85 12519
29.66875 12113
26.20625 13706
15.19375 14888
13.275 13770
39.15 10649
27.9 15469
12.98125 15357
21.84375 10623
12.525 16096
10.725 16061
53.26875 12414
39.9625 14934
20.91875 17873
50.28125 12530
32.725 11978
36.64375 13748
24.89375 15238
19.0375 18477
24.43125 11746
27.2125 13940
37.475 10862
17.21875 17640
22.23125 12319
41.1625 14388
24.2375 15625
70.25625 9804
22.05 9821
18.54375 16827
20.23125 19064
35.6625 14000
24.68125 12598
24.3875 16909
17.23125 18278
35.98125 11836
25.19375 13939
26.6375 10858
80 12106
20.94375 12886
18.51875 14577
29.7875 13032
27.0625 14404
60.8375 12066
21.95625 15975
21.425 22631
28.23125 11014
30.85625 10914
53.00625 11775
21.08125 9665
32.09375 14353
52.7375 11598
17.65625 18602
40.175 11794
30.5875 12007
23.4625 11331
27.80625 13878
22.8375 13419
13.1125 19203
39.28125 17856
9.55 17328
28.4625 9737
24.2125 13082
27.6 11858
16.31875 15359
7.96875 14123
28.425 12166
31.55625 12088
Raw
miles-vs-finish.js
d3.csv('miles-vs-finish.csv', row => ({
miles: Number(row.miles),
finish: Number(row.finish) / 3600
}))
.then(data => {
var histogram = d3.histogram()
.value(d => d.finish)
.domain([2.5, 6.5])
.thresholds(d3.range(2.5, 7, 0.5));
var average = histogram(data)
.map(d => ({
miles: d3.median(d.map(j => j.miles)),
finish: (d.x0 + d.x1) / 2
}));
var point = fc.seriesSvgPoint()
.size(30)
.crossValue(d => d.miles)
.mainValue(d => d.finish);
var line = fc.seriesSvgLine()
.crossValue(d => d.miles)
.mainValue(d => d.finish);
var pointLineSeries = fc.seriesSvgMulti()
.series([line, point]);
var scatter = fc.seriesSvgPoint()
.size(10)
.crossValue(d => d.miles)
.mainValue(d => d.finish);
var multi = fc.seriesSvgMulti()
.series([scatter, pointLineSeries])
.mapping((_, index, series) => {
switch(series[index]) {
case scatter:
return data;
case pointLineSeries:
return average;
}
});
var chart = fc.chartCartesian(
d3.scaleLinear(),
d3.scaleLinear()
)
.xDomain([0, 70])
.yDomain([2, 7])
.yOrient('left')
.yLabel('finish time (hours)')
.xLabel('average weekly miles')
.yNice()
.chartLabel('Average weekly training mileage - vs - Finish time')
.svgPlotArea(multi);
d3.select('#chart')
.datum(average)
.call(chart);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment