Skip to content

Commit

Permalink
adding gifs
Browse files Browse the repository at this point in the history
  • Loading branch information
@emro
emro committed Jul 13, 2017
1 parent 6f73d7b commit 1115d50
Show file tree
Hide file tree
Showing 12 changed files with 204 additions and 46 deletions.
105 changes: 105 additions & 0 deletions data/elevationProfile2017.csv
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
distance,elevation
0,-9
0.01,9.84
0.18,19.68
0.48,9.84
0.83,13.12
1.1,19.68
1.37,16.4
1.8,9.84
2.27,29.52
2.65,52.49
2.87,39.37
3.11,13.12
3.49,9.84
3.78,16.4
4.17,6.56
4.76,3.28
4.94,6.56
5.07,36.08
5.13,16.4
5.22,121.39
5.48,154.19
5.54,170.6
5.77,150.91
5.98,213
6.01,259
6.4,272
6.7,269
7,239
7.2,220
7.5,226
7.8,224
8,167
8.3,184
8.4,210
8.8,253
9.1,234
9.4,197
9.6,157
9.9,157
10.1,79
10.3,151
10.65,174
10.8,226
11.1,266
11.4,230
11.43,270
11.5,203
11.75,131
12,92
12.17,72
12.22,112
12.63,157.48
12.9,180.44
13.4,183
13.6,213
13.8,253
14,203
14.23,217
14.5,164
14.75,144
14.9,98
15.1,141
15.3,87
15.65,125
15.9,161
16.2,184
16.6,197
16.9,220
17.1,230
17.4,295
17.65,266
17.76,315
18,299
18.3,312
18.6,305
18.7,338
18.9,292
19.3,266
19.6,282
19.84,246
20,295
20.3,275
20.8,292
21.1,292
21.26,197
21.6,157
21.8,180
22,108
22.46,62
22.65,49.21
22.94,26.24
23.3,62
23.6,23
23.9,20
24.2,56
24.4,26
24.65,49
24.9,26
25.1,46
25.35,16.4
25.7,-9
26,-3
26.2,16.4
26.21,-9
Binary file added src/assets/gifs/Balint.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/gifs/Hilary Dykes.mov
View file
Binary file not shown.
Binary file added src/assets/gifs/Hilary.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/gifs/Iain Mickle.mov
View file
Binary file not shown.
Binary file added src/assets/gifs/Iain.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/gifs/Lauren.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 18 additions & 3 deletions src/css/project.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,20 @@ a {
}
}

.gif-container {
max-width: 1000px;
margin: auto;
margin-top: 50px;
.display-flex;
.flex-wrap(wrap);
.gif {
.flex(0 0 50%);
img {
width: 100%;
}
}
}

