Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Country elevationVoronoi Stippling on Elevation (DEM)Fill a country shape with symbolsDownload the shape of a countryRoads network in three.js3D base mapGeographic map texture in Three.jsCanvas map around a pointFind a destination point along a rhumbWhen Mercator leaves Null IslandInput: Draw an arrow on a mapMap size and areaCountries by Area of the SVG ElementStudy on pesticides in BrazilStudy on pesticides in BrazilTutorial: show a map of BoliviaMap Rubik Cube
Rotate Mercator to reduce deformation
{
const context = DOM.context2d(width, height);
const width1 = width * 0.8;
const width2 = width - width1;
const projection1 = d3.geoMercator();
const projection2 = d3.geoOrthographic();
const legendMargin = 30;
context.font = `${legendMargin / 2}px serif`;
context.textAlign = 'center';
context.textBaseline = 'middle';
projection1.fitExtent(
[[10, 10], [width1 - 10, height - 10 - legendMargin]],
sphere
);
projection2.fitExtent([[width1 + 10, 10], [width - 10, width2 - 10]], sphere);
const path1 = d3.geoPath(projection1, context);
const path2 = d3.geoPath(projection2, context);
function renderOnePath(country, arc, path) {
context.beginPath(),
path(land),
(context.fillStyle = "#ccc"),
context.fill();
context.beginPath(),
path(country),
(context.fillStyle = "#f00"),
context.fill();
context.beginPath(),
path(borders),
(context.strokeStyle = "#fff"),
(context.lineWidth = 0.5),
context.stroke();
context.beginPath(),
path(sphere),
(context.strokeStyle = "#000"),
(context.lineWidth = 1.5),
context.stroke();
context.beginPath(), path(arc), context.stroke();
}
function render(country, arc) {
context.clearRect(0, 0, width, height);
renderOnePath(country, arc, path1);
renderOnePath(country, arc, path2);
context.save();
context.fillStyle = 'black';
context.fillText(
'Mercator projection',
width1 / 2,
height - legendMargin / 2
);
context.restore();
return context.canvas;
}
let p1,
p2 = [0, 0],
r1,
r2 = [0, 0, 0];
for (const country of countries) {
mutable name = country.properties.name;
yield render(country);
(p1 = p2), (p2 = d3.geoCentroid(country));
(r1 = r2), (r2 = [-p2[0], tilt - p2[1], 0]);
const ip = d3.geoInterpolate(p1, p2);
const iv = Versor.interpolateAngles(r1, r2);
await d3
.transition()
.duration(1250)
.tween("render", () => t => {
projection1.rotate(iv(t));
projection2.rotate(iv(t));
render(country, { type: "LineString", coordinates: [p1, ip(t)] });
})
.transition()
.tween("render", () => t => {
render(country, { type: "LineString", coordinates: [ip(t), p2] });
})
.end();
}
}
class Versor {
static fromAngles([l, p, g]) {
l *= Math.PI / 360;
p *= Math.PI / 360;
g *= Math.PI / 360;
const sl = Math.sin(l), cl = Math.cos(l);
const sp = Math.sin(p), cp = Math.cos(p);
const sg = Math.sin(g), cg = Math.cos(g);
return [
cl * cp * cg + sl * sp * sg,
sl * cp * cg - cl * sp * sg,
cl * sp * cg + sl * cp * sg,
cl * cp * sg - sl * sp * cg
];
}
static toAngles([a, b, c, d]) {
return [
Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI,
Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI,
Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI
];
}
static interpolateAngles(a, b) {
const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b));
return t => Versor.toAngles(i(t));
}
static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) {
a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1;
const x = new Array(4);
return t => {
const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t);
x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l;
return x;
};
}
static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) {
let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2;
if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot;
if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]);
const theta0 = Math.acos(Math.max(-1, Math.min(1, dot)));
const x = new Array(4);
const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot);
a2 /= l, b2 /= l, c2 /= l, d2 /= l;
return t => {
const theta = theta0 * t;
const s = Math.sin(theta);
const c = Math.cos(theta);
x[0] = a1 * c + a2 * s;
x[1] = b1 * c + b2 * s;
x[2] = c1 * c + c2 * s;
x[3] = d1 * c + d2 * s;
return x;
};
}
}
mutable name = ""
height = Math.min(width, 720)
tilt = 20
sphere = ({type: "Sphere"})
countries = topojson.feature(world, world.objects.countries).features
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
land = topojson.feature(world, world.objects.land)
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
