31:[{"id":"d151c4baa29c801711fb4d94a7f763f011eec07c2977582595b1d55c15aeefc2754c43b8d05676d36ac502acb706d0ace3a621986965dfe3552f8bfec860f42a","href":"https://static.observableusercontent.com/files/d151c4baa29c801711fb4d94a7f763f011eec07c2977582595b1d55c15aeefc2754c43b8d05676d36ac502acb706d0ace3a621986965dfe3552f8bfec860f42a","name":"grabjson.png","type":"image/png","lastModified":1651180319240.818,"size":1833729}] 2f:{"title":"How Fast To Podium? Scratchpad","cells":[{"id":0,"value":"# How Fast To Podium? Scratchpad\n## An exploration","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"Everything below is, in order and messily, how I approached building [this little tool](https://observablehq.com/@wiederkehra/how-fast-to-podium) for my racing season.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":946,"value":"### `The idea`","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"A tool for figuring out what time I need to race on a course in order to X (place on the podium, be in the top 5 female runners, etc). What I'd walk away with is: What's the avg finishing time +/- I need, in order to X.\n- Scrape something like [UltraSignup](https://ultrasignup.com/) for results over X years for any given race\n- Inputs on my age, sex, desired placing\n- Output: Finishing time based on desired placing and inputs\n\n Nice to have: \n
Fetch updates when new race results are in.","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"### `Getting started`","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"So first we're going to grab the CORS proxy, which looks like this: \nhttps://observable-cors.glitch.me/","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"Then we're going to get the json data for the results from the event that we want to scrape (right now, Salt Flats Endurance 50km from last year first my first race of the season). UltraSignup maayyyybe has an API, but I'm going to do it a more manual way. This is how [@Fil](https://observablehq.com/@fil) suggested I how to do it:","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"FileAttachment(\"grabjson.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"Then we're going to add the CORS proxy, plus the link to the json data together, wrapped in a `d3.json` function, and get our array of objects:","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"runners21 = d3.json(\"https://observable-cors.glitch.me/\" + \"https://ultrasignup.com/service/events.svc/results/77340/1/json?_search=false&nd=1651179346342&rows=1500&page=1&sidx=status%20asc%2C%20&sord=asc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"Let's make a table to look at the data, we're also going to prune some of the columns and remove all of the DNFs:","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"viewof table = Inputs.table(runners21.filter(d => d.formattime !== \"0\"), {\n columns: [\"place\", \"formattime\", \"time\", \"age\", \"agegroup\", \"gender\", \"gender_place\", \"runner_rank\"],\n format: {time: x => ((x / 10000) / 360).toFixed(2) + \" hr\"} // remove last four 0s and calculate hours from seconds, truncate\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"I'm going to writing a quick function to handle the time. It's a string as opposed to a value:","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"stringsAsVal = function convertIntObj(obj) {\n const res = [{}]\n for (const key in obj) {\n res[key] = {};\n for (const prop in obj[key]) {\n const parsed = parseInt(obj[key][prop], 10);\n res[key][prop] = isNaN(parsed) ? obj[key][prop] : parsed;\n }\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"Then let's run that over the data:","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"newRunners21 = stringsAsVal(runners21);","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof summaryTime = SummarizeColumn(newRunners21, \"time\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"Time is still formatted as seconds, which is sort of annoying, but we'll handle that later. Let's look at some quick distributions of finishers by gender:","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"Plot.plot({\n grid: true,\n facet: {\n data: newRunners21.filter(d => d.time !== 0),\n x:\"\",\n y: \"gender\"\n },\n marks: [\n Plot.rectY(\n newRunners21.filter(d => d.time !== 0),\n Plot.binX(\n { y: \"sum\" }, \n { x: \"time\", \n fill: \"gender\",\n thresholds: 30,\n facet: \"exclude\" // need this so Plot doesn't plot both genders\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"Makeshift Legend\n```\n15,000,000 sec = ~4.1 hr\n20,000,000 = ~5.5 \n25,000,000 = ~6.9 \n30,000,000 = ~8.3 \n35,000,000 = ~9.7 \n40,000,000 = ~11.1\n```","pinned":false,"hidden":false,"mode":"md"},{"id":291,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":950,"value":"### `After sampling, let's look at all the data`","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"### Data from each year","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"runners21","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"runners19 = d3.json(\"https://observable-cors.glitch.me/\" + \"https://ultrasignup.com/service/events.svc/results/57603/1/json?_search=false&nd=1651230976594&rows=1500&page=1&sidx=status%20asc%2C%20&sord=asc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"runners18 = d3.json(\"https://observable-cors.glitch.me/\" + \"https://ultrasignup.com/service/events.svc/results/47702/1/json?_search=false&nd=1651231014752&rows=1500&page=1&sidx=status%20asc%2C%20&sord=asc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"runners17 = d3.json(\"https://observable-cors.glitch.me/\" + \"https://ultrasignup.com/service/events.svc/results/40404/1/json?_search=false&nd=1651231040134&rows=1500&page=1&sidx=status%20asc%2C%20&sord=asc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"runners16 = d3.json(\"https://observable-cors.glitch.me/\" + \"https://ultrasignup.com/service/events.svc/results/33336/1/json?_search=false&nd=1651231054486&rows=1500&page=1&sidx=status%20asc%2C%20&sord=asc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"### Remove all the DNF or DNS\nWe want to remove runners that \"Did not finish\" or \"Did not start\" so their time of 0 doesn't skew the data:","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"noDNF21 = runners21.filter(d => d.time !== \"0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"diff21 = runners21.length - noDNF21.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"noDNF19 = runners19.filter(d => d.time !== \"0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"diff19 = runners19.length - noDNF19.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"noDNF18 = runners18.filter(d => d.time !== \"0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"diff18 = runners18.length - noDNF18.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"noDNF17 = runners17.filter(d => d.time !== \"0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"diff17 = runners17.length - noDNF17.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"noDNF16 = runners16.filter(d => d.time !== \"0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"diff16 = runners16.length - noDNF16.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"### Add year to each object\nWe want to add distinct years here so that we can filter runners from specific years, say, in a chart:","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"runners21year = noDNF21.map(object => {\n return {...object, year: '2021'};\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"runners19year = noDNF19.map(object => {\n return {...object, year: '2019'};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"runners18year = noDNF18.map(object => {\n return {...object, year: '2018'};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"runners17year = noDNF17.map(object => {\n return {...object, year: '2017'};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"runners16year = noDNF16.map(object => {\n return {...object, year: '2016'};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"### Merge all years together\nTo create one final dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"SFE50km = [...runners21year, ...runners19year, ...runners18year, ...runners17year, ...runners16year];","pinned":true,"hidden":false,"mode":"ojs"},{"id":918,"value":"### Create sets for just female and just male","pinned":false,"hidden":false,"mode":"md"},{"id":650,"value":"SFE50kmFemale = SFE50km.filter(d => d.gender === \"F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"SFE50kmMale = SFE50km.filter(d => d.gender === \"M\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"### Parse the time from sec to hr\nNow let's deal with the seconds issue, because no one talks about finishing times in seconds:","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"SFE50kmParsedAllGen = SFE50km.map(object => {\n return {...object, parsedTime: parseFloat((object.time / 1000) / 3600).toFixed(5)};\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"SFE50kmParsedFemale = SFE50kmFemale.map(object => {\n return {...object, parsedTime: parseFloat((object.time / 1000) / 3600).toFixed(5)};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"SFE50kmParsedMale = SFE50kmMale.map(object => {\n return {...object, parsedTime: parseFloat((object.time / 1000) / 3600).toFixed(5)};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"### Every runner who has finished the Salt Flats Endurance 50km\nNow we have our final set, cleaned up a bit! We can take a look with a table and a couple other preliminary charts:","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"viewof SFE50kmTable = Inputs.table((SFE50kmParsedAllGen), {\n columns: [\"year\", \"place\", \"formattime\", \"time\", \"parsedTime\", \"age\", \"agegroup\", \"gender\", \"gender_place\", \"runner_rank\"],\n format: {time: x => ((x / 10000) / 360).toFixed(2) + \" hr\"} // remove last four 0s and calculate hours from seconds, truncate\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"Plot.plot({\n grid: true,\n facet: {\n data: SFE50kmParsedAllGen,\n x:\"gender\",\n y: \"year\"\n },\n marks: [\n Plot.rectY(\n SFE50kmParsedAllGen,\n Plot.binX(\n { y: \"sum\" }, \n { x: \"parsedTime\", \n fill: \"gender\",\n thresholds: 30,\n // facet: \"exclude\", // need this so Plot doesn't plot both genders (only when faceting on one axis)\n }\n )\n )\n ],\n x: {\n nice: true,\n label: \"Finishing Time (hours)\",\n labelAnchor: \"center\"\n },\n y: {\n nice: true,\n label: \"Finishers\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"viewof selectedYear = Inputs.select(new Set(SFE50kmParsedAllGen.map(d => d.year)), {label: \"Select a year\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"viewof selectedGender = Inputs.select(new Set(SFE50kmParsedAllGen.map(d => d.gender)), {label: \"Select a gender\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"Plot.plot({\n grid: true,\n marks: [\n Plot.rectY(\n SFE50kmParsedAllGen.filter(d => d.year === selectedYear && d.gender === selectedGender),\n Plot.binX(\n { y: \"sum\" }, \n { x: \"parsedTime\", \n fill: \"gender\",\n thresholds: 30,\n }\n )\n )\n ],\n x: {\n nice: true,\n label: \"Finishing Time (hours)\",\n labelAnchor: \"center\",\n tickFormat: d3.format(\".3s\"), \n },\n y: {\n nice: true,\n label: `${selectedGender} Finishers`,\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"### Finishers by Placement and Finishing Time, All Genders, by Year","pinned":false,"hidden":false,"mode":"md"},{"id":544,"value":"Plot.plot({\n grid: true,\n color: {\n type: \"ordinal\",\n scheme: \"orrd\",\n legend: true\n },\n marks: [\n Plot.line(SFE50kmParsedAllGen, {\n x: \"parsedTime\",\n y: \"place\",\n stroke: \"year\",\n }), \n Plot.dot(SFE50kmParsedAllGen, {\n x: \"parsedTime\",\n y: \"place\",\n fill: \"#222222\",\n stroke: \"#FFFFFF\",\n }),\n // Plot.text(SFE50kmParsedAllGen, {\n // x: \"place\",\n // y: \"parsedTime\",\n // text: \"place\",\n // dy: -10\n // })\n ],\n height: 1000,\n x: { \n type: \"linear\", \n label: \"Finishing Time (hrs)\",\n }, \n y: { \n reverse: true,\n type: \"linear\", \n label: \"Finishing Place\",\n }, \n marginLeft: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"### Female Finishers, by Year","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"Plot.plot({\n grid: true,\n color: {\n type: \"ordinal\",\n scheme: \"pubugn\",\n legend: true\n },\n marks: [\n Plot.line(SFE50kmParsedFemale, {\n x: \"parsedTime\",\n y: \"gender_place\",\n curve: \"step-after\", //https://observablehq.com/@observablehq/plot-line#curve\n stroke: \"year\",\n }), \n Plot.dot(SFE50kmParsedFemale, {\n x: \"parsedTime\",\n y: \"gender_place\",\n fill: \"year\",\n stroke: \"#FFFFFF\",\n }),\n // Plot.text(SFE50kmParsedFemale, {\n // x: \"place\",\n // y: \"parsedTime\",\n // text: \"gender_place\",\n // dy: -10\n // })\n ],\n height: 575,\n x: { \n type: \"linear\", \n label: \"Finishing Time (hrs)\",\n }, \n y: { \n reverse: true,\n type: \"linear\", \n label: \"Finishing Place in Gender\",\n }, \n marginLeft: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"👋 I put together a cleaner version of this tool and visualizations, [check it out here](https://observablehq.com/@wiederkehra/how-fast-to-podium)! \n","pinned":false,"hidden":false,"mode":"md"},{"id":955,"value":"### `Cool, let's actually try and build the lil tool`","pinned":false,"hidden":false,"mode":"md"},{"id":687,"value":"### Calculate average time for each placement over the years of the race","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"viewof selectedPlace = Inputs.select(new Set(SFE50kmParsedFemale.map(d => d.gender_place)), {label: \"Select your ideal placing\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":" How many women have finished in that placing?","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"SFE50kmFemalePlacings.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"SFE50kmFemalePlacings = SFE50kmParsedFemale.filter(d => d.gender_place === selectedPlace)","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"What were their times?","pinned":false,"hidden":false,"mode":"md"},{"id":713,"value":"SFE50kmFemaleTimes = SFE50kmFemalePlacings.map(object => {\n return parseFloat(object.parsedTime);\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"What is the average time for that placing?","pinned":false,"hidden":false,"mode":"md"},{"id":833,"value":"`${hours} hours and ${minutes.toFixed(0)} minutes`","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"SFE50kmFemalePlaceAverage = average(SFE50kmFemaleTimes).toFixed(fixedFloat)","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"hours = parseInt(SFE50kmFemalePlaceAverage.substring(0, SFE50kmFemalePlaceAverage.indexOf('.')))","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"minutes = parseFloat(SFE50kmFemalePlaceAverage.substring(SFE50kmFemalePlaceAverage.length - strSlice)) * 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"...and what was last year's time for that placing?","pinned":false,"hidden":false,"mode":"md"},{"id":899,"value":"`${hours21} hours and ${minutes21.toFixed(0)} minutes`","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"hours21 = parseInt(lastYearStr.substring(0, lastYearStr.indexOf('.')))","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"minutes21 = parseFloat(lastYearStr.substring(lastYearStr.length - strSlice)) * 60 ","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"lastYearStr = lastYear[0].toString()","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"lastYear = SFE50kmFemale21Placing.map(object => {\n const time = parseFloat(object.parsedTime).toFixed(fixedFloat);\n return time;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"SFE50kmFemale21Placing = SFE50kmParsedFemale.filter(d => d.gender_place === selectedPlace && d.year === \"2021\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"import {SummarizeColumn} from \"@observablehq/summary-table\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"### General formulas","pinned":false,"hidden":false,"mode":"md"},{"id":886,"value":"fixedFloat = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"strSlice = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"average = arr => arr.reduce( ( p, c ) => p + c, 0 ) / arr.length;","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}