data = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(sparql)}`, {headers: {accept: "application/sparql-results+json"}}).then(response => response.json())
function parsePoint(value) {
const [, longitude, latitude] = /^Point\((-?\d+(?:\.\d+))\s+(-?\d+(?:\.\d+))\)$/.exec(value);
return [+longitude, +latitude];
}
feature = ({
type: "MultiPoint",
coordinates: data.results.bindings
.filter(b => b.geo.datatype === "http://www.opengis.net/ont/geosparql#wktLiteral")
.map(b => parsePoint(b.geo.value))
})
function map(feature) {
const outline = ({type: "Sphere"});
const projection = d3.geoNaturalEarth1();
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const height = Math.ceil(y1 - y0);
const l = Math.min(Math.ceil(x1 - x0), height);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context).pointRadius(1.5);
context.save();
context.beginPath(), path(outline), context.clip(), context.fillStyle = "#fff", context.fillRect(0, 0, width, height);
context.beginPath(), path(graticule), context.strokeStyle = "#eee", context.stroke();
context.beginPath(), path(land), context.fillStyle = "#ccc", context.fill();
context.beginPath(), path(feature), context.fillStyle = "#000", context.fill();
context.restore();
context.beginPath(), path(outline), context.strokeStyle = "#000", context.stroke();
return context.canvas;
}
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@1")
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.
