31:T8e0,md`# "Magnifying-Glass" projections > Ref.: John P. Snyder, “Magnifying-Glass” Azimuthal Map Projections, *The American Cartographer*, 14:1 (1987), 61-68. http://dx.doi.org/10.1559/152304087783875318 In 1987 [John P. Snyder](https://en.wikipedia.org/wiki/John_P._Snyder) introduced six new map projections with a "magnifying-glass" effect. They are implemented here as reusable [d3 projections]([d3 projection](https://github.com/d3/d3-geo#projections): - \`magnifiedAzimuthalEquidistant\` - \`magnifiedAzimuthalEqualArea\` - \`taperedAzimuthalEquidistant\` - \`taperedAzimuthalEqualArea\` - \`taperedStereographic\` - \`taperedGnomic\` On the first two projections, inside a circle bounding the region of interest is a standard [Azimuthal Equidistant](https://en.wikipedia.org/wiki/Azimuthal_equidistant_projection) or [Lambert Azimuthal Equal-Area](https://en.wikipedia.org/wiki/Lambert_azimuthal_equal-area_projection) projection. Between this circle and an outer bounding circle, azimuths remain true and the radial or area scale, respectively, remains constant, with an abrupt change of scale at the boundary. This is different from other projections focusing on a region of interest, but including surrounding areas, like the [Log-Azimuthal projection](https://observablehq.com/@fil/log-azimuthal) with its fisheye effect, that have a constantly varying distance and area scale along any radius. A second group of projections is called *"Magnifying-Glass" Tapered Azimuthal projections*. The region of interest is (besides the already mentioned ones) a standard [stereographic](https://en.wikipedia.org/wiki/Stereographic_projection) or [gnomic](https://en.wikipedia.org/wiki/Gnomonic_projection) projection. The property of constant radial scale (equidistant), constant area scale (equal-area), conformality (stereographic), and straight greatcircle routes (gnomic) is maintained within the inner circle, but it is lost outside this circle. Instead the radial scale beyond the inner circle is gradually reduced to zero at the chosen outer limit, with the effect of a more esthetic transition. At first glance these projections may appear to be Orthographic or another perspective view of the globe, but the inner portion is a true azimuthal projection.`32: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. `33: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); }34:[] 2f:{"title":"\"Magnifying-Glass\" projections","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"chart = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(magnifiedAzimuthal, context);\n \n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(graticule), context.stroke();\n context.beginPath(), path(sphere), context.stroke();\n context.beginPath(), path(lens), context.strokeStyle = \"#000\", context.stroke();\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1303,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md`---\n## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"_magnifiedAzimuthalEquidistant = {\nreturn md`\n#### Magnified Azimuthal Equidistant`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"{\n const context = DOM.context2d(exampleWidth, exampleHeight);\n const path = d3.geoPath(magnifiedEquidistant, context);\n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(graticule), context.stroke();\n context.beginPath(), path(sphere), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"md`\"*Magnifying-Glass\" Azimuthal Equidistant* projection centered at the north pole, with the inner circle at 90° radius, the outer circle at 180° radius, and ratio set at 0.75. Inner *and* outer areas are equidistant.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"magnifiedEquidistant = magnifiedAzimuthalEquidistant()\n .innerRadius(90)\n .outerRadius(180)\n .ratio(0.75)\n .rotate([0, -90, 0])\n .fitExtent([[padding, padding], [exampleWidth - padding, exampleHeight - padding]], sphere)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1430,"value":"_magnifiedAzimuthalEqualArea = {\nreturn md`
\n#### Magnified Azimuthal Equal-Area`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"{\n const context = DOM.context2d(exampleWidth, exampleHeight);\n const path = d3.geoPath(magnifiedEqualArea, context);\n const lens = d3.geoCircle().center([-19, 65]).radius(3.5)();\n const innerGraticule = d3.geoGraticule().step([2.5, 2.5]).precision(.25)();\n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(graticule), context.stroke();\n context.beginPath(), path(lens), context.stroke();\n context.beginPath(), path(sphere), context.stroke();\n context.beginPath(), path(lens), context.clip();\n context.beginPath(), path(innerGraticule), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"md`\"*Magnifying-Glass\" Azimuthal Equal-Area* projection centered at 65° N., 19° W., with the inner circle at 3° radius, the outer circle at 40° radius, and ratio set at 0.2. Inner *and* outer areas are equal-area.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"magnifiedEqualArea = magnifiedAzimuthalEqualArea()\n .innerRadius(3.5)\n .outerRadius(40)\n .ratio(0.2)\n .rotate([19, -65, 0])\n .scale(1600)\n .translate([exampleWidth / 2, exampleHeight / 2])\n .clipExtent([[0, 0], [exampleWidth, exampleHeight]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"_magnifiedTaperedAzimuthalEquidistant = {\n return md`
\n #### Magnified Tapered Azimuthal Equidistant`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"{\n const context = DOM.context2d(exampleWidth, exampleHeight);\n const path = d3.geoPath(taperedEquidistant, context); \n context.beginPath(), path(graticule), context.stroke();\n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1479,"value":"taperedEquidistant = taperedAzimuthalEquidistant()\n .innerRadius(25)\n .outerRadius(150)\n .ratio(0.6)\n .rotate([-15, -50, 0])\n .fitExtent([[0, 0], [exampleWidth, exampleHeight]], sphere)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"md`
\n#### Magnified Tapered Azimuthal Equal-Area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"{\n const context = DOM.context2d(exampleWidth, exampleHeight);\n const path = d3.geoPath(taperedEqualArea, context); \n context.beginPath(), path(d3.geoGraticule().step([2, 2])()), context.stroke();\n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n context.beginPath(), path(d3.geoCircle().center([-80, 22]).radius(6)()), context.stroke()\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"md`\"*Magnifying-Glass\" Tapered Azimuthal Equal-Area* projection centered at 22° N., 80° W., with the inner circle at 6° radius, the outer circle at 30° radius, and ratio set at 0.65.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1831,"value":"taperedEqualArea = taperedAzimuthalEqualArea()\n .innerRadius(6)\n .outerRadius(30)\n .ratio(0.65)\n .rotate([80, -22, 0])\n .fitExtent([[0, 0], [exampleWidth, exampleHeight]], sphere)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"md`
\n#### Magnified Tapered Stereographic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"{\n const context = DOM.context2d(exampleWidth, exampleHeight);\n const path = d3.geoPath(taperedStereo, context); \n context.beginPath(), path(graticule), context.stroke();\n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"md`*\"Magnifying-Glass\" Tapered Stereographic* projection centered at 0° N., 0° E., with the inner circle at 90° radius, the outer circle at 180° radius, and ratio set at 0.4.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"taperedStereo = taperedStereographic()\n .innerRadius(90)\n .outerRadius(180)\n .ratio(0.4)\n .fitExtent([[0, 0], [exampleWidth, exampleHeight]], sphere)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1623,"value":"md`
\n#### Magnified Tapered Gnomic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"{\n const context = DOM.context2d(exampleWidth, exampleHeight);\n const route = { \"type\": \"LineString\", \"coordinates\": [[-122.416667, 37.783333], [139.638056, 35.443611]] };\n const path = d3.geoPath(taperedGnom, context); \n context.beginPath(), path(graticule), context.stroke();\n context.beginPath(), path(world), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n context.setLineDash([5, 10]);\n context.beginPath(), path(route), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1709,"value":"md`\"*Magnifying-Glass\" Gnomic* projection centered at 25° N., 175° E., with the inner circle at 50° radius, the outer circle at 140° radius, and ratio set at 0.75.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"taperedGnom = taperedGnomic()\n .innerRadius(50)\n .outerRadius(140)\n .ratio(0.75)\n .rotate([175, -25])\n .fitExtent([[0, 0], [exampleWidth, exampleHeight]], sphere)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"magnifiedAzimuthalEquidistant = function () {\n return magnifiedAzimuthalMutator(magnifiedAzimuthalEquidistantRaw);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"magnifiedAzimuthalEqualArea = function () {\n return magnifiedAzimuthalMutator(magnifiedAzimuthalEqualAreaRaw);\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"function taperedAzimuthalEquidistant() {\n return magnifiedAzimuthalMutator(taperedAzimuthalEquidistantRaw);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"function taperedAzimuthalEqualArea() {\n return magnifiedAzimuthalMutator(taperedAzimuthalEqualAreaRaw);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1093,"value":"function taperedStereographic() {\n return magnifiedAzimuthalMutator(taperedStereographicRaw);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1106,"value":"function taperedGnomic() {\n return magnifiedAzimuthalMutator(taperedGnomicRaw);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":926,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":891,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"magnifiedAzimuthal = projections[projection]()\n .innerRadius(inner)\n .outerRadius(outer)\n .ratio(ratio)\n .rotate([-rotation[0], -rotation[1]])\n .translate([width / 2, height / 2])\n .fitExtent([[padding, padding], [width - padding, height - padding]], sphere)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"projections = ({\n magnifiedAzimuthalEquidistant,\n magnifiedAzimuthalEqualArea,\n taperedAzimuthalEquidistant,\n taperedAzimuthalEqualArea,\n taperedStereographic,\n taperedGnomic\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"lens = d3.geoCircle().center(rotation).radius(inner)()","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = Math.floor(width / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"exampleWidth = Math.min(640, width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"exampleHeight = Math.floor(exampleWidth / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"graticule = d3.geoGraticule().stepMinor([15, 15]).extentMinor([[-180, -75 - 1e-5], [180, 75 + 1e-5]])()","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"world = topojson.feature(topo, topo.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"topo = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}