30:[{"id":"f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","href":"https://static.observableusercontent.com/files/f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","name":"land-110m.json","type":"application/json","lastModified":1578608057549.272,"size":55207}] 2e:{"title":"Three-Axis Rotation","cells":[{"id":0,"value":"md`# Three-Axis Rotation\n\n[d3-geo](https://github.com/d3/d3-geo) supports three-axis rotation for geographic projections. This notebook demonstrates rotating lambda (λ), phi (φ) and gamma (γ).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n const context = DOM.context2d(width, height);\n const projection = d3.geoOrthographic().fitExtent([[1, 1], [width - 1, height - 1]], sphere);\n const path = d3.geoPath(projection, context);\n const figure = html`

\n ${context.canvas}\n

Rotating lambda (+λ).

\n`;\n for (let x = 0; true; ++x) {\n projection.rotate([x / 10, 0, 0]);\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(land), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n yield figure;\n await visibility();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"{\n const context = DOM.context2d(width, height);\n const projection = d3.geoOrthographic().fitExtent([[1, 1], [width - 1, height - 1]], sphere);\n const path = d3.geoPath(projection, context);\n const figure = html`

\n ${context.canvas}\n

Rotating phi (+φ).

\n`;\n for (let x = 0; true; ++x) {\n projection.rotate([0, x / 10, 0]);\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(land), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n yield figure;\n await visibility();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"{\n const context = DOM.context2d(width, height);\n const projection = d3.geoOrthographic().fitExtent([[1, 1], [width - 1, height - 1]], sphere);\n const path = d3.geoPath(projection, context);\n const figure = html`

\n ${context.canvas}\n

Rotating gamma (+γ).

\n`;\n for (let x = 0; true; ++x) {\n projection.rotate([0, 0, x / 10]);\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(land), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n yield figure;\n await visibility();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 480","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"land = topojson.feature(await FileAttachment(\"land-110m.json\").json(), \"land\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3-geo@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}