.month-title {
font-family: @bold-graphics;
}
Expand Down Expand Up @@ -89,7 +103,8 @@ a {
.chart-wrapper {
display: block;
text-align: center;
width: 100%;
max-width: 1200px;
margin: auto;
.display-flex;
.flex-wrap(wrap);
.miles-chart, .elevation-chart {
Expand Down Expand Up @@ -144,7 +159,7 @@ a {
}

.source {
width: 90%;
max-width: 1000px;
@media @mobile {
width: 95%;
}
Expand All @@ -161,7 +176,7 @@ a {
background: lighten(@light-gray,10%);
// border: 4px solid @light-gray;
padding: 20px;
width: 80%;
max-width: 900px;
margin: auto;
&.padded {
margin-bottom: 40px;
Expand Down
2 changes: 1 addition & 1 deletion src/js/races.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ function hoverChart(targetID,maxval,yLabel,units,runnerID) {

x.domain([0, 26.2]);
y.domain([parsePace('00:00'),parsePace("20:00")]);
yRight.domain([-7,1000])
yRight.domain([-9,1000])

// Define the axes
svg.append("g")
Expand Down
66 changes: 51 additions & 15 deletions src/js/training.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,10 +308,10 @@ function dotChart(targetID,maxval,runnerID){
left: 100
};
if (screen.width > 768) {
var width = 900 - margin.left - margin.right;
// var width = 900 - margin.left - margin.right;
var height = 470 - margin.top - margin.bottom;
} else if (screen.width <= 768 && screen.width > 480) {
var width = 720 - margin.left - margin.right;
// var width = 720 - margin.left - margin.right;
var height = 470 - margin.top - margin.bottom;
} else if (screen.width <= 480 && screen.width > 340) {
console.log("big phone");
Expand All @@ -321,7 +321,7 @@ function dotChart(targetID,maxval,runnerID){
bottom: 40,
left: 55
};
var width = 340 - margin.left - margin.right;
// var width = 340 - margin.left - margin.right;
var height = 350 - margin.top - margin.bottom;
} else if (screen.width <= 340) {
console.log("mini iphone")
Expand All @@ -331,9 +331,10 @@ function dotChart(targetID,maxval,runnerID){
bottom: 40,
left: 55
};
var width = 310 - margin.left - margin.right;
// var width = 310 - margin.left - margin.right;
var height = 370 - margin.top - margin.bottom;
}
var width = Math.min(windowWidth,maxWidth) - 10 - margin.left - margin.right;
console.log(margin);

d3.select(targetID).select("svg").remove();
Expand Down Expand Up @@ -653,12 +654,12 @@ for (var jdx=0; jdx<dataList.length; jdx++) {

hoverChart("#hover-chart-miles-"+keyList[jdx],"Total Miles",900,"Total number of miles run","miles",nameList[jdx]);

var timeVar = data[data.length-1]["Total Time"];
if (timeVar){
timeVar = timeVar.split(":")[0];
document.getElementById("total-time-text-"+keyList[jdx]).innerHTML = timeVar;
document.getElementById("work-weeks-"+keyList[jdx]).innerHTML = Math.round(timeVar/520*100)+"%";
}
// var timeVar = data[data.length-1]["Total Time"];
// if (timeVar){
// timeVar = timeVar.split(":")[0];
// document.getElementById("total-time-text-"+keyList[jdx]).innerHTML = timeVar;
// document.getElementById("work-weeks-"+keyList[jdx]).innerHTML = Math.round(timeVar/520*100)+"%";
// }
}

dotChart("#dot-chart",75,"all");
Expand Down Expand Up @@ -689,11 +690,11 @@ $(window).resize(function () {

hoverChart("#hover-chart-miles-"+keyList[jdx],"Total Miles",900,"Total number of miles run","miles",nameList[jdx]);

var timeVar = data[data.length-1]["Total Time"];
if (timeVar){
timeVar = timeVar.split(":")[0];
document.getElementById("total-time-text-"+keyList[jdx]).innerHTML = timeVar;
}
// var timeVar = data[data.length-1]["Total Time"];
// if (timeVar){
// timeVar = timeVar.split(":")[0];
// document.getElementById("total-time-text-"+keyList[jdx]).innerHTML = timeVar;
// }
}
});

Expand Down Expand Up @@ -741,12 +742,47 @@ $(document).on('click', 'a[href^="#"]', function(e) {

var navID = document.getElementById("nav");
var navposition = 400;//document.getElementById("link-nav").offsetTop+40;

// a = document.getElementById('balint'),
// b = document.getElementById('gene'),
// c = document.getElementById('greg'),
// d = document.getElementById('hilary'),
// e = document.getElementById('iain'),
// f = document.getElementById('jorge'),
// g = document.getElementById('lauren');
// scroll = [a,b,c,d,e,f,g];

var navDisplay = function() {
var y = window.scrollY;
if (y >= navposition) {
navID.className = "fixed show";
} else {
navID.className = "fixed hide";
}

// var p_top = psec.getBoundingClientRect().top + window_top - 40;
// var f_top = fsec.getBoundingClientRect().top + window_top - 40;
// var s_top = ssec.getBoundingClientRect().top + window_top - 40;
// var l_top = lsec.getBoundingClientRect().top + window_top - 40;
// var r_top = rsec.getBoundingClientRect().top + window_top - 40;
//
// var p_btm = psec.getBoundingClientRect().bottom + window_top - 40;
// var f_btm = fsec.getBoundingClientRect().bottom + window_top - 40;
// var s_btm = ssec.getBoundingClientRect().bottom + window_top - 40;
// var l_btm = lsec.getBoundingClientRect().bottom + window_top - 40;
// var r_btm = rsec.getBoundingClientRect().bottom + window_top - 40;
//
// var top = [p_top, f_top, s_top, l_top, r_top];
// var btm = [p_btm, f_btm, s_btm, l_btm, r_btm];
//
// for (var i = 0; i < top.length; i++) {
// if ((top[i] < window_top) && (btm[i] > window_top)) {
// scroll[i].classList.add('activelink');
// }
// else {
// scroll[i].classList.remove('activelink');
// }
// }

};
window.addEventListener("scroll", navDisplay);
4 changes: 2 additions & 2 deletions src/races/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@
<% }); %>
</div>
<div id="dot-chart-races"></div>
<div class="source">Source: <a href="https://www.strava.com" target="_blank">Strava</a>, Bálint Gál, Gene Dykes, Greg McQuaid, Hilary Shirazi, Iain Mickle, Jorge Maravilla, Lauren Elkins</div>
<div class="source">Source: <a href="https://www.strava.com" target="_blank">Strava</a>, Bálint Gál, Gene Dykes, Greg McQuaid, Hilary Shirazi, Iain Mickle, Jorge Maravilla and Lauren Elkins</div>
</div>
<% } %>
<% }); %>
Expand All @@ -137,7 +137,7 @@
var laurenData = <%= JSON.stringify(json.LaurenElkins) %>;

var raceData = <%= JSON.stringify(csv.allStravaSplits) %>;
var elevationData = <%= JSON.stringify(csv.elevationProfile) %>;
var elevationData = <%= JSON.stringify(csv.elevationProfile2017) %>;
</script>

<script src="../app-races.js" async></script>
Expand Down
52 changes: 27 additions & 25 deletions src/training/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@
<%= t.include("partials/_flat_nav.html") %>
<%= t.include("partials/_nav.html") %>

<div class="gif-container">
<div class="gif"><img src="../assets/gifs/Balint.gif"></img></div>
<div class="gif"><img src="../assets/gifs/Hilary.gif"></img></div>
<div class="gif"><img src="../assets/gifs/Iain.gif"></img></div>
<div class="gif"><img src="../assets/gifs/Lauren.gif"></img></div>
</div>

<div class="outer" id="content">

<div class="top-container">
Expand Down Expand Up @@ -107,14 +114,6 @@
<% if (d.Key == "hilary"){ %>
<div class="story-container">
<div class="chart-wrapper">
<div class="elevation-chart">
<div class="subhed">Hilary and Gene's total elevation gain</div>
<div class="hover-container training">
<div id="hover-runner-TotalElevation-hilary" class="hover-name"></div>
<div id="hover-number-TotalElevation-hilary" class="hover-pace"></div>
</div>
<div id="hover-chart-elevation-hilary"></div>
</div>

<div class="miles-chart">
<div class="subhed">Hilary and Gene's total miles</div>
Expand All @@ -124,30 +123,26 @@
</div>
<div id="hover-chart-miles-hilary"></div>
</div>

<div class="elevation-chart">
<div class="subhed">Hilary and Gene's total elevation gain</div>
<div class="hover-container training">
<div id="hover-runner-TotalElevation-hilary" class="hover-name"></div>
<div id="hover-number-TotalElevation-hilary" class="hover-pace"></div>
</div>
<div id="hover-chart-elevation-hilary"></div>
</div>
</div>
</div>

<div class="text-pullout">Hilary Shirazi ran a total of <span id="total-time-text-hilary" class="bold-text-pullout"></span> hours in the last 3 months,
<div>or the equivalent of <span id="work-weeks-hilary" class="bold-text-pullout"></span> of a full-time job.</div>
<div class="pullout-padding">Gene Dykes ran a total of <span id="total-time-text-gene" class="bold-text-pullout"></span> hours in the last 3 months,
<div>or the equivalent of <span id="work-weeks-gene" class="bold-text-pullout"></span> of a full-time job.</div>
</div>
<div class="text-pullout"><%=d.FunFact.replace("**","<span class='bold-text-pullout'>").replace("*","</span>").replace("**","<span class='bold-text-pullout'>").replace("*","</span>")%>
</div>

<div class="source">Source: <a href="https://www.strava.com" target="_blank">Strava</a>, <%=d.Name%></div>

<% } else { %>
<div class="story-container">
<div class="chart-wrapper">
<div class="elevation-chart">
<div class="subhed"><%=d.Name.split(" ")[0]%>'s total elevation gain</div>
<div class="hover-container training">
<div id="hover-runner-TotalElevation-<%=d.Key%>" class="hover-name"></div>
<div id="hover-number-TotalElevation-<%=d.Key%>" class="hover-pace"></div>
</div>
<div id="hover-chart-elevation-<%=d.Key%>"></div>
</div>

<div class="miles-chart">
<div class="subhed"><%=d.Name.split(" ")[0]%>'s total miles</div>
<div class="hover-container training">
Expand All @@ -156,11 +151,18 @@
</div>
<div id="hover-chart-miles-<%=d.Key%>"></div>
</div>
<div class="elevation-chart">
<div class="subhed"><%=d.Name.split(" ")[0]%>'s total elevation gain</div>
<div class="hover-container training">
<div id="hover-runner-TotalElevation-<%=d.Key%>" class="hover-name"></div>
<div id="hover-number-TotalElevation-<%=d.Key%>" class="hover-pace"></div>
</div>
<div id="hover-chart-elevation-<%=d.Key%>"></div>
</div>
</div>
</div>

<div class="text-pullout"><%=d.Name.split(" ")[0]%> ran a total of <span id="total-time-text-<%=d.Key%>" class="bold-text-pullout"></span> hours in the last 3 months,
<div>or the equivalent of <span id="work-weeks-<%=d.Key%>" class="bold-text-pullout"></span> of a full-time job.</div>
<div class="text-pullout"><%=d.FunFact.replace("**","<span class='bold-text-pullout'>").replace("*","</span>").replace("**","<span class='bold-text-pullout'>").replace("*","</span>")%></div>
</div>

<div class="source">Source: <a href="https://www.strava.com" target="_blank">Strava</a>, <%=d.Name%></div>
Expand Down Expand Up @@ -208,7 +210,7 @@
<% }); %>
</div>
<div id="dot-chart"></div>
<div class="source">Source: <a href="https://www.strava.com" target="_blank">Strava</a>, Bálint Gál, Gene Dykes, Greg McQuaid, Hilary Shirazi, Iain Mickle, Jorge Maravilla, Lauren Elkins</div>
<div class="source">Source: <a href="https://www.strava.com" target="_blank">Strava</a>, Bálint Gál, Gene Dykes, Greg McQuaid, Hilary Shirazi, Iain Mickle, Jorge Maravilla and Lauren Elkins</div>
</div>
<% } %>
<% }); %>
Expand Down

0 comments on commit 1115d50

Please sign in to comment.