43:["$","title",null,{"children":"🚵 Preparing for l'Etape du Tour | Antoine Dejonckheere | Observable"}] 4b:T80f,bar_chart = { const svg = d3.select(DOM.svg(width, height)); const tooltip = d3 .select("body") .append("div") .attr("class", "toolTip") svg.append("g") .selectAll("rect") .data(monthlyData) .enter() .append("rect") .attr("x", d => xScale(d.startMonth)) .attr("y", d => yScale(d.distance_raw)) .attr("height", d => yScale(0) - yScale(d.distance_raw)) .attr('width', xScale.bandwidth()) .attr("fill", "dodgerblue") .on("mouseover", function(d) { d3.select(this) .attr("fill", "orange"); const xPosition = d3.event.pageX + 15 const yPosition = height - d3.event.pageY + 100 const { elevation_gain_raw } = d const formattedElevation = elevation_gain_raw > 1000 ? `${d3.format('.3s')(elevation_gain_raw / 1000)} km` : `${elevation_gain_raw} m` tooltip .style("left", xPosition + "px") .style("top", yScale(0) - yPosition + "px") .style("display", "inline-block") .html(`

${d3.timeFormat('%B %Y')(d.startMonth)}

Distance: ${d3.format('.3s')(d.distance_raw / 1000)} km

Average speed: ${d3.format('.3s')(d.distance_raw/d.moving_time_raw * 3.6)} km/h

Total ascent: ${formattedElevation}

Ascent per km: ${d3.format('.3%')(elevation_gain_raw / d.distance_raw)}

`) }) .on("mouseout", function(d){ d3.select(this) .attr('fill', 'dodgerblue') tooltip.style("display", "none") }) svg.append("g") .call(xAxis) .attr("transform", `translate(0, ${height - margin.bottom})`) svg.append("g") .call(yAxis) .attr("transform", `translate(${margin.left}, 0)`) svg.append("text") .attr("transform", `translate(0, ${height / 2}), rotate(-90)`) .attr("dy", "1em") .style("font-size", "12px") .style("text-anchor", "middle") .text("Kilometers ridden"); return svg.node() }4c:T10d8,scatterplot = { function formatDuration(duration) { const hours = Math.floor(duration / 3600) const restHours = duration % 3600 const minutes = Math.floor(restHours / 60) const seconds = restHours % 60 const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds return `${hours}:${formattedMinutes}:${formattedSeconds}` } const color = d3.scaleOrdinal(d3.schemeCategory10); function colorValue(d) { return d.isPro } const svg = d3.select(DOM.svg(width, height)); const y = d3.scaleLinear() .domain([0, Math.max(...powerData.concat(proRidersData).map(d => d.watts))]) .range([height - margin.top, margin.bottom]) const x = d3.scaleLinear() .domain(d3.extent(powerData.concat(proRidersData), d => d.duration)) .range([margin.left, width - margin.right]) const xAxis = d3.axisBottom(x) .ticks(5) .tickFormat(function(d) { const { duration } = d const hours = Math.floor(d / 3600) return `${hours}h` }) const yAxis = d3.axisLeft(y) .ticks(5) .tickFormat(function(d) { return `${d}W` }) const tooltip = d3 .select("body") .append("div") .attr("class", "scatterTooltip") const scatter = svg.append("g") .selectAll("circle") .data(powerData.concat(proRidersData)) .enter().append("circle") .attr("cx", function(d) { return x(d.duration) }) .attr("cy", function(d) { return y(d.watts) }) .attr("fill", function(d) { return color(colorValue(d)) }) .attr("r", 6) .on("mouseover", function(d) { d3.select(this) .attr("fill", "red"); const xPosition = d3.event.pageX + 15 const yPosition = height - d3.event.pageY + 15 const formattedDuration = formatDuration(d.duration) let tooltipContent if (d.isPro) { tooltipContent = `

Pro ride

Rider: ${d.riderFirstName} ${d.riderName}

Race: ${d.description}

Duration: ${formattedDuration}

Average power: ${d3.format('.3s')(d.watts)}W

` } else { tooltipContent = `

Rider: Antoine Dejonckheere

Duration: ${formattedDuration}

Average power: ${d3.format('.3s')(d.watts)}W

` } tooltip .style("left", xPosition + "px") .style("top", y(0) - yPosition + "px") .style("display", "inline-block") .html(tooltipContent) }) .on("mouseout", function(d){ d3.select(this) .attr('fill', function(d) { return color(colorValue(d)) }) tooltip.style("display", "none") }) svg.append("g") .attr("transform", `translate (0, ${height - margin.bottom})`) .call(xAxis); svg.append("g") .call(yAxis) .attr("transform", `translate (${margin.left}, 0)`) svg.append("text") .attr("transform", `translate( ${width/2} , ${height - margin.bottom + 30})`) .style("text-anchor", "middle") .style("font-size", "12px") .text("Ride duration"); svg.append("text") .attr("transform", `translate (${margin.left / 2 - 15}, ${height / 2}), rotate(-90)`) .style("text-anchor", "middle") .style("font-size", "12px") //.attr("transform", "rotate(-90)") .text("Average power") // legend const legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return `translate(0, ${height - 2 * margin.bottom - i * 20} )`; }); // draw legend colored rectangles legend.append("rect") .attr("x", width - 18 - 175 - 12) .attr("width", 18) .attr("height", 18) .style("fill", color); // draw legend text legend.append("text") .attr("x", width - 175) .attr("width", 175) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .style("margin-left", "12px") .text(function(d) { if (d) { return "Pro rider reference" } return "Antoine Dejonckheere" }) return svg.node() }4d:T5f9,monthlyData = { const keyedData = rawData .map(elem => { const { start_time } = elem const year = start_time.substring(0,4) const month = start_time.substring(5,7) const startMonth = `${year}-${month}-01` return { ...elem, startMonth, } }) .reduce((agg, elem) => { if (agg[elem.startMonth]) { agg[elem.startMonth].distance_raw += elem.distance_raw agg[elem.startMonth].moving_time_raw += elem.moving_time_raw agg[elem.startMonth].elevation_gain_raw += elem.elevation_gain_raw agg[elem.startMonth].calories += elem.calories } else { agg[elem.startMonth] = { distance_raw: +elem.distance_raw, moving_time_raw : +elem.moving_time_raw, elevation_gain_raw : +elem.elevation_gain_raw, calories :+ elem.calories, } } return agg }, {}) const val = Object.keys(keyedData) .map(key => { return { startMonth: new Date(key).getTime(), ...keyedData[key], } }) .map(elem => ({ // use approximation based on efficiency ...elem, joules: elem.calories * 1000, watts: elem.calories * 1000 / elem.moving_time_raw, wattsPerKilo: elem.calories * 1000 / (71 * elem.moving_time_raw), ascentPerKm: elem.elevation_gain_raw / elem.distance_raw, })) .sort((a, b) => { if (a.startMonth >= b.startMonth) { return 1 } return -1 }) return val }4e:[] 47:{"id":"2858c1c44c36333e","slug":"preparing-for-letape-du-tour","title":"🚵 Preparing for l'Etape du Tour","thumbnail":"8aceea566dda8a3fbd5aa9bdc4428f9cef282ad2fdec4e2c5d5182b496af181a","access_level":"public","create_time":"$D2018-05-30T16:08:52.562Z","update_time":"$D2018-06-15T15:12:15.965Z","view_time":null,"first_public_time":"$D2018-05-31T18:19:14.575Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"fa72288832f83617","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":"starter_2024","bio":"software developer | data scientist | IT Ninja | Physics engineer","followed_by_you":false,"follows_you":false},"version":468,"publish_version":468,"role":null,"authored":false,"authors":[{"type":"individual","id":"73f8559e29a9409c","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":null,"bio":"software developer | data scientist | IT Ninja | Physics engineer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"73f8559e29a9409c","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"🚵 Preparing for l'Etape du Tour","cells":[{"id":0,"value":"md`# 🚵 Preparing for l'Etape du Tour\nWith my friend [aimak](https://twitter.com/aimak), we've decided a few months ago that we'd paticipate in the 2018 edition of [L'Etape du tour](http://letapedutour.com/fr).\n\n170 km.\n\n\n\nMore than 4000m of ascents accross the French Alps, between Annecy and Le Grand Bornant.\n\n\n\nThis cannot be tackled without proper training.\n\n\n\nNot happy with the way data is presented inside Strava, and as I needed a proper d3 training, I started playing around with my riding training logs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`## Kilometers ridden, month by month\nThe below graph illustrates the total distance I rode during my training.\nThe conclusion is not very surprising: winter months are *not* good for cyclists.\n\nI remember waking up early on sunday quite a few times. Looking by the window, it was raining, or worse, snowing.\nAborted training. Netflix as a replacement.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md `## Watt did you say?\nThere is an ongoing debate in the cycling world about the power performance of pro-riders.\nAntoine Vayer, a former Festina pro-team trainer, computes the power delivered by pro rider during high intensity efforts (typically mountain stages of the three Grand Tours.\n\nI've also taken my calories data from Strava and computed an average power outputted over the months.\nThis data needs to be looked at carefully, as I have serious doubt about the relevance of calories estimated by Strava.\n\nBased on a [25% efficiency assumption](http://blog.trainerroad.com/calories-and-power/), I am computing the average power I deliver over the courses of my trainings.\n\nI've decided to compare those power data with some other ones from pro-riders during grand tours (Giro & Criterium du Dauphine).\n\nConclusion? We're still far away from being pro riders 🤘\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"margin = ({\n left: 70,\n right: 70,\n top: 40,\n bottom: 40,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xRange = [margin.left, width - margin.right]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"xScale = d3.scaleBand()\n .domain(monthlyData.map(d => d.startMonth))\n .range(xRange)\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"xScaleAscent = d3.scaleLinear()\n .domain([d3.min(monthlyData.map(d => d.startMonth)), d3.max(monthlyData.map(d => d.startMonth))])\n .range(xRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"yRange = [height - margin.bottom, margin.top]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(monthlyData.map(d => d.distance_raw))])\n .range(yRange)\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"yScaleAscent = d3.scaleLinear()\n .domain([0, d3.max(monthlyData.map(d => d.ascentPerKm))])\n .range(yRange)\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"yAxisAscent = d3.axisRight(yScaleAscent)\n .tickFormat(d => d3.format('.2%')(d))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"yAxis = d3.axisLeft(yScale)\n .tickFormat(d => `${d3.format('.2s')(d / 1000)} km`) // km\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"xAxis = d3.axisBottom(xScale)\n .tickFormat(d => d3.timeFormat('%b %y')(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"rawData = d3.json(\"https://gist.githubusercontent.com/antoinedejonckheere/dce94cc7776158600a69a3e6909c77b3/raw/03c0d6427c411b7999d978afabfd18c3c4b1cf7b/bikes_training.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"powerData = rawData\n .map(ride => ({\n calories: +ride.calories,\n duration: +ride.moving_time_raw,\n }))\n .map(ride => ({\n duration: ride.duration,\n joules: ride.calories * 1000, // approximation!\n watts: ride.calories * 1000 / ride.duration,\n wattsPerKilo: ride.calories * 1000 / (72 * ride.duration),\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"proRidersData = [\n {\"Rider name\":\"Roy\",\"Rider firstname\":\"Jeremy\",\"Description\":\"giro 2018 stage 19\",\"hours\":\"5\",\"minutes\":\"56\",\"seconds\":\"42\",\"duration\":\"21402\",\"watts\":\"272\",\"Link\":\"https://www.strava.com/activities/1595260660\"},\n {\"Rider name\":\"Wellens\",\"Rider firstname\":\"Tim\",\"Description\":\"giro 2018 stage 4\",\"hours\":\"5\",\"minutes\":\"17\",\"seconds\":\"51\",\"duration\":\"19071\",\"watts\":\"252\",\"Link\":\"https://www.strava.com/activities/1558736246\"},\n {\"Rider name\":\"Houle\",\"Rider firstname\":\"Hugo\",\"Description\":\"Dauphine 2018 stage 2\",\"hours\":\"4\",\"minutes\":\"31\",\"seconds\":\"27\",\"duration\":\"16287\",\"watts\":\"226\",\"Link\":\"https://www.strava.com/activities/1618764376\"}\n]\n.map(ride => ({\n isPro: true,\n riderName: ride[\"Rider name\"],\n riderFirstName: ride[\"Rider firstname\"],\n description: ride.Description,\n duration: + ride.duration,\n watts: +ride.watts,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"stylesheet = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 42:null