data analyst • mediapart
Published
Edited
May 7, 2021
d3 = require('d3', 'd3-geo')
topojson = require("topojson-client@3")
land = {
const response = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json");
const topology = await response.json();
return topojson.feature(topology, 'land')
}
graticule = d3.geoGraticule10()
sphere = ({type: "Sphere"})
southPole = {
let height = 600
const context = DOM.context2d(width, height);
const projection = d3.geoOrthographic().fitExtent([[1, 1], [width - 1, height - 1]], sphere);
const path = d3.geoPath(projection, context);
const figure = html`
<figure>
${context.canvas}
</figure>
`;
projection.rotate([0, 90, 0]);
projection.scale(500)
let circle = new Path2D()
circle.arc(width/2, height/2, 250, 0, 2 * Math.PI)
context.clip(circle)
context.beginPath()
path(graticule)
context.strokeStyle = "#ddd"
context.stroke()
context.beginPath()
path(land)
context.fillStyle = "rgba(255,255,255, 0.75)"
context.fill()
context.strokeStyle = "#aaa"
context.stroke();
context.beginPath()
path(sphere)
context.stroke()
return figure
}
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.
