Published
Edited
Oct 8, 2020
map = {
const context = DOM.context2d(width, 500);
const path = d3.geoPath(null, context);
context.save();
path.projection(projection);
context.beginPath(),
path(d3.geoGraticule10()),
(context.strokeStyle = "#ccc"),
context.stroke();
context.beginPath(),
path(feature_bad),
(context.fillStyle = "#69f"),
context.fill(),
(context.strokeStyle = "#000"),
context.stroke();
// path.projection(null);
// context.beginPath(),
// path(projected_bad),
// (context.fillStyle = "#ae9"),
// context.fill();
context.restore();
return context.canvas;
}
map2 = {
const context = DOM.context2d(width, 500);
context.fillStyle = "magenta";
context.strokeStyle = "black";
projected_bad.geometry.coordinates.forEach(coordinates => {
let flattened = earcut.flatten(coordinates);
let triangles = earcut(flattened.vertices, flattened.holes, flattened.dimensions);
function indexToPoint(i) { return flattened.vertices.slice(2*i, 2*(i+1)); }
while (triangles.length) {
let t = triangles.splice(0, 3);
context.beginPath();
context.moveTo(...indexToPoint(t[0]));
context.lineTo(...indexToPoint(t[1]));
context.lineTo(...indexToPoint(t[2]));
context.lineTo(...indexToPoint(t[0]));
context.fill();
context.stroke();
}
});
return context.canvas;
}
projected_bad = d3.geoProject(feature_bad, projection)
projection = d3.geoRobinson()
// projection = d3.geoIdentity()
d3 = require("d3-geo", "d3-geo-projection")
earcut = require("earcut")
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.
