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
license: mit |
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> |