2f:Taed,map = { checkProjection(); const svg = d3.create("svg") .attr('width', width_map) .attr('height', height_map); // 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 plotWorld = plot .append('g') .attr('id', 'world_map'); const plotDisputed = plot .append('g') .attr('id', 'disputed'); const plotOutline = svg .append('g') .attr('id', 'outline'); // graticule plotGraticule.append("path") .datum(graticule) .attr("d", geoPath) .attr("stroke", graticule_colour) .attr("fill", "none"); // outline plotOutline.append("path") .datum(outline) .attr("d", geoPath) .attr("fill", "none") .attr('stroke-width', 1) .attr("stroke", "#222") const drawCountries = checkPolygons(); const oneCountryPlot = plotWorld.selectAll('.country') .data(drawCountries) //geometry for the countries .enter() .append('g') .attr('class', 'country') .attr('id', d => createLayerNames(d.key)); oneCountryPlot .selectAll('path') .data(d => d.values) .enter() .append("path") .attr("d", geoPath) .style("stroke", border_colour) .style('fill', land_colour) .style("stroke-width", 0.5) .style('stroke-linejoin', 'round'); // disputed lines WHITE plotDisputed .append('g') .attr('id', 'disputed_white') .selectAll(".white_lines") .data(disputed_lines_white.features) //geometry for the lines .enter() .append("path") .attr("class","white_lines disputed") .attr("d", d => geoPath(d.geometry)) .attr('id', d => createLayerNames(d.properties.english)) .style('fill', 'none') .style('stroke', land_colour) .style('stroke-width', 0.75) .style('stroke-dasharray', 1.5) .style('stroke-linejoin', 'round'); // disputed lines BLACK plotDisputed .append('g') .attr('id', 'disputed_black') .selectAll(".black_lines") .data(disputed_lines_black.features) //geometry for the lines .enter() .append("path") .attr("d", d => geoPath(d.geometry)) .attr('id', d => d.properties.english) .style('fill', 'none') .style('stroke', border_colour) .style('stroke-linejoin', 'round') .style('stroke-width', 0.5) .style('stroke-dasharray', 1.5); return svg.node(); }30:T7b7,html`

Notes

Projections

Our usual projections are Robinson, Mercator or Albers.
If you're doing a world map, please use the Robinson projection by default. Don't use the Mercator projection unless you need to match the SVG with a map from Google. In this case, the borders might not match 100% with your source map. If you need that to happen, use QGIS to do your map and activate Google Mercator as a projection.
If you're doing a map just of North America, please use the Albers projection if you want parts of Canada and Mexico to appear; or AlbersUSA if you want to show just the United States. This projection is the best for representing the area of this country.

Outline

Some 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.

Centre

Some 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.

GeoModifiedStereographicAlaska

It needs a longitude and latitude of [-149, 69] and a scale of at least 200 to be visible

geoModifiedStereographicGs48 & geoModifiedStereographicGs50

It needs to be centred in the American continents and a scale of at least 200 to be visible

geoModifiedStereographicMiller

Typically clipped to the geographic extent [[-40°, -40°], [80°, 80°]]

geoModifiedStereographicLee

Projection of the Pacific Ocean, it should be centred in [180, 0]

To know more (and have some laughs) check this link

`31: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"]32:[{"id":"1835613c204a1ad5c6b725c314405692c0ced8a78bb45c4f98f4d3921fb391c2e4fba7d90793b3a83a2876013def0b722afa407a704d06fbb537f0520ee4147c","href":"https://static.observableusercontent.com/files/1835613c204a1ad5c6b725c314405692c0ced8a78bb45c4f98f4d3921fb391c2e4fba7d90793b3a83a2876013def0b722afa407a704d06fbb537f0520ee4147c","name":"bbc_world_map_high_res.json","type":"application/json","lastModified":1747138163078.931,"size":4653119},{"id":"e61c5973e41d947c8cedc134d0f28aaa84ded6b031267202cd08fa1bfaf0248de93ec5ba42c3a09e9a7e346e9950462789ec2b6a8a05dc8b206e3a5020fb7563","href":"https://static.observableusercontent.com/files/e61c5973e41d947c8cedc134d0f28aaa84ded6b031267202cd08fa1bfaf0248de93ec5ba42c3a09e9a7e346e9950462789ec2b6a8a05dc8b206e3a5020fb7563","name":"disputed_lines_bottom_high_res.json","type":"application/json","lastModified":1747138163078.931,"size":15526},{"id":"a8cba577a001d044693132fc8b44d4f7ac7c8bc9c08163a61efe799c8421e6d1b5202a7ad47bb29743e0607006eb428ab1e99dd02b34a8d839b32e6aa05dbdb7","href":"https://static.observableusercontent.com/files/a8cba577a001d044693132fc8b44d4f7ac7c8bc9c08163a61efe799c8421e6d1b5202a7ad47bb29743e0607006eb428ab1e99dd02b34a8d839b32e6aa05dbdb7","name":"disputed_lines_top_high_res.json","type":"application/json","lastModified":1747138163078.931,"size":35050}] 2d:{"title":"BBC VJ Atlas maps","cells":[{"id":0,"value":"md`# BBC VJ Atlas maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"🔗 Go to latest version here","pinned":false,"hidden":false,"mode":"html"},{"id":417,"value":"md`## Export maps in SVG & PNG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`Select 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":"ojs"},{"id":153,"value":"viewof select_projection = select(projectionNames)","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`**Where do you want your map to be centred?**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"viewof longitude = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof latitude = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"md`**How big should your map be?**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof scale = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Plotting the SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"width_map = 975","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"height_map = width_map / 1.5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"border_colour = '#777777'","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"land_colour = '#bababa'","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"graticule_colour = \"#f2f2f2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`### Map scales, projections and functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"drawProjection = projections[`${select_projection}`]()","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"myProjection = drawProjection\n .scale(scale.scale)\n .translate([width_map / 2, height_map / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"geoPath = d3.geoPath()\n .projection(myProjection); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`Control defaults of projections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"function checkProjection() {\n if (select_projection === \"geoAlbersUsa\") {\n myProjection\n .scale(scale.scale)\n } else if (select_projection === \"geoBerghaus\") {\n myProjection.lobes(5)\n } else if (select_projection === \"geoOrthographic\") {\n myProjection\n .rotate([longitude.longitude * -1, latitude.latitude * -1])\n .center([0, 0]);\n } else if (select_projection === \"geoPolyhedralButterfly\" || select_projection === \"geoPolyhedralCollignon\" || select_projection === \"geoPolyhedralWaterman\") {\n myProjection\n .translate([width_map / 2, height_map / 1.5]);\n } else {\n myProjection\n .center([longitude.longitude, latitude.latitude])\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"function checkPolygons() {\n let polygons = countries.features;\n \n var groupedCountries = d3.nest()\n .key(d => d.properties.english)\n .sortKeys(d3.ascending)\n .entries(polygons);\n\n if (select_projection === \"geoAlbersUsa\") {\n groupedCountries = groupedCountries.filter(d => d.key === 'US');\n }\n\n return groupedCountries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"function createLayerNames(name) {\n \n if (name === null) return '';\n \n var editedName = name.replace(\"'\",'').replace(\",\",'');\n \n const pieces = editedName.split(\" \");\n \n let thisName = pieces[0];\n \n for (var i = 1; i < pieces.length; i++) {\n thisName = `${thisName}_${pieces[i]}`;\n }\n return thisName;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## BBC Shapefiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"world = FileAttachment(\"bbc_world_map_high_res.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"disputed_lines_top_shapefile = FileAttachment(\"disputed_lines_top_high_res.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"disputed_lines_bottom_shapefile = FileAttachment(\"disputed_lines_bottom_high_res.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`Objects for countries and disputed lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"countries = topojson.feature(world, world.objects.world_map_2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"disputed_lines_white = topojson.feature(disputed_lines_top_shapefile, disputed_lines_top_shapefile.objects.disputed_lines_top)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"disputed_lines_black = topojson.feature(disputed_lines_bottom_shapefile, disputed_lines_bottom_shapefile.objects.disputed_lines_bottom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## JavaScript libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`Import D3 projections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projections = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`Import topojson library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`Import other libraries for the notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"md`## Prepare the names of the projections for the dropdown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`Get the projections names and filter those that we won't use`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"projectionNames = getProjections();","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"order = [\"geoRobinson\", \"geoMercator\", \"geoAlbers\", \"geoAlbersUsa\", 'geoOrthographic', 'geoNaturalEarth', '----'];","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}