Unlisted
Edited
Jul 16, 2024
Inputs.table(
df.select([
"itemLabel",
"tourLabel",
"tournumber2",
"stagenumber2",
"winnerLabel",
"countryLabel"
])
)
Inputs.table(
df.select([
"itemLabel",
"tourLabel",
"tournumber2",
"stagenumber2",
"winnerLabel",
"countryLabel"
]),
{ layout: "auto" }
)
Inputs.table(
df.select([
"itemLabel",
"tourLabel",
"tournumber2",
"stagenumber2",
"winnerLabel",
"countryLabel"
]),
{ overflow: "scroll" }
)
df.view()
html`<div class="tourdefrance" ><table><thead><th>stage</th><th>tour</th><th>tour number</th><th>stage number</th><th>winner</th><th>country</th></thead><tbody> ${df
.objects()
.map(
(o) =>
'<tr><td><a href="' +
o.item +
'">' +
o.itemLabel +
'</a></td><td><a href="' +
o.tour +
'">' +
o.tourLabel +
"</a></td><td>" +
o.tournumber2 +
"</td><td>" +
o.stagenumber2 +
'</td><td><a href="' +
o.winner +
'">' +
o.winnerLabel +
'</a></td><td><a href="' +
o.country +
'">' +
o.countryLabel +
"</a></td></tr>"
)
.join("\n")}
</tbody></table></div>`
<style>
.tourdefrance {
height: 300px;
overflow: scroll;
}
</style>
query = `SELECT ?tour ?tourLabel ?startdate ?tournumber ?item ?itemLabel ?stagenumber ?winner ?winnerLabel ?country ?countryLabel ?flag WHERE {
?tour wdt:P31 wd:Q33881;
rdfs:label ?tourLabel.
FILTER((LANG(?tourLabel)) = "en")
?item wdt:P361 ?tour;
rdfs:label ?itemLabel.
FILTER((LANG(?itemLabel)) = "en")
?tour wdt:P580 ?startdate;
wdt:P393 ?tournumber.
?item wdt:P1545 ?stagenumber;
p:P1346 ?statement.
?statement ps:P1346 ?winner;
pq:P642 wd:Q20882747.
?winner rdfs:label ?winnerLabel.
FILTER((LANG(?winnerLabel)) = "en")
?winner wdt:P27 ?country.
?country rdfs:label ?countryLabel;
wdt:P41 ?flag.
FILTER((LANG(?countryLabel)) = "en")
}
LIMIT 100
`
data = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(query)}`, {headers: {accept: "application/sparql-results+json"}}).then(response => response.json())
df = aq
.from(
data.results.bindings.map((d) => ({
item: d.item.value,
itemLabel: d.itemLabel.value,
tour: d.tour.value,
tourLabel: d.tourLabel.value,
country: d.country.value,
countryLabel: d.countryLabel.value,
tournumber: parseInt(d.tournumber.value),
stagenumber: parseInt(d.stagenumber.value),
startdate: d.startdate.value,
winnerLabel: d.winnerLabel.value,
flag: d.flag.value
}))
)
.derive({
tournumber2: (d) => op.parse_int(d.tournumber),
stagenumber2: (d) => d.stagenumber,
year: (d) => op.year(d.startdate)
})
.dedupe([
"itemLabel",
"tourLabel",
"winnerLabel",
"countryLabel",
"tournumber",
"stagenumber"
])
.orderby({
tournumber2: aq.desc((d) => d.tournumber2),
stagenumber2: aq.desc((d) => d.stagenumber2)
})
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.
