An attempt to isolate odd behavior, where detail gets lost in buildings.
There’s more details for the buildings than is coming through here.
Why could this be?
forked from curran‘s block: Orthographic Zoom II
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
</head>
<body style="margin: 0px">
<svg width="960" height="500"></svg>
<script>
const svg = d3.select('svg');
const path = svg.append('path')
.attr('fill', 'black')
.attr('fill-opacity', 0.2)
.attr('stroke', 'black');
const projection = d3.geoOrthographic()
.rotate([71.09258526626792, -42.35885054083259, 0])
.scale(2430625.179);
const initialScale = projection.scale();
const geoPath = d3.geoPath().projection(projection);
d3.json('MIT-Buildings.topo.json', (error, world) => {
console.log(world.objects.buildings)
const land = topojson.feature(world, world.objects.buildings);
const render = () => path.attr('d', geoPath(land));
render();
let rotate0, coords0;
const coords = () => projection.rotate(rotate0)
.invert([d3.event.x, d3.event.y]);
svg
.call(d3.drag()
.on('start', () => {
rotate0 = projection.rotate();
coords0 = coords();
})
.on('drag', () => {
const coords1 = coords();
projection.rotate([
rotate0[0] + coords1[0] - coords0[0],
rotate0[1] + coords1[1] - coords0[1],
])
render();
console.log(projection.rotate())
console.log(projection.scale())
})
// Goal: let zoom handle pinch gestures (not working correctly).
.filter(() => !(d3.event.touches && d3.event.touches.length === 2))
)
.call(d3.zoom()
.on('zoom', () => {
projection.scale(initialScale * d3.event.transform.k);
render();
})
)
});
</script>
</body>