In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Oct 17, 2021
map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.lineJoin = "round";
context.lineCap = "round";
context.fillStyle = "#fff";
context.fillRect(0, 0, width, height);
context.beginPath();
path(sphere);
path(land);
context.lineWidth = 0.5;
context.stroke();
context.clip("evenodd");
context.save();
context.beginPath();
path(land);
context.filter = "blur(12px)";
context.fillStyle = "#aaa";
context.fill("evenodd");
context.restore();
context.beginPath();
path(graticule);
context.globalAlpha = 0.2;
context.strokeStyle = "#000";
context.stroke();
return context.canvas;
}
projection = d3.geoMercator()
.translate([width/2,height/2])
.scale(3000)
.rotate([-176,43]); // nz center
// world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json") // this map goes inversed
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json")
// world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")
land = topojson.feature(world, world.objects.countries.geometries[93] ) // just new zealand
// land = topojson.feature(world, world.objects.countries)
graticule = d3.geoGraticule10()
sphere = ({type: "Sphere"})
height = 1000
d3 = require('d3')
topojson = require("topojson-client")
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.
