Public
Edited
Dec 15, 2023
Importers
selectedRidersTop[12]
data[0]
function renderMercator(listOfCities) {
const projection = d3.geoMercator();
const path = d3.geoPath(projection);
//const background = "#343332";
const background = "white";
//const background = "aliceblue";
const circles = listOfCities.map(d => {
const position = projection([d.lng, d.lat]);
const [x, y] = position;
const circle = svg`<circle cx="${x}" cy="${y}" r="5" fill="tomato" opacity="0.5" />`;
return circle;
});
return html`
<svg viewbox="0 0 ${width} ${width / 2}">
<path d="${path(countries)}" stroke="#515150" fill="${background}" />
${circles}
</svg>
`;
}
function abToCountry (country) {
return abbreviations.filter(
({ abbreviation }) => abbreviation === country
)[0].country;
}
data = {
// Add lat and lng to riders
return riders
.map(r => {
const matchesCities = cities.filter(
c => c.name.toLowerCase() === r.city.toLowerCase()
);
let city;
if (matchesCities && matchesCities.length > 0) {
if (matchesCities.length === 1) city = matchesCities[0];
else {
// more than one city with same name
const mc = matchesCities.filter(
c => abToCountry(c.country) === r.country
);
if (mc.length === 1) city = mc[0];
}
}
return city
? {
...r,
...{ lat: city.lat, lng: city.lng }
}
: null;
})
.filter(r => r);
}
cities[0]
riders[0]
countryCodes = abbreviations.map(({ abbreviation }) =>
abbreviation.toLowerCase()
)
testdrd = {
const url = "https://www.procyclingstats.com/teams";
const source = await loadPage(url);
const s =
"body > div.wrapper > div.content > div.page-content.page-object.default > div:nth-child(1) > div:nth-child(3) > ul";
//let $ = cheerio.load(sourceMVPPage);
let $ = cheerio.load(source);
return $(s)
.find("a")
.toArray()
.map(a => $(a).attr("href"));
}
{
console.log(testdrd);
}
cheerio = require('https://bundle.run/cheerio@1.0.0-rc.5')
abbreviations = d3.json(
"https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-abbreviation.json"
)
import { Range, Checkbox, Select } from "@observablehq/inputs"
topojson = require("topojson-client@3")
d3 = require('d3@6')
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.
