Built with blockbuilder.org
forked from loganwilliams's block: projection debugging
license: mit |
Built with blockbuilder.org
forked from loganwilliams's block: projection debugging
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<canvas width=960 height=500> | |
<script> | |
let width = 960; | |
let height = 500; | |
let context = d3.select("canvas").node().getContext('2d'); | |
let path1 = d3.geoPath(); | |
let path2 = d3.geoPath(); | |
const degrees = 180/Math.PI; | |
let transform = (lng, lat) => { | |
let x = d3.scaleLinear().domain([-180, 180]).range([0, width])(lng); | |
let y = d3.scaleLinear().domain([-90, 90]).range([height, 0])(lat); | |
return {x, y: y + x * 0.2 | |
} | |
}; | |
let projection2 = d3.geoTransform({ | |
point: function(x,y) { | |
const t = transform(x, y); | |
this.stream.point(t.x, t.y); | |
} | |
}); | |
let projection1 = d3.geoProjection((x,y) => { | |
const t = transform(x*degrees, y*degrees); | |
return [t.x, -t.y]; | |
}).scale(1) | |
d3.json("world_countries.json").then(d => { | |
path1.projection(projection1).context(context); | |
context.strokeStyle = "#F00"; | |
context.beginPath(); | |
path1(d) | |
context.stroke(); | |
path2.projection(projection2).context(context); | |
context.strokeStyle = "#00F"; | |
context.beginPath(); | |
path2(d) | |
context.stroke(); | |
}) | |
</script> | |
</body> |