Built with blockbuilder.org
forked from loganwilliams's block: projection debugging
xxxxxxxxxx
<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>
https://d3js.org/d3.v5.min.js