I build applications to Find, Edit, and Generate geography @ExpediaInc
Published
Edited
Apr 21, 2019
2 forks
2 stars
md`# Dymaxion Projection`
AIROCEAN = map(projection)
map = (projection) => {
const height = width/2
const context = DOM.context2d(width, height);
var path = d3.geoPath(projection, context);
var angle = projection.angle();
projection.fitExtent([[2,2],[width-2, height-2]], {type:"Sphere"});
context.clearRect(0,0,width, width/2);
// draw land masses
countries.features.forEach((c, i) => {
context.beginPath();
path(c);
context.fillStyle = colors[i % colors.length];
context.fill();
context.strokeStyle = "#FFF",
context.stroke();
});
// draw border
context.beginPath(),
path({type: "Sphere"});
context.lineWidth = 0.5;
context.setLineDash([3,4]);
context.strokeStyle = "#888";
context.stroke();
// draw folds
var rotate = projection.rotate();
projection.rotate([0,0,0]);
// run the tree of faces to get all sites and folds
var sites = [], folds = [], i = 0;
function recurse(face) {
var site = d3.geoCentroid({type:"MultiPoint", coordinates:face.face});
site.id = face.id || i++;
sites.push(site);
if (face.children) {
face.children.forEach(function(child) {
folds.push({
type:"LineString",
coordinates: child.shared.map(
e => d3.geoInterpolate(e, face.centroid)(1e-5)
)
});
recurse(child);
});
}
}
recurse(projection.tree());
// folding lines
folds.forEach(fold => {
context.beginPath();
context.lineWidth = 0.5;
context.setLineDash([3,4]);
context.strokeStyle = "#888";
path(fold);
context.stroke();
context.setLineDash([]);
});
// restore the projection’s rotate
projection.rotate(rotate);
projection.angle(angle);
return context.canvas;
};
colors = ['#e0f3db','#ccebc5','#a8ddb5','#7bccc4','#4eb3d3','#2b8cbe','#0868ac','#084081']
countries = d3.json(
"https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json"
)
projection = d3.geoAirocean()
md`## Imports`
d3 = require("d3-fetch", "d3-geo", "d3-geo-polygon")
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.
