Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Sep 6, 2020
1 fork
1 star
Tour de France 2021 - Start ListHello LeTourDataSetTour de France 2019 classification
Tour de France 2020 - Start List
Also listed in…
Datasets
html`${teams.map(showTeam)}`
showTeam = team => html`
<article style="padding-bottom: 5em">
<header><h2>${team.name} ${palette(team.colorsJersey, 40)}</h2>
<a href="https://www.letour.fr${team.relativeTeamUrl}">
<img style='height: 50px' src="${baseUrl}images/logo-team-${team.code}.png" />
</a>
</header>
<div style='display: flex; flex-direction: row; flex-wrap: wrap;'>
${ridersByTeam.get(team.code).map(showRider)}
</div>
</article>`
showRider = r => html`
<div style='width: ${Math.max(width / 4, 100)}px; flex: none;'>
<a href="https://www.letour.fr${r.relativeRiderUrl}">
<img style='max-height: 100px; ' src="${baseUrl}images/profile-rider-${
r.bibNumber
}.png" />
</a>
<p><strong>${r.bibNumber}</strong> ${r.firstName} ${r.fullName}</p>
</div>`
palette = (colors, width) =>
html`<svg viewBox="0 0 ${colors.length} 1" width="${width}" >${colors.map(
(color, i) =>
`<rect x="${i}" y=0 width=1 height=1 fill="${color}" stroke="none"></rect>`
)}</svg>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
