2e:null 2f:["$","title",null,{"children":"\"Magnifying-Glass\" projections fork for SVG | Ingrid Burrington | Observable"}] 34:T585,md`--- The *“Magnifying-Glass” Azimuthal Map Projections* presented here can be used like any other [d3 projection](https://github.com/d3/d3-geo#projections) and have three additional parameters: *projection*.**innerRadius**([inner]) If *inner* is specified, sets the inner radius of the projection to the specified angle in degrees and returns this projection. Values outside the domain [0°, 90°] are clamped. If *inner* is not specified, returns the current inner radius, which defaults to 30°. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. *projection*.**outerRadius**([outer]) If *outer* is specified, sets the outer radius of the projection to the specified angle in degrees and returns this projection. Values outside the domain [0°, 180°] are clamped. If *outer* is not specified, returns the current outer radius, which defaults to 120°. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. *projection*.**ratio**([ratio]) If *ratio* is specified, sets ratio of radii of inner to outer circles to the specified number and returns this projection. Values outside the domain [0, 1] are clamped. If *ratio* is not specified, returns the current ratio, which defaults to 0.5. `35:T465,function magnifiedAzimuthalMutator(raw) { const rad = Math.PI / 180, deg = 180 / Math.PI, epsilon = 1e-4; let b1 = 30 * rad, b2 = 120 * rad, n = 0.5; const mutate = d3.geoProjectionMutator(raw); const projection = mutate(b1, b2, n); projection.innerRadius = function(inner) { if (!arguments.length) return b1 * deg; b1 = Math.max(epsilon, Math.min(90 - epsilon, inner)) * rad; if (b1 > b2) { let tmp = b1; b1 = b2, b2 = tmp; } if (b1 === b2) b2 += epsilon; mutate(b1, b2, n); return projection.clipAngle(b2 * deg); } projection.outerRadius = function(outer) { if (!arguments.length) return b1 * deg; b2 = Math.max(epsilon, Math.min(180 - epsilon, outer)) * rad; if (b1 > b2) { let tmp = b1; b1 = b2, b2 = tmp; } if (b1 === b2) b2 += epsilon; mutate(b1, b2, n); return projection.clipAngle(b2 * deg); } projection.ratio = function(ratio) { if (!arguments.length) return ratio; n = Math.max(0, Math.min(1, ratio)); mutate(b1, b2, n); return projection; } return projection.clipAngle(b2 * deg); }36:[] 32:{"id":"32f92b6823aba792","slug":"magnifying-glass-projections-fork-for-svg","title":"\"Magnifying-Glass\" projections fork for SVG","thumbnail":"7b5c78f5d0656ea5983ccc702edcf59f89dd06f721dd7242d4170c260bd9cfa9","access_level":"public","create_time":"$D2022-08-29T17:21:18.414Z","update_time":"$D2022-10-12T00:47:30.058Z","view_time":null,"first_public_time":"$D2022-08-30T20:10:16.091Z","has_unpublished_edits":null,"fork":{"id":"1ac336aea936b8ef","slug":"magnifying-glass-projections","title":"\"Magnifying-Glass\" projections","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":2138,"publish_version":2138,"role":null,"authored":false,"authors":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null}],"members":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"\"Magnifying-Glass\" projections fork for SVG","cells":[{"id":0,"value":"md`# \"Magnifying-Glass\" projections fork for SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2134,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2066,"value":"svgmap = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"viewof projection = {\n const form = html``;\n form.oninput = () => form.value = form.projection.value;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"viewof inner = slider({\n min: 0, \n max: Math.min(90, outer / 2), \n step: 0.01,\n value: this ? this.value : outer / 3,\n description: \"Inner radius of projection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"viewof outer = slider({\n min: 0, \n max: 180, \n step: 0.01,\n value: 120,\n description: \"Outer radius of projection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"viewof ratio = slider({\n min: 0, \n max: 1, \n step: 0.01,\n value: 0.75,\n format: \".2\",\n description: \"Ratio between inner and outer radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"viewof rotation = {\n const form = html``;\n form.oninput = () => form.value = [+form.lambda.value, +form.phi.value];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2064,"value":"path = d3.geoPath(magnifiedAzimuthal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2097,"value":"# Change the center focus of the map\n- Find lat/lon coordinates of location you want to use\n- in `centerpoint` cell below, add your coordinates *inverted* into the 0th and 1st position of the array (so `120.61108655801085, 23.685162485477473` becomes `-120.61108655801085, -23.685162485477473`)\n- the 2nd position rotates the globe; probably easiest to leave at 0 but feel free to mess around with it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2093,"value":"centerpoint = [-120.61108655801085, -23.685162485477473, 0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"md`\"*Magnifying-Glass\" Tapered Azimuthal Equidistant* projection centered at 50° N., 15° E., with the inner circle at 25° radius, the outer circle at 150° radius, and ratio set at 0.6.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"magnifiedAzimuthalEquidistant = function () {\n return magnifiedAzimuthalMutator(magnifiedAzimuthalEquidistantRaw);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"magnifiedAzimuthalEqualArea = function () {\n return magnifiedAzimuthalMutator(magnifiedAzimuthalEqualAreaRaw);\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"function taperedAzimuthalEquidistant() {\n return magnifiedAzimuthalMutator(taperedAzimuthalEquidistantRaw);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"function taperedAzimuthalEqualArea() {\n return magnifiedAzimuthalMutator(taperedAzimuthalEqualAreaRaw);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"function taperedStereographic() {\n return magnifiedAzimuthalMutator(taperedStereographicRaw);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"function taperedGnomic() {\n return magnifiedAzimuthalMutator(taperedGnomicRaw);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"function magnifiedAzimuthalEquidistantRaw(b1, b2, n) {\n \n const g = b1 * (1 - n) / (n * (b2 - b1)),\n q = b1 * (1 - g);\n \n function pSinZ(z) {\n return z <= b1\n ? z / Math.sin(z)\n : (q + g * z) / Math.sin(z);\n }\n \n return magnifiedAzimuthalFactory(pSinZ);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"function magnifiedAzimuthalEqualAreaRaw(b1, b2, n) {\n \n const g = (1 - n * n) * (1 - Math.cos(b1)) / (n * n * (Math.cos(b1) - Math.cos(b2))),\n q = 1 - (1 - g) * Math.cos(b1);\n \n function pSinZ(z) {\n return z <= b1\n ? Math.SQRT2 * Math.sqrt(1 - Math.cos(z)) / Math.sin(z)\n : Math.SQRT2 * Math.sqrt(q - g * Math.cos(z)) / Math.sin(z);\n }\n \n return magnifiedAzimuthalFactory(pSinZ);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"function taperedAzimuthalEquidistantRaw(b1, b2, n) {\n \n const dB = b2 - b1,\n n0 = b1 / b2;\n \n if (n >= 1) n = 1 - 0.0001;\n if (n <= n0) n = n0 + 0.0001;\n \n const g = dB / (b2 - b1 / n);\n \n function pSinZ(z) {\n return z <= b1\n ? z / Math.sin(z)\n : (z - dB * Math.pow((z - b1) / dB, g) / g) / Math.sin(z);\n }\n \n return magnifiedAzimuthalFactory(pSinZ);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"function taperedAzimuthalEqualAreaRaw(b1, b2, n) {\n\n const G = 2 * Math.tan(b1 / 2),\n dB = b2 - b1,\n n0 = G / (G + dB);\n \n if (n >= 1) n = 1 - 0.0001;\n if (n <= n0) n = n0 + 0.0001;\n \n const g = dB / (dB + (1 - 1 / n) * G),\n C = G + dB * (1 - 1 / g),\n R = C * Math.cos(b1 / 2),\n RC = R / C;\n \n function pSinZ(z) {\n return z <= b1\n ? 2 * Math.sin(z / 2) / Math.sin(z)\n : RC * (G + z -b1 - dB * Math.pow((z - b1) / dB, g) / g) / Math.sin(z);\n }\n \n return magnifiedAzimuthalFactory(pSinZ);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"function taperedStereographicRaw(b1, b2, n) {\n const {sin, cos, acos, pow, tan} = Math;\n const G = sin(b1),\n dB = b2 - b1,\n n0 = G / (G + dB);\n \n if (n >= 1) n = 1 - 0.0001;\n if (n <= n0) n = n0 + 0.0001;\n \n const g = dB / (dB + (1 - 1 / n) * G),\n C = G + dB * (1 - 1 / g),\n R = C / (cos(b1 / 2) * cos(b1 / 2)),\n RC = R / C;\n \n function pSinZ(z) {\n return pSinZ = z <= b1\n ? 2 * tan(z / 2) / sin(z)\n : RC * (G + z -b1 - dB * pow((z - b1) / dB, g) / g) / sin(z);\n }\n \n return magnifiedAzimuthalFactory(pSinZ);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"taperedGnomicRaw = (b1, b2, n) => {\n\n const G = Math.sin(b1) * Math.cos(b1),\n dB = b2 - b1,\n n0 = G / (G + dB);\n \n if (n >= 1) n = 1 - 0.0001;\n if (n <= n0) n = n0 + 0.0001;\n \n const g = dB / (dB + (1 - 1 / n) * G),\n C = G + dB * (1 - 1 / g),\n R = C / (Math.cos(b1) * Math.cos(b1)),\n RC = R / C;\n \n function pSinZ(z) {\n return z <= b1\n ? Math.tan(z) / Math.sin(z)\n : RC * (G + z -b1 - dB * Math.pow((z - b1) / dB, g) / g) / Math.sin(z);\n }\n \n return magnifiedAzimuthalFactory(pSinZ);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"function magnifiedAzimuthalFactory(cb) {\n \n let cosPhi, z, cosZ, pSinZ;\n \n return function(lambda, phi) {\n \n cosPhi = Math.cos(phi), cosZ = cosPhi * Math.cos(lambda), z = Math.acos(cosZ);\n \n if (z === 0) return [0, 0];\n if (z === Math.PI) return [Math.cos(lambda), Math.sin(phi)]; // I think\n \n pSinZ = cb(z);\n \n return [\n pSinZ * cosPhi * Math.sin(lambda),\n pSinZ * Math.sin(phi)\n ];\n \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"magnifiedAzimuthal = projections[projection]()\n .innerRadius(inner)\n .outerRadius(outer)\n .ratio(ratio)\n .rotate(centerpoint)\n .translate([width / 2, height / 2])\n .fitExtent(\n [\n [padding, padding],\n [width - padding, height - padding]\n ],\n sphere\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"projections = ({\n magnifiedAzimuthalEquidistant,\n magnifiedAzimuthalEqualArea,\n taperedAzimuthalEquidistant,\n taperedAzimuthalEqualArea,\n taperedStereographic,\n taperedGnomic\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"lens = d3.geoCircle().center(rotation).radius(inner)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = Math.floor(width / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"exampleWidth = Math.min(640, width);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"exampleHeight = Math.floor(exampleWidth / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"graticule = d3.geoGraticule().stepMinor([15, 15]).extentMinor([[-180, -75 - 1e-5], [180, 75 + 1e-5]])()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"world = topojson.feature(topo, topo.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topo = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\").then(\n (response) => response.json()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"import { world10m_wound } from \"@lifewinning/comtrade-commodity-flow-sketches/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"import { toc } from \"@mbostock/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"