viewof qid = Inputs.text({
label: "Choisir un élément Wikidata ",
value: "Q3392",
placeholder: "eg fr, en, de",
submit: true
})
query = `
SELECT ?item ?itemLabel ?coord
WHERE {
?item wdt:P206 wd:${qid};
wdt:P625 ?coord;
rdfs:label ?itemLabel .
FILTER(LANG(?itemLabel) = "fr")
} `
url = `https://query.wikidata.org/sparql?query=${encodeURIComponent(query)}`
data = fetch(url, {
headers: { accept: "application/sparql-results+json" }
}).then((response) => response.json())
array = data.results.bindings.map((d) => ({
item: d.item.value,
itemLabel: d.itemLabel.value,
coord: d.coord?.value
}))
geo = require("geotoolbox@2")
geoarray = geo.coords2geo(array, {
coords: "coord",
reverse: true
})
d3 = require("d3@7", "d3-geo-projection@4")
viz = require("geoviz@0.4.4")
{
// Conteneur SVG
let svg = viz.create({
zoomable: true,
projection: d3.geoMercator()
});
// Fond de carte
svg.tile();
// Basemap
// Cercles
svg.circle({
data: geoarray,
r: 6,
fill: "#365486",
dodge: true,
tip: (d) => `${d.properties.itemLabel}`
});
// Render
return svg.render();
}
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.
