31:T500,function renderSingleRider(rider) { const flag = countryToHtmlFlag(rider.country); const renderFlag = flag ? flag : md`# 🤷🏻`; return html`

${renderFlag}

${rider.name}

Age: ${rider.age}

Country: ${rider.country}

City: ${rider.city}

Weight: ${rider.weight} kg

Height: ${rider.height} m

Wins: ${rider.wins}

${genScoreBars({ climber: +rider.pclimber, gc: +rider.pgc, oneday: +rider.poneday, tt: +rider.ptt, sprint: +rider.psprint })}

`; }32:T423,// TODO: The score I am scrapping from PCS is not the right one, it is showing the accumulated score. We have to grab the style for the bar, specifically the width of the div which is in %; function createRiderBar({ score, label, color = "deeppink" }) { const barPxWidth = 200; const scale = d3 .scaleLinear() .domain([0, 100]) .range([0, barPxWidth]); return html`

${label} (${score})

`; }33:[{"id":"f12e740d92ba82db0c94102fd5d4d5f7d7f8b29f57b5e164b749f607c7f50c32886ebfb796433b6c890cc7fb1e1e80a077491abf85073b708ab92fea34c4b7c6","href":"https://static.observableusercontent.com/files/f12e740d92ba82db0c94102fd5d4d5f7d7f8b29f57b5e164b749f607c7f50c32886ebfb796433b6c890cc7fb1e1e80a077491abf85073b708ab92fea34c4b7c6","name":"pc-data@3.csv","type":"text/csv","lastModified":1646043435899.491,"size":169388},{"id":"34ae712fc44faef36020008ad063bc1d22611f2152a6fa9aa49a552f4d8b24185890284d36e5c2e21a6c9bd8440dcfe02825dac26b87a8510f881d7f6deae16e","href":"https://static.observableusercontent.com/files/34ae712fc44faef36020008ad063bc1d22611f2152a6fa9aa49a552f4d8b24185890284d36e5c2e21a6c9bd8440dcfe02825dac26b87a8510f881d7f6deae16e","name":"ridersWithCoor.json","type":"application/json","lastModified":1646135035168.04,"size":224429}] 2f:{"title":"Exploring pro-cycling data","cells":[{"id":0,"value":"# Exploring pro-cycling data","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"md`All these data is coming from the wonderful [procycling stats](https://www.procyclingstats.com/) site. The site contains tons of useful data that they update periodically as events happen. I scrapped the website to gather the data I found insteresting. Let me know if you'd like to see the scrapping code. Turns out it was a fun code to write.\n\nEach entry in the csv data file contains a rider (**${proData.length}** riders loaded). I truncated some data to make it easier to read in the table.\n\nThe *(oneday, gc, tt, sprint, climber)* columns show the score procycling stats gives to the rider for a particular riding category. *wins* shows the number of wins in his carreer. The p* entries contain the percentage on each category. Check [this](https://observablehq.com/@drio/exploring-pro-cycling-data#cell-2825) cell to see the data for a particular rider.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"viewof toggleAll = Inputs.toggle({\n label: html`

Show/Hide all sections

`,\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"md`# The data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"viewof showTable = Inputs.toggle({\n label: \"Toggle to reveal/hide data 👉\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n const ellipse = s => s.slice(0, 5) + \"...\";\n const p = proData.map(e => {\n let { team, url, image, shirt } = e;\n\n return {\n ...e,\n ...{\n team: ellipse(team),\n url: ellipse(url),\n image: ellipse(image),\n shirt: ellipse(shirt)\n }\n };\n });\n return hideSection(showTable, Inputs.table(p));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`The urls point to the team jersey (shirt), rider's procycling stats site (url) and rider's picture (image). Let's write some code to see the pictures of the riders and some of the data in a more visual form.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1952,"value":"md`# Meet the teams`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"viewof hideJerseys = Inputs.toggle({\n label: \"Toggle to reveal/hide teams 👉\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1940,"value":"hideSection(hideJerseys, renderJerseys(120))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"md`# Riders data in a more visual way`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1524,"value":"viewof hideRiders = Inputs.toggle({\n label: \"Hide riders section\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof checkAllRiders = Inputs.toggle({\n label: \"Show all riders on team\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof currRiderId = Inputs.select(\n new Map(\n proData.filter((e) => e.team === currTeam).map((e) => [e.name, e.id])\n ),\n { value: 319, label: \"Rider Name\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof currTeam = Inputs.select(teams, {\n value: \"Jumbo-Visma\",\n label: \"Team\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"hideSection(\n hideRiders,\n renderRiders(\n checkAllRiders\n ? riderByTeam.map(r => renderRider(r))\n : renderSingleRider(proData[currRiderId])\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"md`# Where are the riders coming from?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"viewof hideMap = Inputs.toggle({\n label: \"Hide Map section\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"viewof allTeamsInMap = Inputs.toggle({\n label: \"Select all teams\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1989,"value":"viewof checkboxTeam = renderTeamCheckboxes()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"hideSection(hideMap, renderMercator(selectedForMap))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"md`## Riders by team and country\n\nUEA is the team with the most country respresentation (18 countries). The worse are Astana, Lotto, Arkea and DSM (7 countries).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"viewof hideCountriesByTeam = Inputs.toggle({\n label: \"Hide Countries by team section\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"{\n const sortedTeamsByCountries = new Map(\n [...dataByTeamAndCountry.entries()].sort(\n (a, b) => [...b[1]].length - [...a[1]].length\n )\n );\n let entries = \"\";\n [...sortedTeamsByCountries.keys()].forEach(t => {\n entries += countRidersByCountry(dataByTeamAndCountry, t);\n });\n\n return hideSection(\n hideCountriesByTeam,\n html`

${entries}

`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1878,"value":"md`### What are the teams that have the most rider from a single country?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"viewof hideBarChartRiders = Inputs.toggle({\n label: \"Hide Barchart\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1870,"value":"{\n return hideSection(\n hideBarChartRiders,\n Plot.plot({\n marginLeft: 220,\n marginRight: 100,\n width: 800,\n y: {\n domain: d3\n .sort(teamsMostRidersInCountry, d => -d.riderCount)\n .map(d => d.team)\n },\n //color: { range: [\"#e15759\", \"#4e79a7\"] },\n color: {\n domain: teamsMostRidersInCountry.riderCount,\n scheme: \"spectral\"\n },\n x: { grid: true },\n marks: [\n Plot.barX(teamsMostRidersInCountry, {\n x: \"riderCount\",\n y: \"team\",\n fill: \"riderCount\"\n }),\n Plot.text(teamsMostRidersInCountry, {\n x: \"riderCount\",\n y: \"team\",\n text: d => `${d.riderCount} (${d.country})`,\n dx: 40\n })\n ]\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1881,"value":"md`### What are the countries with most riders in the peloton? \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2153,"value":"viewof hideNumRidersByCountry = Inputs.toggle({\n label: \"Hide barchart\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2175,"value":"viewof rangeMinNumberOfRiders = Inputs.range(\n [0, d3.max(numRidersByCountry, d => d.number)],\n {\n step: 1,\n value: 10,\n label: \"Only countries with at least this number of riders\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2231,"value":"md`These countries make **${perOfTotalRiders}%** of the riders in the peloton.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2151,"value":"{\n return hideSection(\n hideNumRidersByCountry,\n Plot.plot({\n marginLeft: 100,\n marginRight: 100,\n color: {\n domain: filteredNumRidersByCountry.riderCount,\n scheme: \"spectral\"\n },\n y: {\n domain: d3\n .sort(filteredNumRidersByCountry, d => -d.number)\n .map(d => d.country)\n },\n x: { grid: true },\n marks: [\n Plot.barX(filteredNumRidersByCountry, {\n x: \"number\",\n y: \"country\",\n fill: \"number\"\n }),\n Plot.text(filteredNumRidersByCountry, {\n x: \"number\",\n y: \"country\",\n text: d => d.number,\n dx: 10\n })\n ]\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2318,"value":"md`What's are the most common height/weight values?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2593,"value":"viewof hideHeatMap = Inputs.toggle({\n label: \"Hide heatmap\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2384,"value":"{\n return hideSection(\n hideHeatMap,\n Plot.rect(\n proData,\n Plot.bin(\n { fillOpacity: \"count\" },\n {\n x: \"weight\",\n y: \"height\",\n title: d => `weight:${d.weight} height:${d.height}`\n }\n )\n ).plot({ width: 400, height: 400 })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2541,"value":"md`What about if we focus on teams?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"viewof hidePerTeamHeatMap = Inputs.toggle({\n label: \"Hide chart\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2437,"value":"{\n function genDiv(t) {\n return html`

${\n teamToShort[t]\n } ${heatMap(t)}

`;\n }\n const divs = teams.map(t => genDiv(t));\n return hideSection(\n hidePerTeamHeatMap,\n html`

${divs}

`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2852,"value":"md`## Rider skills`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2615,"value":"md`We turn out attention to the riders' skills. The dataset comes with five categories associated to each rider. For example, here is the data for *Wout van Aert*. You can see he is one of the bests in one day races and he is ok in the other areas. We can argue about that but it doesn't seem far off.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2825,"value":"renderSingleRider(proData.filter(e => e.name === 'Wout van Aert')[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2867,"value":"md`The following plot shows the values for a particular skill across all the teams in the peloton. Not very helpful.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3278,"value":"viewof hideMarksChart = Inputs.toggle({\n label: \"Hide chart\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2793,"value":"hideSection(hideMarksChart, plotRule(teamSkillValues(\"pclimber\"), \"pclimber\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2876,"value":"md`We can improve this by visualizing *what percentage of the riders are above a particular skill threshold*. Let's work on that. Pick any of the teams and see how they compare to each other:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3059,"value":"viewof checkboxTeamForCum = renderTeamCheckboxes([\n \"Jumbo-Visma\",\n \"UAE-Team-Emirates\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3280,"value":"viewof hideSkillChart = Inputs.toggle({\n label: \"Hide chart\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2885,"value":"{\n return hideSection(\n hideSkillChart,\n checkboxTeamForCum.length === 0\n ? md`Select at least one team 🙇`\n : Plot.plot({\n width,\n height: 200,\n facet: {\n data: filteredCum,\n x: \"skill\"\n },\n /*\n color: {\n domain: [false, true],\n range: [\"#ccc\", \"red\"]\n }*/\n color: {\n legend: true\n },\n y: {\n grid: true,\n label: \"% above skill\"\n },\n x: {\n grid: true,\n label: \"hability score\"\n },\n marks: [\n // Plot.frame(),\n Plot.line(filteredCum, {\n y: \"per\",\n x: \"value\",\n //stroke: d => checkboxTeamForCum.includes(d.team)\n curve: \"linear\",\n stroke: \"team\"\n })\n ]\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`# Implementation `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3099,"value":"filteredCum = computedTeamCumSkillValues.filter(e =>\n checkboxTeamForCum.includes(e.team)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2918,"value":"/*\n input: \n - data: array of values \n output:\n - [ {team, per, skill}, ... ]\n */\nfunction computeCum(data, team, skill) {\n const result = [];\n d3.range(0, 101, 1).forEach(p => {\n const nAbove = data.filter(e => e > p).length;\n const perSkill = +((nAbove / data.length) * 100).toFixed(2);\n const entry = { team, per: p };\n entry[skill] = perSkill;\n result.push(entry);\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2946,"value":"// [\n// { team, per: 5, gc: 20, climber: 23, ....} ,\n// ..\n// ]\ncomputedTeamCumSkillValues = {\n let result = [];\n const skillNames = Object.values(skillsMap);\n teams.forEach(team => {\n let skillCum = {};\n skillNames.forEach(skill => {\n const listSkillValuesForTeam = teamSkillValues(skill)\n .filter(e => e.team === team)\n .map(e => e[skill]);\n computeCum(listSkillValuesForTeam, team, skill).forEach(se => {\n result.push({ team, skill, per: se.per, value: se[skill] });\n });\n });\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2622,"value":"function teamSkillValues(skill) {\n const teamSkillValues = [];\n [...d3.group(proData, d => d.team)].forEach(([team, entries]) => {\n entries\n .map(e => +e[skill])\n .sort((a, b) => a - b)\n .forEach(x => {\n const newEntry = { team };\n newEntry[skill] = x;\n teamSkillValues.push(newEntry);\n });\n });\n return teamSkillValues;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2619,"value":"teamSkills = [...d3.group(proData, d => d.team).entries()].map(\n ([team, entries]) => {\n const result = [];\n const compute = k =>\n +(d3.sum(entries, d => d[k]) / entries.length).toFixed(2);\n const sums = {\n oneday: compute(\"poneday\"),\n gc: compute(\"pgc\"),\n tt: compute(\"ptt\"),\n sprint: compute(\"psprint\"),\n climb: compute(\"pclimber\")\n };\n return [team, sums];\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"function plotRule(data, skill) {\n return Plot.plot({\n x: { domain: [0, 100] },\n width: 900,\n facet: {\n data,\n y: \"team\",\n marginLeft: 250\n },\n marks: [Plot.ruleX(data, { x: skill, stroke: skill })]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2820,"value":"skillsMap = ({\n gc: 'pgc', \n oneday: 'poneday',\n climb: 'pclimber', \n sprint: 'psprint',\n tt: 'ptt'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"function barChart(team) {\n const d = proData.filter(e => e.team === team);\n return Plot.rectY(\n d,\n Plot.binX({ y: \"count\" }, { x: \"weight\", y: \"height\", fill: \"steelblue\" })\n ).plot({\n width: 200,\n height: 150\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2543,"value":"function heatMap(t) {\n const d = proData.filter(e => e.team === t);\n return Plot.rect(\n d,\n Plot.bin(\n { fillOpacity: \"count\" },\n { x: \"weight\", y: \"height\", thresholds: 5 }\n )\n ).plot({\n width: 150,\n height: 150\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"teamToShort = ({\n \"AG2R Citroën Team\": \"AG2R\",\n \"Alpecin-Fenix\": \"AFenix\",\n \"Astana Qazaqstan Team\": \"Astana\",\n \"Bahrain - Victorious\": \"Bahrain\",\n \"BORA - hansgrohe\": \"BORA\",\n Cofidis: \"Cofidis\",\n \"EF Education-EasyPost\": \"EF\",\n \"Groupama - FDJ\": \"GFDJ\",\n \"INEOS Grenadiers\": \"Ineos\",\n \"Intermarché - Wanty - Gobert Matériaux\": \"IMarché\",\n \"Israel - Premier Tech\": \"Israel\",\n \"Jumbo-Visma\": \"Jumbo\",\n \"Lotto Soudal\": \"Lotto\",\n \"Movistar Team\": \"Movistar\",\n \"Quick-Step Alpha Vinyl Team\": \"QStep\",\n \"Team Arkéa Samsic\": \"Arkéa\",\n \"Team BikeExchange - Jayco\": \"BikeExchange\",\n \"Team DSM\": \"DSM\",\n TotalEnergies: \"TotalE\",\n \"Trek - Segafredo\": \"Trek\",\n \"UAE Team Emirates\": \"UEA\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2282,"value":"proDataNumberTeam = proData.map(e => ({\n ...e,\n ...{ team: teams.indexOf(e.team) }\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2216,"value":"perOfTotalRiders = +(\n (d3.sum(filteredNumRidersByCountry.map(e => e.number)) * 100) /\n proData.length\n).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"numRidersByCountry = [...d3.group(proData, d => d.country).entries()]\n .map(([c, l]) => [c, l.length])\n .sort((a, b) => b[1] - a[1])\n .map(([c, l]) => ({ country: c, number: l }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2192,"value":"filteredNumRidersByCountry = numRidersByCountry.filter(\n o => o.number >= rangeMinNumberOfRiders\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"function renderTeamCheckboxes(startWith = [\"Jumbo-Visma\"]) {\n return Inputs.checkbox(teams, {\n label: \"Team\",\n value: allTeamsInMap ? teams : startWith\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"function renderJerseys(width) {\n let h = \"\";\n const w = width ? width : \"\";\n teams.forEach(t => {\n const link = teamToJersey[t];\n h += `

`;\n });\n return html`${h}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"teamToJersey = {\n const result = {};\n proData.forEach(e => (result[e.team] = e.shirt));\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1729,"value":"teamsMostRidersInCountry = {\n const result = [];\n [...dataByTeamAndCountry.entries()].forEach(([team, countryMap]) => {\n result.push(\n [...countryMap].reduce(\n (acc, e) => {\n const [country, listOfRiders] = e;\n return listOfRiders.length > acc.riderCount\n ? { team, country, riderCount: listOfRiders.length }\n : acc;\n },\n { riderCount: 0 }\n )\n );\n });\n\n return result.sort((a, b) => b.riderCount - a.riderCount);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1725,"value":"dataByTeamAndCountry = d3.group(proData, d => d.team, d => d.country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"{\n toggleAllSections(toggleAll);\n return md`React to the toggle/hide all sections...`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"function toggleAllSections(value) {\n function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n }\n\n set(viewof showTable, value);\n set(viewof hideRiders, value);\n set(viewof hideMap, value);\n set(viewof hideCountriesByTeam, value);\n set(viewof hideBarChartRiders, value);\n set(viewof hideJerseys, value);\n set(viewof hideNumRidersByCountry, value);\n set(viewof hideHeatMap, value);\n set(viewof hidePerTeamHeatMap, value);\n set(viewof hideMarksChart, value);\n set(viewof hideSkillChart, value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"function hideSection(onoff, section) {\n return onoff ? html`... 🙈` : section;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"selectedForMap = proDataWithCoor.filter(r => checkboxTeam.includes(r.team))","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"riderByTeam = proData.filter((e) => e.team === currTeam)","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"teams = [...new Set(proData.map(({ team }) => team))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"md`When we are rendering a single rider with details:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"function renderRider(rider) {\n const flag = countryToHtmlFlag(rider.country);\n const renderFlag = flag ? flag : md`# 🤷🏻`;\n return html`\n

${renderFlag}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"function renderRiders(htmlRiders) {\n return html`\n \n

\n ${htmlRiders}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"{\n return genScoreBars({\n climber: 20,\n gc: 30,\n oneday: 90,\n tt: 50,\n sprint: 80\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"function genScoreBars({ climber, gc, oneday, tt, sprint }) {\n return html`\n ${createRiderBar({\n score: climber,\n label: \"climber\",\n color: proCyclingColors.climber\n })}\n ${createRiderBar({\n score: gc,\n label: \"GC\",\n color: proCyclingColors.gc\n })}\n ${createRiderBar({\n score: oneday,\n label: \"one day races\",\n color: proCyclingColors.oneday\n })}\n ${createRiderBar({\n score: tt,\n label: \"TT\",\n color: proCyclingColors.tt\n })}\n ${createRiderBar({\n score: sprint,\n label: \"sprint\",\n color: proCyclingColors.sprint\n })}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"function countRidersByCountry(group, team) {\n let entries = \"\";\n let teamToCountries = \"\";\n const sortedCountriesByNumRiders = new Map(\n [...group.get(team).entries()].sort((a, b) => b[1].length - a[1].length)\n );\n [...sortedCountriesByNumRiders.keys()].forEach(c => {\n // each Country\n const byTeamAndCountry = [...group.get(team).get(c)];\n teamToCountries += `\n

\n ${countryToHtmlFlag(\n c,\n false\n )} ${\n byTeamAndCountry.length\n }\n

`;\n });\n\n entries += `\n

${team} (${\n [...group.get(team)].length\n } countries)

${teamToCountries}

`;\n return entries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"{\n const group = d3.group(proData, d => d.team, d => d.country);\n return html`${countRidersByCountry(group, 'Alpecin-Fenix')}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"proData = {\n const proData = await FileAttachment(\"pc-data@3.csv\").csv();\n const riders = proData.map((e, i) => ({ ...{ id: i }, ...e }));\n return fixJerseys(riders);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"md`Some jersey images are broken:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"specialCasesJerseis = ({\n Cofidis:\n \"https://www.procyclingstats.com/images/shirts/bx/eb/cofidis-2022-n2.png\",\n \"Jumbo-Visma\":\n \"https://www.procyclingstats.com/images/shirts/bx/eb/team-jumbo-visma-2022.png\",\n \"EF Education-EasyPost\":\n \"https://www.procyclingstats.com/images/shirts/bx/eb/ef-education-easypost-2022-n2.png\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"function fixJerseys(data) {\n return data.map(r => {\n const fixedLink = specialCasesJerseis[r.team];\n return fixedLink ? { ...r, ...{ shirt: fixedLink } } : r;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"// Use this to regenerate the ridersWithCoor.json\n//foo = generateProDataWithCoorJSON()\nproDataWithCoor = {\n const proDataWithCoor = await FileAttachment(\"ridersWithCoor.json\").json();\n return proDataWithCoor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"proCyclingColors = ({\n oneday: \"#5dcc4e\",\n gc: \"#F42A0E\",\n tt: \"#5DA9EF\",\n sprint: \"#FFAD4E\",\n climber: \"#BB4B9C\",\n background: \"#DCEDF2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"function addCoordinatesToRiders(riders, cities, abToCountry) {\n const newRiders = riders\n .map(r => {\n const matchesCities = cities.filter(\n c => c.name.toLowerCase() === r.city.toLowerCase()\n );\n let city;\n if (matchesCities && matchesCities.length > 0) {\n if (matchesCities.length === 1) city = matchesCities[0];\n else {\n // more than one city with same name\n const mc = matchesCities.filter(\n c => abToCountry(c.country) === r.country\n );\n if (mc.length === 1) city = mc[0];\n }\n }\n return city\n ? {\n ...r,\n ...{ lat: city.lat, lng: city.lng }\n }\n : null;\n })\n .filter(r => r);\n\n return newRiders;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"function generateProDataWithCoorJSON() {\n return JSON.stringify(addCoordinatesToRiders(proData, cities, abToCountry));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"import { countryToHtmlFlag } from \"@drio/css-flags\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"import {\n cities,\n abToCountry,\n renderMercator\n} from \"@drio/pro-cyclists-hometowns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"import { combo, paged, tabbed } from \"@esperanc/aggregated-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`Styles for the flags. An example of how to use it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"countryToHtmlFlag(proData[123].country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"countryToHtmlFlag(\"asa\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}