29:null 2a:["$","title",null,{"children":"Natural Earth Atlas | Irene de la Torre | Observable"}] 2f:T54a,viewof rotate = { const form = html``; form.value = [-40, -30, 0]; form.oninput = select_projection === "geoSatellite" ? () => { form.longitude.value = `${(form.value[0] = form.a.valueAsNumber).toFixed(2)}°`; form.latitude.value = `${(form.value[1] = form.b.valueAsNumber).toFixed(2)}°`; form.oc.value = `${(form.value[2] = form.c.valueAsNumber).toFixed( 2 )}°`; } : () => { form.longitude.value = `${(form.value[0] = form.a.valueAsNumber).toFixed(2)}°`; form.latitude.value = `${(form.value[1] = form.b.valueAsNumber).toFixed(2)}°`; }; form.oninput(); return form; }30:T450,viewof camera = { const form = html` `; const form_simple = html`

Modify elements below to change the scale

`; form_simple.value = { tilt: 0, distance: 0 }; form.value = { tilt: 0, distance: 2 }; form.oninput = () => { const tilt = (form.value.tilt = form.tilt.valueAsNumber); const distance = (form.value.distance = Math.pow( 2, form.distance.valueAsNumber )); form.oTilt.value = `${tilt.toFixed(2)}°`; form.oDistance.value = distance.toFixed(2); }; form.oninput(); return select_projection === "geoSatellite" ? form : form_simple; }31:T122d,map = { control_functions.checkProjection( rotate, scale, select_projection, myProjection ); const svg = d3 .create("svg") .attr("width", sizes.width) .attr("height", sizes.height) .style("background-color", colours.background); // for clipping the map const defs = svg.append("defs"); defs .append("path") .datum({ type: "Sphere" }) .attr("id", "sphere") .attr("d", geoPath); defs .append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#sphere"); const plot = svg .append("g") .attr("clip-path", "url(#clip)") .attr("id", select_projection); const plotGraticule = plot.append("g").attr("id", "graticule"); const plotCoastline = plot.append("g").attr("id", "coastlines"); const plotWorld = plot.append("g").attr("id", "world_map"); const plotBorders = plot.append("g").attr("id", "borders"); const plotDisputedPoly = plot.append("g").attr("id", "disputed_poly"); const plotDisputed = plot.append("g").attr("id", "disputed"); const plotUSStates = plot.append("g").attr("id", "us_states"); const plotOutline = svg.append("g").attr("id", "outline"); // outline plotOutline .append("path") .datum(base_shapefiles.outline) .attr("d", geoPath) .attr("fill", "none") .attr("stroke-width", 1) .attr("stroke", "#222"); const drawCountries = control_functions.checkPolygons(); const oneCountryPlot = plotWorld .selectAll(".country") .data(drawCountries) //geometry for the countries .join("g") .attr("class", "country") .attr("id", (d) => d[0]); // land oneCountryPlot .selectAll("path") .data((d) => d[1]) .join("path") .attr("d", geoPath) .style("stroke", "none") .style("fill", colours.land); if (select_projection !== "geoAlbersUsa") { // graticule plotGraticule .append("path") .datum(base_shapefiles.graticule) .attr("d", geoPath) .attr("stroke", colours.graticule) .attr("stroke-width", 0.5) .attr("fill", "none"); // coastline plotCoastline .selectAll(".coastline") .data(base_shapefiles.coastline.features) //geometry for the coast .join("path") .attr("class", "coastline") .attr("d", (d) => geoPath(d.geometry)) .attr("id", (d) => d.properties.name) .style("fill", "none") .style("stroke", colours.borders) .style("stroke-linejoin", "round") .style("stroke-width", 1); // borders plotBorders .selectAll(".border") .attr("class", "border") .data(base_shapefiles.borders.features) //geometry for the lines .enter() .append("path") .attr("d", (d) => geoPath(d.geometry)) .attr("id", (d) => d.properties.name) .style("fill", "none") .style("stroke", colours.borders) .style("stroke-linejoin", "round") .style("stroke-width", 0.75); // disputed land polygons plotDisputedPoly .selectAll("path") .data(base_shapefiles.disputed_polygons.features) .join("path") .attr("d", geoPath) .style("stroke", "none") .style("fill", colours.borders); // disputed lines LAND plotDisputed .append("g") .attr("id", "disputed_white") .selectAll(".land_lines") .data(base_shapefiles.disputed_borders.features) //geometry for the lines .join("path") .attr("class", "land_lines") .attr("d", (d) => geoPath(d.geometry)) .attr("id", (d) => d.properties.name) .style("fill", "none") .style("stroke", colours.land) .style("stroke-linejoin", "round") .style("stroke-width", 1); // disputed lines BLACK plotDisputed .append("g") .attr("id", "disputed_black") .selectAll(".black_lines") .data(base_shapefiles.disputed_borders.features) //geometry for the lines .join("path") .attr("class", "black_lines") .attr("d", (d) => geoPath(d.geometry)) .attr("id", (d) => d.properties.name) .style("fill", "none") .style("stroke", colours.borders) .style("stroke-linejoin", "round") .style("stroke-width", 0.75) .style("stroke-dasharray", 1); } else { // coastline plotCoastline .selectAll(".coastline") .data(drawCountries) //geometry for the coast .join("path") .attr("class", "coastline") .attr("d", (d) => geoPath(d[1][0])) // .attr("id", (d) => d[0]) .style("fill", "none") .style("stroke", colours.borders) .style("stroke-linejoin", "round") .style("stroke-width", 1); } return svg.node(); }32:T69b,control_functions = ({ checkProjection: function ( thisRotation, thisScale, selectedProjection, projection ) { const longitude = thisRotation[0]; const latitude = thisRotation[1]; if (selectedProjection === "geoAlbersUsa") { myProjection.scale(thisScale); } else if (selectedProjection === "geoBerghaus") { myProjection.lobes(5); } else if (selectedProjection === "geoOrthographic") { myProjection.rotate([longitude * -1, latitude * -1]).center([0, 0]); } else if (selectedProjection === "geoSatellite") { myProjection; } else if ( selectedProjection === "geoPolyhedralButterfly" || selectedProjection === "geoPolyhedralCollignon" || selectedProjection === "geoPolyhedralWaterman" ) { myProjection.translate([sizes.width / 2, sizes.height / 2]); } else { myProjection.center([longitude, latitude]); } }, checkPolygons: function () { let polygons = base_shapefiles.countries.features; let groupedCountries = d3 .groups(polygons, (d) => d.properties.NAME) .sort((a, b) => d3.ascending(a, b)); if (select_projection === "geoAlbersUsa") { groupedCountries = groupedCountries.filter( (d) => d[0] === "United States" || d[0] === "United States of America" ); } return groupedCountries; }, createLayerNames: function (name) { if (name === null) return ""; var editedName = name.replace("'", "").replace(",", ""); const pieces = editedName.split(" "); let thisName = pieces[0]; for (var i = 1; i < pieces.length; i++) { thisName = `${thisName}_${pieces[i]}`; } return thisName; } })33:T5fa,control_functions_geo = ({ geoPipeline: function (...transforms) { return (sink) => { for (let i = transforms.length - 1; i >= 0; --i) { sink = transforms[i](sink); } // Patch: make sure .sphere() exists if (!sink.sphere) { sink.sphere = () => {}; } return sink; }; }, geoClipCircle: function (radius) { return (sink) => { const stream = d3.geoClipCircle(radius); return { point: stream.point || (() => {}), lineStart: stream.lineStart || (() => {}), lineEnd: stream.lineEnd || (() => {}), polygonStart: stream.polygonStart || (() => {}), polygonEnd: stream.polygonEnd || (() => {}), sphere: stream.sphere || (() => {}) }; }; }, geoRotatePhi: function (deltaPhi) { const cosDeltaPhi = Math.cos(deltaPhi); const sinDeltaPhi = Math.sin(deltaPhi); const result = (sink) => ({ point(lambda, phi) { const cosPhi = Math.cos(phi); const x = Math.cos(lambda) * cosPhi; const y = Math.sin(lambda) * cosPhi; const z = Math.sin(phi); const k = z * cosDeltaPhi + x * sinDeltaPhi; sink.point( Math.atan2(y, x * cosDeltaPhi - z * sinDeltaPhi), Math.asin(k) ); }, lineStart: () => sink.lineStart(), lineEnd: () => sink.lineEnd(), polygonStart: () => sink.polygonStart(), polygonEnd: () => sink.polygonEnd(), sphere: () => sink.sphere() }); return result; } })34:T413,raw_shapefiles = ({ countries: { 10: await FileAttachment("base-layer_10m-simplified.json").json(), 50: await FileAttachment("base-layer_50m.json").json(), 100: await FileAttachment("base-layer_100m.json").json() }, borders: { 10: await FileAttachment( "base-layer-boundaries_10m-simplified.json" ).json(), 50: await FileAttachment("base-layer-boundaries_50m.json").json() }, disputed_borders: { 10: await FileAttachment("disputed-boundaries_10m-simplified.json").json(), 50: await FileAttachment("disputed-boundaries_50m.json").json() }, disputed_land: { 10: await FileAttachment("disputed-polygons_10m-simplified.json").json(), 50: await FileAttachment("disputed-polygons_50m.json").json() }, lakes: { 10: await FileAttachment("lakes_10m-simplified.json").json(), 50: await FileAttachment("lakes_50m.json").json() }, coastlines: { 10: await FileAttachment("coastline_10m-simplified.json").json(), 50: await FileAttachment("coastline_50m.json").json() } })35:T440,function getShapefiles(detail) { const this_scale = detail ? detail : 10; return { countries: topojson.feature( raw_shapefiles.countries[map_detail], raw_shapefiles.countries[map_detail].objects[`base-layer_${map_detail}m`] ), borders: topojson.feature( raw_shapefiles.borders[map_detail], raw_shapefiles.borders[map_detail].objects[ `base-layer-boundaries_${map_detail}m` ] ), disputed_borders: topojson.feature( raw_shapefiles.disputed_borders[map_detail], raw_shapefiles.disputed_borders[map_detail].objects[ `disputed-boundaries_${map_detail}m` ] ), disputed_polygons: topojson.feature( raw_shapefiles.disputed_land[map_detail], raw_shapefiles.disputed_land[map_detail].objects[ `disputed-polygons_${map_detail}m` ] ), coastline: topojson.feature( raw_shapefiles.coastlines[map_detail], raw_shapefiles.coastlines[map_detail].objects[`coastline_${map_detail}m`] ), graticule: d3.geoGraticule10(), outline: { type: "Sphere" } }; }36:T965,filterOut = ["geoArea", "geoAzimuthalEqualAreaRaw", "geoAzimuthalEqualAreaRaw", "geoAzimuthalEquidistantRaw", "geoBounds", "geoCentroid", "geoCircle", "geoClipCircle", "geoClipExtent", "geoClipRectangle", "geoClipAntimeridian", "geoConicConformalRaw", "geoConicEqualAreaRaw", "geoConicEquidistantRaw", "geoContains", "geoDistance", "geoEqualEarthRaw", "geoEquirectangularRaw", "geoGnomonicRaw", "geoGraticule", "geoGraticule10", "geoIdentity", "geoInterpolate", "geoLength", "geoMercatorRaw", "geoNaturalEarth1Raw", "geoOrthographicRaw", "geoPath","geoProjection","geoProjectionMutator", "geoRotation", "geoStereographicRaw", "geoStream", "geoTransform", "geoTransverseMercatorRaw", "geoNaturalEarthRaw", "geoAiryRaw", "geoAitoffRaw", "geoArmadilloRaw", "geoAugustRaw", "geoBakerRaw", "geoBerghausRaw", "geoBertin1953Raw", "geoBoggsRaw", "geoBonneRaw", "geoBottomleyRaw", "geoBromleyRaw", "geoChamberlin", "geoChamberlinRaw", "geoCollignonRaw", "geoCraigRaw", "geoCrasterRaw", "geoCylindricalEqualAreaRaw", "geoCylindricalStereographicRaw", "geoEckert1Raw", "geoEckert2Raw", "geoEckert3Raw", "geoEckert4Raw", "geoEckert5Raw", "geoEckert6Raw", "geoEisenlohrRaw", "geoFaheyRaw", "geoFoucautRaw", "geoFoucautSinusoidalRaw", "geoGingeryRaw", "geoGinzburg4Raw", "geoGinzburg5Raw", "geoGinzburg6Raw", "geoGinzburg8Raw", "geoGinzburg9Raw", "geoGuyouRaw", "geoGringortenRaw", "geoHammerRaw", "geoHammerRetroazimuthalRaw", "geoHealpixRaw", "geoHillRaw", "geoHomolosineRaw", "geoHufnagelRaw", "geoHyperellipticalRaw", "geoKavrayskiy7Raw", "geoLagrangeRaw", "geoLarriveeRaw", "geoLaskowskiRaw", "geoLittrowRaw", "geoLoximuthalRaw", "geoMillerRaw", "geoModifiedStereographicRaw", "geoMollweideRaw", "geoMtFlatPolarParabolicRaw", "geoMtFlatPolarQuarticRaw", "geoMtFlatPolarSinusoidalRaw", "geoNaturalEarth2Raw", "geoNellHammerRaw", "geoNicolosiRaw", "geoPattersonRaw", "geoPolyconicRaw", "geoRectangularPolyconicRaw", "geoRobinsonRaw", "geoSatelliteRaw", "geoSinuMollweideRaw", "geoSinusoidalRaw", "geoTimesRaw", "geoTwoPointAzimuthalRaw", "geoTwoPointEquidistantRaw", "geoVanDerGrintenRaw", "geoVanDerGrinten2Raw", "geoVanDerGrinten3Raw", "geoVanDerGrinten4Raw", "geoWagnerRaw", "geoWagner4Raw", "geoWagner6Raw", "geoWiechelRaw", "geoWinkel3Raw", "geoModifiedStereographic", "geoPolyhedral", "geoProject", "geoQuantize", "geoStitch", "geoTwoPointAzimuthal", "geoTwoPointEquidistant", "geoInterrupt", "geoQuincuncial"]37:[{"id":"b1aae37c7513861897dba70c7d4e8182382bf7e466591bc7c5ac167f10e57f6f232d48bfff2dc55c9965e138fc5a19c8e208e0a653f3d0ed2a2f365a4447d93f","href":"https://static.observableusercontent.com/files/b1aae37c7513861897dba70c7d4e8182382bf7e466591bc7c5ac167f10e57f6f232d48bfff2dc55c9965e138fc5a19c8e208e0a653f3d0ed2a2f365a4447d93f","name":"base-layer_10m-simplified.json","type":"application/json","lastModified":1754660295845.801,"size":2205101},{"id":"7a6e8289c79f96703b0d52eed03625d69dd9705a9165706407fdd963de492f703fa044111e4e1475187751090b36e48e6dad5b566653ec5417b9ad5cfb92b1a2","href":"https://static.observableusercontent.com/files/7a6e8289c79f96703b0d52eed03625d69dd9705a9165706407fdd963de492f703fa044111e4e1475187751090b36e48e6dad5b566653ec5417b9ad5cfb92b1a2","name":"base-layer-boundaries_10m-simplified.json","type":"application/json","lastModified":1754660390175.709,"size":660289},{"id":"571d81564099f7fdffbe6d8ceb2aae813f4f5c5386b5547f05dee158afb3ac2ec45dee3363faa34b26c4436ac760707b1f231fbc85c1bc002bc17dbe96941379","href":"https://static.observableusercontent.com/files/571d81564099f7fdffbe6d8ceb2aae813f4f5c5386b5547f05dee158afb3ac2ec45dee3363faa34b26c4436ac760707b1f231fbc85c1bc002bc17dbe96941379","name":"coastline_10m-simplified.json","type":"application/json","lastModified":1754660399595.016,"size":2065894},{"id":"4f9d5f6313d482d0e2ead23bc3985b158196d416db79bdf5b9ddb298691f96fdbbe3c47351c8bbbc6b0d35b476d1bb50608cde6cffda40f863c2b04cea313e79","href":"https://static.observableusercontent.com/files/4f9d5f6313d482d0e2ead23bc3985b158196d416db79bdf5b9ddb298691f96fdbbe3c47351c8bbbc6b0d35b476d1bb50608cde6cffda40f863c2b04cea313e79","name":"disputed-boundaries_10m-simplified.json","type":"application/json","lastModified":1754660409352.07,"size":34614},{"id":"97dec4c8b335f285f3b2ab7d59704836acbe8273f6e94103e8920fd62ccbdf32741666c3265e35ced317b311b17ea8b5ead74689277bc619940b36128795b05a","href":"https://static.observableusercontent.com/files/97dec4c8b335f285f3b2ab7d59704836acbe8273f6e94103e8920fd62ccbdf32741666c3265e35ced317b311b17ea8b5ead74689277bc619940b36128795b05a","name":"lakes_10m-simplified.json","type":"application/json","lastModified":1754660744466.851,"size":898067},{"id":"4444151d2a365bec8299da93ca18621f4ea468a29f23d774c34644f91699fa07aac6acf85aad185d069a043850633b159ba511453743570986a09b45e55296ac","href":"https://static.observableusercontent.com/files/4444151d2a365bec8299da93ca18621f4ea468a29f23d774c34644f91699fa07aac6acf85aad185d069a043850633b159ba511453743570986a09b45e55296ac","name":"base-layer_50m.json","type":"application/json","lastModified":1754660874516.663,"size":816091},{"id":"49318586c681c38708d630b1e53670838963836583a436e969ddf47803650829c02c80f10bd43e6764d56abb0320bbd2a7a56329fb46d940609401e449d6564c","href":"https://static.observableusercontent.com/files/49318586c681c38708d630b1e53670838963836583a436e969ddf47803650829c02c80f10bd43e6764d56abb0320bbd2a7a56329fb46d940609401e449d6564c","name":"base-layer_100m.json","type":"application/json","lastModified":1754660884735.847,"size":132022},{"id":"f6286aeafd0df3e9214316f04deefaa4fdf79c02d8c68551a28340ff90a6a76bbdac3c01e64230bb6de3bb10da09c73d490fb873438bd4be36e786e79f70d43e","href":"https://static.observableusercontent.com/files/f6286aeafd0df3e9214316f04deefaa4fdf79c02d8c68551a28340ff90a6a76bbdac3c01e64230bb6de3bb10da09c73d490fb873438bd4be36e786e79f70d43e","name":"disputed-polygons_50m.json","type":"application/json","lastModified":1754662138404.659,"size":21337},{"id":"29ed00a22ba61feb333ec26a7ae8ff6701ef2bc364644cd21e2a188c8dd377616f204d37688856028a074a440cfcefe3a014ec781b57d8da5834831bf3d2bb52","href":"https://static.observableusercontent.com/files/29ed00a22ba61feb333ec26a7ae8ff6701ef2bc364644cd21e2a188c8dd377616f204d37688856028a074a440cfcefe3a014ec781b57d8da5834831bf3d2bb52","name":"base-layer-boundaries_50m.json","type":"application/json","lastModified":1754662085726.216,"size":227244},{"id":"b104257faff02156a1aa470c2ddefeabffc9eb878442c46697e2ca0dc6000300ee11d93c7f119b2fdace3469270cf1a7b7224ab5c703788f92efdbcd6ebd742d","href":"https://static.observableusercontent.com/files/b104257faff02156a1aa470c2ddefeabffc9eb878442c46697e2ca0dc6000300ee11d93c7f119b2fdace3469270cf1a7b7224ab5c703788f92efdbcd6ebd742d","name":"disputed-boundaries_50m.json","type":"application/json","lastModified":1754662105059.943,"size":11374},{"id":"77dd4f9811698be5d0168a736b3ad6247d6f342202074d39c44314fab698f6b024efc2125a2f5c02f016f335a3f15d8e51fcab37b5ffde422ef77a36b93fc78c","href":"https://static.observableusercontent.com/files/77dd4f9811698be5d0168a736b3ad6247d6f342202074d39c44314fab698f6b024efc2125a2f5c02f016f335a3f15d8e51fcab37b5ffde422ef77a36b93fc78c","name":"lakes_50m.json","type":"application/json","lastModified":1754662168893.309,"size":236549},{"id":"9f3dca7975b5b18aaa4c72f4e0255091589324e8f5943f72b049156716371f84c14ce0c9529acdfcf54ac4ab510b0ab1586ef17573f3fb3a08ed5b3dbc876bd9","href":"https://static.observableusercontent.com/files/9f3dca7975b5b18aaa4c72f4e0255091589324e8f5943f72b049156716371f84c14ce0c9529acdfcf54ac4ab510b0ab1586ef17573f3fb3a08ed5b3dbc876bd9","name":"coastline_50m.json","type":"application/json","lastModified":1754662199943.579,"size":678022},{"id":"8cb6689adf6ec384681f23ded733bf33664d3dbfa54932ffe2560d8b12d2edab8837c6df7d0a298f878f8d155233f7cd63c2fbe6708c3ba38ca6141fb5261d92","href":"https://static.observableusercontent.com/files/8cb6689adf6ec384681f23ded733bf33664d3dbfa54932ffe2560d8b12d2edab8837c6df7d0a298f878f8d155233f7cd63c2fbe6708c3ba38ca6141fb5261d92","name":"disputed-polygons_10m-simplified.json","type":"application/json","lastModified":1754660743699.927,"size":74883}] 2d:{"id":"93b7b29af25d102b","slug":null,"title":"Natural Earth Atlas","thumbnail":"57d6ce165f3bd7c9f9940b38694b9f53acfb477bab282eca7829cd2a99366b31","access_level":"public","create_time":"$D2025-08-06T11:07:00.958Z","update_time":"$D2026-05-07T14:36:17.629Z","view_time":null,"first_public_time":"$D2025-08-08T14:51:37.476Z","fork":{"id":"1c0d6ffe4f582a38","slug":null,"title":"BBC VJ Atlas maps","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"stars":1,"starred":false,"owner":{"type":"team","id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":"starter_2024"},"version":1564,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null}],"members":[{"type":"team","id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Natural Earth Atlas","cells":[{"id":434,"value":"# Natural Earth Atlas\n### Export maps in SVG & PNG\nSelect your projection and edit the longitude, latitude and scale to create your map. To export it, **hover over the map**, click on the **three dots** that appear on the left side and choose **'Download SVG'**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":528,"value":"#### Map settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1399,"value":"viewof map_detail = Inputs.select([10, 50], {\n label: \"Select level of detail\",\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"viewof select_projection = Inputs.select(projectionNames, {\n label: \"Select projection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"viewof scale = Inputs.range([1, 1000], {\n label: \"Scale:\",\n step: 1,\n value: (sizes.width * 180) / 1180\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"viewof control_width = Inputs.range([355, 1400], {\n label: \"Canvas width\",\n step: 1,\n value: 980\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"### Notes\n#### Outline\nSome projections distort the geographical points so much that they appear as rectangles or infinite lines. The polygons have a mask hiding the areas that are not supposed to appear.\n#### Centre\nSome projections (such as Orthographic) allows you to change the centre of the world map. Other's just put your [**longitude**, **latitude**] points in the middle of the SVG.\n- **GeoModifiedStereographicAlaska**. It needs a longitude and latitude of [-149, 69] and a scale of at least 200 to be visible\n- **geoModifiedStereographicGs48 & geoModifiedStereographicGs50**. They need to be centred in the American continents and a scale of at least 200 to be visible\n- **geoModifiedStereographicMiller**. Typically clipped to the geographic extent [[-40°, -40°], [80°, 80°]]. \n- **geoModifiedStereographicLee**. Projection of the Pacific Ocean, it should be centred in [180, 0].\n\nTo know more (and have some laughs) check this link","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md`## Plotting the SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"sizes = ({ width: control_width, height: Math.round((control_width * 9) / 16) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":783,"value":"colours = ({\n borders: \"#E6D9CE\",\n land: \"#FFF9F5\",\n graticule: \"#F2E5DA\",\n background: \"#FFF1E5\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`### Map scales, projections and functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1124,"value":"myProjection = createProjection(\n select_projection,\n sizes,\n scale,\n camera,\n rotate,\n preclip\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1312,"value":"geoPath = d3.geoPath().projection(myProjection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1114,"value":"function createProjection(\n name,\n thisSizes,\n thisScale,\n thisCamera,\n thisRotation,\n clip\n) {\n let projection;\n\n if (name === \"geoSatellite\") {\n const phi = Math.acos(1 / thisCamera.distance);\n const size =\n ((thisCamera.distance - 1) / (thisCamera.distance - Math.cos(phi))) *\n Math.sin(phi);\n const scaleRange = d3.scaleLinear().domain([1, 1000]).range([-6, 3]);\n const smallerScale = scaleRange(thisScale);\n const scale =\n ((Math.pow(2, smallerScale) / size) * (thisSizes.width - 2)) / Math.SQRT2;\n\n projection = projections\n .geoSatellite()\n .scale(scale.toFixed(0))\n .translate([thisSizes.width / 2, thisSizes.height / 2])\n .rotate(thisRotation)\n .tilt(thisCamera.tilt)\n .distance(thisCamera.distance)\n .preclip(preclip)\n .precision(0.1);\n } else {\n projection = projections[`${name}`]()\n .scale(thisScale)\n .translate([thisSizes.width / 2, thisSizes.height / 2]);\n }\n\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"Control defaults of projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":880,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":929,"value":"preclip = (function () {\n const distance = camera.distance;\n const tilt = (camera.tilt * Math.PI) / 180;\n\n const alpha = Math.acos(distance * Math.cos(tilt) * 0.999);\n const clipDistance = d3.geoClipCircle(Math.acos(1 / distance) - 1e-6);\n\n const clip = alpha\n ? control_functions_geo.geoPipeline(\n clipDistance,\n control_functions_geo.geoRotatePhi(Math.PI + tilt),\n control_functions_geo.geoClipCircle(Math.PI - alpha),\n control_functions_geo.geoRotatePhi(-Math.PI - tilt)\n )\n : clipDistance;\n\n console.log(clipDistance);\n\n return clip;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"### Natural Earth Shapefiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":708,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1424,"value":"base_shapefiles = getShapefiles()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### JavaScript libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"projections = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"Import topojson library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"### Prepare the names of the projections for the dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":385,"value":"md`Get the projections names and filter those that we won't use`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"projectionNames = getProjections();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"order = [\"geoRobinson\", \"geoMercator\", \"geoAlbers\", \"geoAlbersUsa\", 'geoOrthographic', 'geoNaturalEarth', '----'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"function getProjections() {\n const thisProjections = [];\n \n const usableProjections = Object.keys(projections).filter(d => {\n let match = false;\n\n for (var i = 0; i < filterOut.length; i++) {\n if (filterOut[i] === d) match = true;\n }\n \n for (var i = 0; i < order.length; i++) {\n if (order[i] === d) match = true;\n }\n return match === false;\n });\n \n order.forEach(d => thisProjections.push(d));\n usableProjections.forEach(d => thisProjections.push(d));\n \n return thisProjections\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2e:"$2d:body"