29:null 2a:["$","title",null,{"children":"Paris Marathon analysis | Kevin Xu | Observable"}] 2f:T767,chart = { const height = 500 const margin = ({top: 20, right: 20, bottom: 30, left: 40}) const x = d3.scaleLinear() .domain([2 * 60 * 60, 7 * 60 * 60 ]).nice() .range([margin.left, width - margin.right]) const bins = d3.histogram() .domain(x.domain()) .thresholds(x.ticks(runnerCount > 10000 ? 200 : 100)) (times) const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickSizeOuter(0) .tickValues([1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7].map(x => x * 60 * 60)) .tickFormat(formatToHours) ) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(data.x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) const svg = d3.select(DOM.svg(width, height)); const bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(bins) .enter().append("rect") .attr("x", d => x(d.x0)) .attr("width", d => x(d.x1) - x(d.x0)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); var line = d3.line() .x(d => x(d.x)) .y(d => y(d.y)); var personalTime = 4 * 60 * 60; svg.append("path") .datum([{x: personalTime, y: 0}, {x: personalTime, y: 1600}]) .attr("stroke", "#3ab527") .attr("stroke-width", 1.5) .attr("d", line); return svg.node(); }30:T85c,{ const height = 350; const margin = {top: 20, right: 30, bottom: 30, left: 40}; const x = d3.scaleLinear() .domain(d3.extent(splits)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([d3.min(pacesStatistics, d => d.min), d3.max(pacesStatistics, d => d.nintiethQuantile)]).nice() .range([height - margin.bottom, margin.top]); const svg = d3.select(DOM.svg(width, height)); const xAxis = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .tickValues([2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 10, 11].map(x => x * 60)) .tickFormat(formatToMinutes) ) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); const lineGroup = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") const color = d3.scaleOrdinal(d3.schemeBlues[5]) lineGroup.append("path") .datum(pacesStatistics) .attr("stroke", color(0)) .attr("d", d3.line() .x(d => x(d.km)) .y(d => y(d.nintiethQuantile))) .attr("data-legend", "90th quantile"); lineGroup.append("path") .datum(pacesStatistics) .attr("stroke", color(1)) .attr("stroke-width", 1.5) .attr("d", d3.line() .x(d => x(d.km)) .y(d => y(d.mean))) .attr("data-legend", "Mean"); lineGroup.append("path") .datum(pacesStatistics) .attr("stroke", color(2)) .attr("stroke-width", 1.5) .attr("d", d3.line() .x(d => x(d.km)) .y(d => y(d.median))) .attr("data-legend", "Median"); lineGroup.append("path") .datum(pacesStatistics) .attr("stroke", color(3)) .attr("d", d3.line() .x(d => x(d.km)) .y(d => y(d.tenthQuantile))) .attr("data-legend", "10th quantile"); return svg.node(); }31:Tbd3,{ const height = 350; const margin = {top: 20, right: 30, bottom: 30, left: 40}; const x = d3.scaleLinear() .domain([startTime, 1523175500]) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([ d3.min(timeAndStartStatistics, d => d.min), d3.max(timeAndStartStatistics, d => d.nintiethQuantile) ]).nice() .range([height - margin.bottom, margin.top]); const yCount = d3.scaleLinear() .domain([ 0, d3.max(timeAndStartStatistics, d => d.count) ]).nice() .range([height - margin.bottom, margin.top]); const svg = d3.select(DOM.svg(width, height)); const xAxis = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(formatTimestampToHours)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .tickValues([1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6].map(x => x * 60 * 60)) .tickFormat(formatToHours)) const yAxisCount = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(yCount)) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); svg.append("g") .attr("transform", `translate(${width - margin.right},0)`) .call(yAxisCount); const lineGroup = svg.append("g") .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") const color = d3.scaleOrdinal(d3.schemeBlues[4]) lineGroup.append("path") .datum(timeAndStartStatistics) .attr("stroke", color(0)) .attr("d", d3.line() .x(d => x(d.start)) .y(d => y(d.nintiethQuantile)) .defined( d => d.count > 10)) .attr("data-legend", "90th quantile"); lineGroup.append("path") .datum(timeAndStartStatistics) .attr("stroke", color(1)) .attr("stroke-width", 1.5) .attr("d", d3.line() .x(d => x(d.start)) .y(d => y(d.mean)) .defined( d => d.count > 10)) .attr("data-legend", "Mean"); lineGroup.append("path") .datum(timeAndStartStatistics) .attr("stroke", color(2)) .attr("stroke-width", 1.5) .attr("d", d3.line() .x(d => x(d.start)) .y(d => y(d.median)) .defined( d => d.count > 10)) .attr("data-legend", "Median"); lineGroup.append("path") .datum(timeAndStartStatistics) .attr("stroke", color(3)) .attr("d", d3.line() .x(d => x(d.start)) .y(d => y(d.tenthQuantile)) .defined( d => d.count > 10)) .attr("data-legend", "10th quantile"); lineGroup.append("path") .datum(timeAndStartStatistics) .attr("stroke", '#f4b642') .attr("d", d3.line() .x(d => x(d.start)) .y(d => yCount(d.count / 3))) .attr("data-legend", "Count"); return svg.node(); }32:T6be,{ const height = 500 const margin = ({top: 20, right: 20, bottom: 30, left: 40}) const x = d3.scaleLinear() .domain(d3.extent(runnerDensity, d => +d.t)).nice() .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain(d3.extent(runnerDensity, d => +d.k)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickSizeOuter(0) .tickFormat(formatTimestampToHours) ) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(data.x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) const svg = d3.select(DOM.svg(width, height)); const max = d3.max(runnerDensity, d => d.m + d.f) const pixel = svg.append("g") .selectAll("rect") .data(runnerDensity) .enter().append("rect") .attr("fill", d => { // find the right color var c = d3.hsl(d3.interpolateLab('#e00f00', '#4cd900')(d.m / (d.m + d.f))) c.l = Math.pow(0.5 + 0.5 * (1 - (d.m + d.f) / max), 1.2) c.s = 0.8 + 0.2 * (d.m + d.f) / max return c }) .attr("x", d => x(+d.t)) .attr("y", d => y(+d.k + 0.25)) .attr("width", d => x(+d.t + 60) - x(+d.t)) // 60 seconds per pixel .attr("height", d => y(+d.k) - y(+d.k + 0.25)) // quarter kilometer per pixel svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:T8ac,map = { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div var bounds = [ [2.081933,48.702094], // Southwest coordinates [2.571084,49.133177] // Northeast coordinates ]; var map = new mapboxgl.Map({ container: container, // container id style: 'mapbox://styles/mapbox/dark-v9', //hosted style id center: [2.343,48.858], // starting position zoom: 11, // starting zoom interactive: false }); map.on('load', () => { map.addSource('runners', { type: 'geojson', data: fc }); map.addSource('personalPoint', { type: 'geojson', data: {type: 'FeatureCollection', features: []} }); map.addLayer({ 'id': 'points', 'type': 'heatmap', 'source': 'runners', paint: { "heatmap-weight": ["at", 0, ["get", "densities"]], 'heatmap-intensity': [ 'interpolate', ['linear'], ['zoom'], 12, 0.007, 17, 0.004 ], 'heatmap-color': [ 'interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(33,102,172,0.3)', 0.2, 'rgb(103,169,207)', 0.4, 'rgb(209,229,240)', 0.6, 'rgb(240, 196, 131)', 0.8, 'rgb(239,138,98)', 1, 'rgb(178,24,43)' ], // Adjust the heatmap radius by zoom level 'heatmap-radius': 11, 'heatmap-opacity': [ 'interpolate', ['linear'], ['zoom'], 15, 1, 16, 0.2 ] } }, 'waterway-label'); map.addLayer({ "id": "personalPoint", "source": "personalPoint", "type": "circle", "paint": { "circle-radius": 6, "circle-color": "#3ab527", "circle-stroke-width": 2, "circle-stroke-color": '#ffffff' } }, 'waterway-label'); }) try { yield map; yield invalidation; } finally { map.remove(); } }34:[] 2d:{"id":"dcb65dee15d40ef3","slug":null,"title":"Paris Marathon analysis","thumbnail":"b97434469f24bb49ff857f226d1b49a4866df7049846c55c5050d2b023edeaa0","access_level":"public","create_time":"$D2023-04-17T19:41:43.977Z","update_time":"$D2023-04-17T19:41:43.977Z","view_time":null,"first_public_time":"$D2023-04-17T19:41:43.977Z","fork":{"id":"f11e12d7fc8be9c2","slug":"paris-marathon-analysis/2","title":"Paris Marathon analysis","owner":{"id":"dea08e46b5ea0937","login":"benjamintd","name":"Benjamin Tran Dinh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f04c66ca9cd6f30f","login":"khxu","name":"Kevin Xu","avatar_url":"https://avatars-next.observableusercontent.com/95f43d42f7b1b38b7500f5536a36649032e80656a3012bd0a58eded804edc8d6","tier":"starter_2024"},"version":1150,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d78350930352ba0b","login":"khxu","name":"Kevin Xu","avatar_url":"https://avatars-next.observableusercontent.com/95f43d42f7b1b38b7500f5536a36649032e80656a3012bd0a58eded804edc8d6","tier":null}],"members":[{"type":"individual","id":"d78350930352ba0b","login":"khxu","name":"Kevin Xu","avatar_url":"https://avatars-next.observableusercontent.com/95f43d42f7b1b38b7500f5536a36649032e80656a3012bd0a58eded804edc8d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Paris Marathon analysis","cells":[{"id":0,"value":"md`# Paris Marathon analysis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"md`## Filters\n\nData thoughout this notebook can be filtered by sex and country using the controls below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"viewof sexBox = checkbox({\n options: [\n { value: 'M', label: 'Men' },\n { value: 'F', label: 'Women' }\n ],\n value: ['M', 'F']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"md`Chose a specific country below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"viewof country = DOM.select(['All'].concat(countries))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"md`You chose ${sexBox.map(v => v === 'M' ? 'men' : 'women').join(' and ')} from ${country === 'All' ? 'all countries' : countryCodes[country]}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"md`## Histogram of times`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"md`\nIn the graph below, we can see finish times for ${runnerCount} Paris Marathon finishers. We can clearly see a peak of people giving their best to finish below the 4h mark.\n\nThere are other, smaller peaks at most 15 minute marks, most likely from the waves of people that follow pace runners.\n\nTimes below 2h are handisport athletes who manage to finish before the fastest runners in their specific wheelchairs.\n\nIf you found your bib with the search bar, your own time displays in green.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"md`## Pace along the course`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"md`\nWe can visualize the pace along the route. Pace is extrapolated from the next 5 kilometers (or next 2.195 kilometers for the 40km datapoint).\n\nLet's look at the 90th quantile, mean, median, and 10th quantile for the selected population. Your line appears in green.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"md`For the first 5 km, the median pace for ${sexBox.map(v => v === 'M' ? 'men' : 'women').join(' and ')} from ${country === 'All' ? 'all countries' : countryCodes[country]} is ${formatToMinutes(pacesStatistics[0].median)} per km. It rises to ${formatToMinutes(pacesStatistics[7].median)} between kilometers 35 and 40, then reaches ${formatToMinutes(pacesStatistics[8].median)} for the final 2.195km.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"md`## All runners on a map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"md`Click play below to see the waves or finishers go from the Champs-Elysées to Porte Dauphine. The green dot is yours :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"viewof startButton = button({value: \"Start/pause animation\", description: \"Click on that button to see the waves of finishers.\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"md`${formatTimestampToHours(timeWindows[timeGenerator])}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"md`## Finish time depending on start time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"md`Here we can see how long people took to run the Paris Marathon depending on their start times. Again, the different shades of blue indicate the 90th percentile, mean, median, and 10th percentile.\nThe orange line (with the axis on the right), shows how many people departed each minute. We can see the different waves starting with some pause between waves.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"md`One interesting phenomenon happening here is that each wave is made of 2 sub-waves. The first people to start at the second sub-wave tend to catch up to the first sub-wave, and finish in slightly better times than the end of the first sub-wave.\n\nThis can be seen in the slight dips in the blue lines of this graph, for the second orange bump of each wave.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"md`## Runner density along the route`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"md`Here we can see how busy parts of the route for every minute. We plot the trajectory of each finisher in the (time, distance along the route) space.\nThe ratio between men and women defines the color between green (men) and orange (women).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"data = {\n yield [{sex: \"M\", pid: \"R8XVUBM7\", country: \"FRA\", splits: Array(10)}]\n yield await d3.json('https://gist.githubusercontent.com/benjamintd/5621bd20012e99384352dce6375529e8/raw/cfc71dec11a0e5aee38e97f749bae57568968560/splits.json')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"filteredData = \n data\n .filter(runnerData => sexBox.indexOf(runnerData.sex) > -1)\n .filter(runnerData => (country === 'All') ? 1 : runnerData.country === country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1128,"value":"timesAround4Hours = times.filter(d => d <= 14600 && d >= 14200).sort((a,b) => a - b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1149,"value":"## Just zooming in around 4:00:00","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"Plot.plot({\n height: 200,\n width: 1100,\n x: {\n tickFormat: formatToHours\n },\n marks: [\n Plot.dot(timesAround4Hours, Plot.dodgeY({x: d => d, r: 2, fill: \"steelblue\"})),\n Plot.ruleX([14400], { stroke: \"green\", strokeWidth: 2 , strokeOpacity: 0.5})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"times = filteredData\n .map(runnerData => Math.round(runnerData.splits[runnerData.splits.length - 1] - runnerData.splits[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"paces = filteredData\n .map(runnerData => {\n var runnerPaces = [];\n for (var i = 0; i < splits.length - 1; i++) {\n var pace = (runnerData.splits[i + 1] - runnerData.splits[i]) / (splits[i+1] - splits[i])\n runnerPaces.push(Math.round(pace))\n }\n return runnerPaces\n })\n.filter(pace => pace.every(p => p > 0 && p < 1000))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"pacesStatistics = splits.slice(0, -1).map((km, i) => {\n var pacesAtKm = paces.map(p => p[i]);\n return {\n km: km,\n min: ss.min(pacesAtKm),\n max: ss.max(pacesAtKm),\n mean: ss.mean(pacesAtKm),\n median: ss.quantile(pacesAtKm, 0.5),\n tenthQuantile: ss.quantile(pacesAtKm, 0.1),\n nintiethQuantile: ss.quantile(pacesAtKm, 0.9),\n count: pacesAtKm.length\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"timeAndStart = {\n let timeAndStart = [];\n let d = filteredData.map(runnerData => {\n return {start: runnerData.splits[0], time: Math.round(runnerData.splits[runnerData.splits.length - 1] - runnerData.splits[0])}\n })\n \n for (var i = 0; i < timeWindows.length; i++) {\n timeAndStart.push(d\n .filter(rd => rd.start > timeWindows[i] && rd.start <= timeWindows[i + 1])\n .map(e => e.time)\n )\n }\n \n return timeAndStart\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"timeAndStartStatistics = {\n return timeWindows.map((start, i) => {\n var timeData = timeAndStart[i];\n if (timeData.length === 0) return;\n return {\n start: start,\n min: ss.min(timeData),\n max: ss.max(timeData),\n mean: ss.mean(timeData),\n median: ss.quantile(timeData, 0.5),\n tenthQuantile: ss.quantile(timeData, 0.1),\n nintiethQuantile: ss.quantile(timeData, 0.9),\n count: timeData.length\n }\n }).filter(a => !!a)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"splits = [0, 5, 10, 15, 20, 25, 30, 35, 40, 42.195]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"runnerDensity = d3.json('https://gist.githubusercontent.com/benjamintd/5621bd20012e99384352dce6375529e8/raw/7c55a28898efb29215710182e3f543657ff4ea1b/density.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"runnerCount = filteredData.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"startTime = 1523167200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"endTime = 1523199600 //1523175000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"timeWindows = {\n var timeWindows = [];\n for (let i = startTime; i <= endTime; i += 60) {\n timeWindows.push(i)\n }\n \n return timeWindows;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"countries = {\n let countriesHash = {}\n \n data.forEach(runnerData => {\n if (!countriesHash[runnerData.country]) countriesHash[runnerData.country] = 0\n countriesHash[runnerData.country] += 1\n })\n \n return Object.keys(countriesHash).sort((a, b) => countriesHash[b] - countriesHash[a])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"fc = d3.json('https://gist.githubusercontent.com/benjamintd/5621bd20012e99384352dce6375529e8/raw/ba050fc72400dfd42d009b42278c99d44b7b7aa5/fc.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"timeGenerator = {\n let i = this || 0;\n for (let e of timeWindows) {\n await new Promise(resolve => setInterval(() => resolve(), 50))\n if (!animated) return yield i\n map.setPaintProperty('points', 'heatmap-weight', [\"at\", i++, [\"get\", \"densities\"]]);\n \n\n yield i\n }\n yield 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"animated = {\n if (this === undefined) return false;\n startButton\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":820,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":952,"value":"ruler = cheapRuler(48.855817, 'kilometers')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":957,"value":"route = d3.json('https://gist.githubusercontent.com/benjamintd/30cb5c43ebec2c7e73498e95f5d3756b/raw/6102cd5de1f7baf4091eb299f79ef5ca5df39041/route.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1083,"value":"searchOptions = [{value: 'none', label: 'no one found - click to continue without bib', checked: true}];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`## Imports and utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"import {checkbox, radio, text, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"countryCodes = {\n let countryCodes = {}\n let countriesArray = await d3.json('https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/slim-3/slim-3.json')\n countriesArray.forEach(c => { countryCodes[c['alpha-3']] = c.name })\n return countryCodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@v0.44.1');\n mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuamFtaW50ZCIsImEiOiJjaW83enIwNjYwMnB1dmlsejN6cDBzbm93In0.0ZOGwSLp8OjW6vCaEKYFng';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":710,"value":"maxpboxglCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"formatToMinutes = (d) => {\n let totalMinutes = (d/60);\n let m = Math.floor(totalMinutes)\n let s = Math.round(d - 60 * m)\n return m + '\\'' + (s < 10 ? '0' + s : s) + '\"'\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"formatToHours = (d) => {\n let totalMinutes = (d/60);\n let h = Math.floor(totalMinutes/60)\n let m = Math.round(totalMinutes - 60 * h)\n return h + 'h' + (m < 10 ? '0' + m : m)\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"formatTimestampToHours = t => {\n var d = new Date(t * 1000)\n var h = d.getHours(d)\n var m = d.getMinutes(d)\n return h + 'h' + (m < 10 ? '0' + m : m)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"findLocation = (runnerSplits, timestamp) => { \n for (var i = 0; i < 10; i++) { // there are 10 split points -- ok this could be faster with dichotomy\n if (runnerSplits[i] < timestamp && runnerSplits[i + 1] >= timestamp) {\n var p = (timestamp - runnerSplits[i]) / (runnerSplits[i + 1] - runnerSplits[i]);\n if (p < 0.001 || p > 0.999) break; // remove ppl stuck at kilometers\n var k = (1 - p) * splits[i] + p * splits[i + 1];\n return ruler.along(route.geometry.coordinates, k);\n }\n }\n\n return [0, 0]; // TODO change default\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"cheapRuler = require('cheap-ruler')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"