{"id":23159213,"url":"https://github.com/jogemu/d3orthozoom","last_synced_at":"2025-10-19T00:02:52.605Z","repository":{"id":174313999,"uuid":"652063876","full_name":"jogemu/d3orthozoom","owner":"jogemu","description":"Scale and rotate orthographic projection while preserving a cardinal direction","archived":false,"fork":false,"pushed_at":"2023-06-21T09:40:20.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-03-15T07:50:32.049Z","etag":null,"topics":["azimuthal-projection","cardinal-direction","cartography","d3-zoom","d3js","globe","interactive","north-up","orthographic-projection","perspective-projection","rotation","sphere","zoom-to-cursor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jogemu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-11T01:04:22.000Z","updated_at":"2023-07-18T09:30:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"6b808195-669a-41df-9883-8888867b1872","html_url":"https://github.com/jogemu/d3orthozoom","commit_stats":null,"previous_names":["jogemu/d3orthozoom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jogemu%2Fd3orthozoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jogemu%2Fd3orthozoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jogemu%2Fd3orthozoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jogemu%2Fd3orthozoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jogemu","download_url":"https://codeload.github.com/jogemu/d3orthozoom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234844,"owners_count":20905852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azimuthal-projection","cardinal-direction","cartography","d3-zoom","d3js","globe","interactive","north-up","orthographic-projection","perspective-projection","rotation","sphere","zoom-to-cursor"],"created_at":"2024-12-17T22:33:31.010Z","updated_at":"2025-10-19T00:02:52.599Z","avatar_url":"https://github.com/jogemu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3OrthoZoom\n\nAn implementation of `d3.zoom()` for the `d3.geoOrthographic()` projection that zooms to the cursor/pointer. Performing rotations rather than panning minimizes distortions. In other implementations, this approach causes a loss of northing because certain points simply cannot be reached without rotating all axes. At least not without increasing scaling above the user's input. Understanding the minimum scaling was crucial to figure out the right rotation.\n\n```html\n\u003csvg v-scope v-effect=\"d3orthozoom($el, $data)\"\u003e\n  \u003cpath :d=\"d('Sphere')\" fill=\"lightblue\"\u003e\u003c/path\u003e\n  \u003cpath :d=\"d('Graticule')\" stroke=\"black\" fill=\"none\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003cscript src=\"https://unpkg.com/d3orthozoom\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@jogemu/petite-vue\" defer init\u003e\u003c/script\u003e\n```\n\nUse `v-scope` to define or fetch data. Hide with `v-if` or modify with `@click`.\n\n```html\n\u003cdiv v-scope=\"{visible: true, world: geoJSON, point: [0, 0]}\"\u003e\n  \u003csvg v-effect=\"d3orthozoom($el, $data)\"\u003e\n    \u003cpath :d=\"d({type: 'Sphere'})\" fill=\"lightblue\"\u003e\u003c/path\u003e\n    \u003cpath :d=\"d(world)\" fill=\"teal\" v-if=\"visible\"\u003e\u003c/path\u003e\n    \u003cpath :d=\"d({type: 'Graticule', stepMinor: [10, 10], stepMajor: [90, 360]})\" stroke=\"black\" fill=\"none\"\u003e\u003c/path\u003e\n    \u003cpath :d=\"d({type: 'Circle', center: [0, 0], radius: 10})\" fill=\"tomato\"\u003e\u003c/path\u003e\n    \u003cpath :d=\"d(point)\" v-effect=\"drag($el, point)\" fill=\"purple\"\u003e\u003c/path\u003e\n  \u003c/svg\u003e\n  \u003cbutton @click=\"rotate=[0,0,0];scale=1\"\u003eReset Projection\u003c/button\u003e\n  \u003cinput type=\"checkbox\" v-model=\"visible\"\u003e Hide layer\n\u003c/div\u003e\n\n\u003cscript\u003evar geoJSON = fetch('TODO.json').then(o =\u003e o.json()).catch(e =\u003e 'TODO handle error')\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/d3orthozoom\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@jogemu/petite-vue\" defer init\u003e\u003c/script\u003e\n```\n\n## Calculation\n\nAn orthographic projection with a scale of `1`, a translation of `[0, 0]` and rotation of `[0, 0, 0]` is projected onto the **unit circle**. To obtain the **equivalent coordinates** `x` and `y` for all other projections, scale, translation and rotation are inverted. The inverse projection of these coordinates returns the `lon`gitude and `lat`itude that is projected to that point.\n\nIn this calculation, `[lon, lat]` refers to the start position, while `[x, y]` refers to intermediate positions. The objective is to determine the **two-axis rotation** where the projection of `[lon, lat]` equals `[x, y]`. If `[x, y]` equals `[0, 0]` then the rotation is `[-lon, -lat, ]`.\n\nThe North Pole and South Pole are always along the angle determined by the fixed rotation axis. Hence, no two-axis rotation can move the poles to a position `[x, y]` that is not aligned with the rotation axis. More broadly, any point's pole distance (`x`) cannot exceed the cosine of its latitude. Conceptually rotate the nearest pole in the center to see why.\n\nAny movement of `x` perpendicular to the axis reduces possible movement within the unit circle parallel to the axis. Going back to the start (center) has the length of the radius (hypotenuse = 1), which is already everything needed for the Pythagorean theorem.\n\n```\nreachX = max(cosd(lat), epsilon)\nreachY = sqrt(1 - x*x)\n```\n\nThe projection is increased above user input if necessary.\n\n```\nprojection.scale(max(\n  event.transform.k,  // user input\n  sqrt(x*x + y*y),    // to prevent leaving globe\n  abs(x) / reachX     // to prevent pole too far\n))\n```\n\nThe `asind` will go from `[-180, 180]` depending on how close the relative `x` value is to the maximum `x` value (pole too far). Fortunately, this also puts it on a vertical line with the cursor.\n\n```\nr0 = asind(x / reachX) - lon\n```\n\nIn an intermediate step, the latitude of a point is calculated that is on the same height as the pointer and on the centered line that goes south from the North Pole.\n\nA second step calculates the latitude of the pointer and adds or subtracts the previous value based on the hemisphere. Both steps must take into account the limitations imposed by the reach.\n\n```\nlat_ = -90 + asind(cosd(lat) * cosd(lon + r0) / reachY)\nr1 = -asind(y / reachY) + lat_ * sign(lat)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjogemu%2Fd3orthozoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjogemu%2Fd3orthozoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjogemu%2Fd3orthozoom/lists"}