2c:null 2d:["$","title",null,{"children":"Map with Contours and Contour Labels | Christophe Yamahata | Observable"}] 32:T419,# Map with Contours and Contour Labels ## Example: Earthʼs Magnetic Field Declination This notebook demonstrates how to create an SVG map featuring **contour** lines and **labels**, using the Earthʼs magnetic field declination as an example. We utilize `d3-contour` to seamlessly project the contours onto various geographic projections. Contour labels are also included for enhanced readability of the map. 🧭 *For more information about **Earthʼs magnetic field declination** and the **IGRF-13** model, explore the companion notebook.* ---33:T1418,map = { const scale = map_width / width; const svg = d3.select(DOM.svg(scale * width, scale * (height+10))) .attr("viewBox", `0 0 ${width} ${height+10}`) .style("border", "1px solid #aaa") .style("background-color", "white"); const path = d3.geoPath().projection(projection); // Add base layers const addBaseLayer = (datum, fill, fillOpacity, stroke, strokeWidth) => { svg.append("path") .datum(datum) .attr("d", path) .attr("fill", fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth || 0) .attr("clip-path", "url(#clip-map)"); }; addBaseLayer({ type: "Sphere" }, "#00d", 0.05); addBaseLayer(land, "#b0b0b0", 0.4, "#99988d", 0.5); addBaseLayer(lakes, "#E5EFEF", 0.8); addBaseLayer(graticule, "none", 1, "#ccc", 0.5); // Add clipping at the bottom svg.append("defs").append("clipPath") .attr("id", "clip-map") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height-30); // Add contours with masks const addContoursWithMask = (dataRange, strokeWidth, strokeColor) => { const g = svg.append("g") .selectAll(".contour") .data(projectedContours(dataRange)) .enter() .append("path") .attr("class", "contour") .attr("d", path) .attr("stroke-width", strokeWidth) .style("stroke", strokeColor) .attr("fill", "none") .attr("clip-path", "url(#clip-map)"); // Create a mask for contours const contourMask = svg.append("defs").append("mask") .attr("id", `contour-mask-${strokeColor}`); // Add mask background contourMask.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "white"); // Append label backgrounds with rounded corners to the mask labels.forEach(({ x, y, text, angle }) => { const projectedPoint = projection([x, y]); const textWidth = text.length * (labelSize * scale * 0.6); const textHeight = labelSize * scale; contourMask.append("rect") .attr("x", projectedPoint[0] - textWidth / 2) .attr("y", projectedPoint[1] - textHeight / 2) .attr("width", textWidth) .attr("height", textHeight) .attr("rx", 10) // Rounded corners (adjust as needed) .attr("ry", 10) // Rounded corners (adjust as needed) .attr("transform", `rotate(${angle}, ${projectedPoint[0]}, ${projectedPoint[1]})`) .attr("fill", "black"); // Mask area for labels }); // Apply the mask to the contours g.attr("mask", `url(#contour-mask-${strokeColor})`); return g; }; // Add contours for declination ranges const declinationRanges = [ { range: d3.range(-180, 0, 2), strokeWidth: 0.25, color: "blue" }, { range: d3.range(-180, 0, 10), strokeWidth: 0.5, color: "blue" }, { range: d3.range(180, 0, -2), strokeWidth: 0.25, color: "red" }, { range: d3.range(180, 0, -10), strokeWidth: 0.5, color: "red" }, { range: [0], strokeWidth: 2, color: "green", dashArray: "8,5" } ]; declinationRanges.forEach(({ range, strokeWidth, color, dashArray }) => { const contour = addContoursWithMask(range, strokeWidth, color); if (dashArray) contour.attr("stroke-dasharray", dashArray); }); // Add the outer stroke for the globe boundary svg.append("path") .datum({ type: "Sphere" }) .attr("d", path) .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-width", 4) .attr("clip-path", "url(#clip-bottom)") // Add text labels labels.forEach(({ x, y, text, angle }) => { const projectedPoint = projection([x, y]); svg.append("text") .attr("x", projectedPoint[0]) .attr("y", projectedPoint[1]) .attr("text-anchor", "middle") .style("dominant-baseline", "middle") .attr("transform", `rotate(${angle}, ${projectedPoint[0]}, ${projectedPoint[1]})`) .style("stroke", "white") .style("stroke-width", `${5*scale}px`) .style("stroke-opacity", labelBackgroundOpacity) .style("paint-order", "stroke") .style("fill", "black") .style("font-size", `${labelSize * scale}px`) .text(text) .attr("clip-path", "url(#clip-map)"); }); // Add a title const title_graph = svg.append("g") title_graph.append("text") .text("IGRF-13: Earthʼs Magnetic Field Declination – Epoch ") .attr('x', width / 2 - 80) .attr("text-anchor", "middle") .attr('y', height - 5) .attr('class', 'map_title') .attr('font-weight', 500); // Append the second part of the text (bold weight) title_graph.append("text") .text(`${selected_year.year}.0`) .attr('x', width / 2 + 150) // Position adjusted based on the text length .attr("text-anchor", "middle") .attr('y', height - 5) .attr('class', 'map_title') .attr('font-weight', 800); return svg.node(); }; 34:T690,--- ## Procedure ### 1. Prepare Raw Data and Projection The data were obtained using the Python package PyIGRF (IGRF-13 model). The resulting CSV files (see ᥫ files pane) contain comma-separated values representing the magnetic declination, starting with the value ${tex`D_{0,0}`}, corresponding to Latitude -90° and Longitude -180°, as shown in the table below. The grid was filled by acquiring data in 1° increments, resulting in a total of **${rawData.gridWidth}** columns × **${rawData.gridHeight}** rows = **${rawData.gridWidth*rawData.gridHeight}** values per CSV file. | ↓ Lat. \\ Long. → | -180° | -179° | ... | +178° | +179° | | :---------------: | :----------------: | :----------------: | :----------------: | :-------------------:| :------------------: | | **-90°** | ${tex`D_{0,0}`} | ${tex`D_{0,1}`} | ... | ${tex`D_{0,358}`} | ${tex`D_{0,359}`} | | **-89°** | ${tex`D_{1,0}`} | ${tex`D_{1,1}`} | ... | ${tex`D_{1,358}`} | ${tex`D_{1,359}`} | | ... | ... | ... | ... | ... | ... | | **88°** | ${tex`D_{178,0}`} | ${tex`D_{178,1}`} | ... | ${tex`D_{178,358}`} | ${tex`D_{178,359}`} | | **89°** | ${tex`D_{179,0}`} | ${tex`D_{179,1}`} | ... | ${tex`D_{179,358}`} | ${tex`D_{179,359}`} |35:T6b9,// Based on https://observablehq.com/@fil/contour-labels-svg function labelsContours(threshold, labelSpacing) { const results = []; const contours = d3.contours().size([rawData.gridWidth, rawData.gridHeight]); const selected_contours = contours.contour(rawData.data, threshold); selected_contours.coordinates.forEach(polygon => polygon.forEach((ring, j) => { const p = ring.slice(1, Infinity), possibilities = d3.range(labelSpacing, labelSpacing * 1.4), scores = possibilities.map(d => -((p.length - 1) % d)), n = possibilities[d3.scan(scores)], start = 1 + (d3.scan(p.map(xy => (j === 0 ? -1 : 1) * xy[1])) % n), margin = 2; p.forEach((xy, i) => { if ( i % n === start && xy[0] > margin && xy[0] < rawData.gridWidth - margin && xy[1] > margin && xy[1] < rawData.gridHeight - margin ) { const a = (i - 2 + p.length) % p.length, b = (i + 2) % p.length; const dx = p[b][0] - p[a][0]; const dy = p[b][1] - p[a][1]; if (dx === 0 && dy === 0) return; let angle = Math.atan2(-dy, dx); angle += Math.cos(angle) < 0 ? Math.PI : 0; angle *= 180/Math.PI, results.push({ text: `${threshold > 0 ? "+" : ""}` + threshold+ `°`, x: initialProjection.invert(xy)[0], y: initialProjection.invert(xy)[1], angle: parseFloat(angle.toFixed(2)) }); } }); }) ); return results; };36:[{"id":"b76bebbf585d1f8739a2172fea683ac7c3396150e4613200591d0db6f0b05691b85bc8dec92a96ccf5c079ef9597e1a2ea52515d0ac104341c5daf4b5660ed11","href":"https://static.observableusercontent.com/files/b76bebbf585d1f8739a2172fea683ac7c3396150e4613200591d0db6f0b05691b85bc8dec92a96ccf5c079ef9597e1a2ea52515d0ac104341c5daf4b5660ed11","name":"IGRF-13_declination_2025.csv","type":"text/csv","lastModified":1727864383423.584,"size":463208},{"id":"d049f294715e7c7c2c2855833682b259a7fcd63e6b97421a66d9ce2b62da210c42d6c2a491156f746b81757a18ff63d80333d2a6272fe1d0b2f9439b6ffdbdd0","href":"https://static.observableusercontent.com/files/d049f294715e7c7c2c2855833682b259a7fcd63e6b97421a66d9ce2b62da210c42d6c2a491156f746b81757a18ff63d80333d2a6272fe1d0b2f9439b6ffdbdd0","name":"IGRF-13_declination_1900.csv","type":"text/csv","lastModified":1727864383423.584,"size":462453},{"id":"036f94c04e2838e6c7c3cf87e4bb47bb2e4b0902d8a95a18f7f79dd07e10ae6b16fa532b87a790e6ef69ab4466d0f54b16937961454b3ab6bf0c98f887ef7413","href":"https://static.observableusercontent.com/files/036f94c04e2838e6c7c3cf87e4bb47bb2e4b0902d8a95a18f7f79dd07e10ae6b16fa532b87a790e6ef69ab4466d0f54b16937961454b3ab6bf0c98f887ef7413","name":"IGRF-13_declination_2020.csv","type":"text/csv","lastModified":1727864383423.584,"size":463058},{"id":"7a30cf9730a8c74671fad85901a82bb056791a3176e1a8574df721aac510bb96eabb00f5a28a6e0873ba3a8924d870c3244d3819dd7376bf57ae1072fe7bafa0","href":"https://static.observableusercontent.com/files/7a30cf9730a8c74671fad85901a82bb056791a3176e1a8574df721aac510bb96eabb00f5a28a6e0873ba3a8924d870c3244d3819dd7376bf57ae1072fe7bafa0","name":"IGRF-13_declination_2020.PNG","type":"image/png","lastModified":1727864383423.584,"size":1148752},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1727864383423.584,"size":545534},{"id":"5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","href":"https://static.observableusercontent.com/files/5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","name":"world-110m_withlakes.topo.json","type":"application/json","lastModified":1727864383423.584,"size":92469},{"id":"1721b9f8610f9ca2440b8979a57d0eb354e8c6341506c8a12ff94a17a7e5c01c64609dadfd13284133cdeffb9bdf457da60505bde70b1980f0cd994a9946cf2d","href":"https://static.observableusercontent.com/files/1721b9f8610f9ca2440b8979a57d0eb354e8c6341506c8a12ff94a17a7e5c01c64609dadfd13284133cdeffb9bdf457da60505bde70b1980f0cd994a9946cf2d","name":"IGRF-13_declination_2000.csv","type":"text/csv","lastModified":1727958018057.042,"size":464471},{"id":"23469e60a0463ed3cefa6cf36f7e178c9e81484289081462a5c0d1697cf7b661e2b31b25243063b0fdacb55c5346c56bcfde61af47a27bf2e55d5c8ebeb0ec19","href":"https://static.observableusercontent.com/files/23469e60a0463ed3cefa6cf36f7e178c9e81484289081462a5c0d1697cf7b661e2b31b25243063b0fdacb55c5346c56bcfde61af47a27bf2e55d5c8ebeb0ec19","name":"IGRF-13_declination_1980.csv","type":"text/csv","lastModified":1727958164393.758,"size":465988},{"id":"f41e2ff4f0d1438eb8babf7abba79daae7d252e7578ac217ad54f719d098012c0e95e821527e2f26063ad16774d8eb07fb49cde339264674a7b942ec60bf4e99","href":"https://static.observableusercontent.com/files/f41e2ff4f0d1438eb8babf7abba79daae7d252e7578ac217ad54f719d098012c0e95e821527e2f26063ad16774d8eb07fb49cde339264674a7b942ec60bf4e99","name":"IGRF-13_declination_1960.csv","type":"text/csv","lastModified":1727958257404.867,"size":465985},{"id":"579e42a003fefb0f3db2493dddb59e38e19b44f9bcf54c4566b68d8028c43ec5815f45fc2b060420221c7d975aa312a88c059910f3de0cb5814523faea6d46b5","href":"https://static.observableusercontent.com/files/579e42a003fefb0f3db2493dddb59e38e19b44f9bcf54c4566b68d8028c43ec5815f45fc2b060420221c7d975aa312a88c059910f3de0cb5814523faea6d46b5","name":"IGRF-13_declination_1940.csv","type":"text/csv","lastModified":1727958308983.337,"size":465330},{"id":"ccf1fc912871c844c82e2b1aa15690972e54df36d9be7202639fdbcbca2d383dcbb1512216f3d8a6e6924b848e1f8857a6bbdc5c808ab8671f1b5e0bee1bdc9a","href":"https://static.observableusercontent.com/files/ccf1fc912871c844c82e2b1aa15690972e54df36d9be7202639fdbcbca2d383dcbb1512216f3d8a6e6924b848e1f8857a6bbdc5c808ab8671f1b5e0bee1bdc9a","name":"IGRF-13_declination_1920.csv","type":"text/csv","lastModified":1727958335771.952,"size":464311}] 30:{"id":"12dac42acc4b5bf0","slug":"map-with-contours-and-contour-labels","title":"Map with Contours and Contour Labels","thumbnail":"61d9bba1a1b39fc07fb4219911f6828fd27ce2fcfbf89619d87286a719eb9dd4","access_level":"public","create_time":"$D2024-10-02T10:19:43.423Z","update_time":"$D2024-10-06T22:37:46.050Z","view_time":null,"first_public_time":"$D2024-10-02T22:17:58.961Z","has_unpublished_edits":null,"fork":{"id":"13c7442b9244ecec","slug":"svg-map-with-d3-contour","title":"SVG Map with d3.contours()","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":4,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":11214,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"5ea5ed43fe2a637d","slug":"maps","title":"Maps","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"titling":"auto","title":"Map with Contours and Contour Labels","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9662,"value":"## Reference Map\nThe illustration below displays the Earthʼs magnetic field declination using a Miller cylindrical projection map, derived from the IGRF-13 model for epoch 2020.0 (*i.e.*, January 1, 2020). \n\nHereafter, we will reproduce these contours (**§2**) and contour labels (**§3**).\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5923,"value":"reference_image = {\n const container = html`\n

IGRF-13 (International Geomagnetic Reference Field, 13^th generation): Main Field Declination – Epoch 2020.0\n
[ Source: NOAA/NCEI and CIRES, 2019 ]\n

👆🏻 Click to resize the map\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"400px\" ? \"900px\" : \"400px\";\n };\n\n return container; \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5726,"value":"---\n## Result\nThe SVG map below shows the Earthʼs magnetic field declination, derived from the IGRF-13 model for epoch **${selected_year.year}.0** (*i.e.*, January 1, ${selected_year.year}). This illustration is generated dynamically within this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5200,"value":"viewof selected_projection = Inputs.select(projections, {\n label: \"Select a Projection\",\n format: d => d.name,\n value: projections.find(p => p.name === \"Miller\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5880,"value":"viewof selected_year = Inputs.select(fileMap, {\n label: \"Select a Year\",\n format: d => d.year,\n value: fileMap.find(p => p.year === \"2020\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10844,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10231,"value":"---\n### Map Adjustment Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10328,"value":"viewof forceHorizontalLabel = Inputs.toggle({\n label: htl.html`Reorient part of the vertical labels`,\n value: false\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10462,"value":"viewof labelSize = Inputs.range([6, 15], {value: 12, step: 0.5, label: html`Label text height
(in pixels)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10919,"value":"viewof labelBackgroundOpacity = Inputs.range([0, 1], {value: 0.25, step: 0.05, label: html`Label background opacity`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11032,"value":"
\n

${viewof labelSpacing}

\n Average: ${labelsPerContour} label${labelsPerContour > 1 ? \"s\" : \"\"}/contour\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10940,"value":"viewof labelLatMax = Inputs.range([50, 90], {value: 70, step: 5, label: html`Don't display labels
above north Lat. (°)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10944,"value":"viewof labelLatMin = Inputs.range([-90, -50], {value: -55, step: 5, label: html`Don't display labels
below south Lat. (°)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5446,"value":"viewof map_width = Inputs.range([700, 1150], {value: 1100, step: 50, label: htl.html`Map width
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10008,"value":"
\n

\n ${DOM.download(() => serialize(map), \"IGRF-13_declination_\" + selected_projection.name + \"_\" + selected_year.year, \"Save as SVG\")}\n

\n ${DOM.download(() => rasterize(map), \"IGRF-13_declination_\" + selected_projection.name + \"_\" + selected_year.year, \"Save as PNG\")}\n

\n \n You can save the displayed map in either SVG or PNG format.\n
To save it as PNG, the original SVG map is first converted to a canvas format. \n
For PNG, please follow these steps:\n

Click “Save as PNG” to initiate the conversion.
Click “Download” to retrieve the PNG file.

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":728,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9618,"value":"
\nTo manipulate these data, we construct the `rawData` object from the selected CSV file:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"rawData = fileInfo.file.csv({ array: true }).then(rows => {\n const flatLength = rows.flat().length;\n const numberOfLines = rows.length;\n\n return Object({\n \"gridWidth\": flatLength/numberOfLines,\n \"gridHeight\": numberOfLines,\n \"data\": rows.flat().map(x => parseFloat(x)),\n })\n \n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9775,"value":"We will later on use the identity transform `d3.geoIdentity()` to translate the initial 2D geometry:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8721,"value":"initialProjection = d3.geoIdentity().translate([rawData.gridWidth / 2, rawData.gridHeight / 2]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10227,"value":"Note that since the rectangular grid has regular spacing in degrees (equirectangular projection), \nwe could complete this transformation in a similar way using `d3.geoEquirectangular()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1439,"value":"create_contours = md`\n### 2. Contours\nSince we are working with data organized in a regular grid of values (a rectangular grid of numeric data) rather than discrete point data, we can utilize \\`d3.contours()\\` to compute contour lines. The \\`d3.contours()\\` function efficiently generates contours from a 2D array of values and creates paths for visualization. The *thresholds* option allows us to specify a range of contour values, such as negative declinations or contours representing null declination.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9768,"value":"The following functions are used to:\n\n- Project the contours from `rawData` based on specified *thresholds*.\n- Transform the points from initial geographical coordinates (longitude, latitude) to the projected coordinate space (in pixels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1861,"value":"contours = thresholds => \n d3.contours()\n .size([rawData.gridWidth, rawData.gridHeight])\n .thresholds(thresholds)(rawData.data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8718,"value":"function projectContour(contour) {\n return {\n type: contour.type,\n value: contour.value,\n coordinates: contour.coordinates.map(polygon => \n polygon.map(line => \n line.map(point => { return initialProjection.invert(point); })\n )\n )\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8723,"value":"projectedContours = thresholds => contours(thresholds).map(projectContour);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9818,"value":"With the function `projectedContours = ƒ(thresholds)`, we can extract multipolygons that are ready to be displayed on the map. As an example, here are the contours representing positive declinations of **+10°** and **+20°**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9816,"value":"projectedContours([10,20])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10311,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9843,"value":"create_contour_labels = md`\n### 3. Create contour labels\nTo prepare the contour labels, we can base on the work of @fil who proposed contour labeling for SVG elements. A portion of his code was adapted to create contour labels for maps, independent of their projection. This is implemented in the function labelsContours = ƒ(threshold, labelSpacing): \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10326,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10420,"value":"This function requires two parameters:\n- ***thresholds*** • An array of numerical values representing the contour levels for which we want to generate labels.\n- ***labelSpacing*** • An integer that controls the spacing between labels along each contour. This parameter should be tuned empirically, as it impacts the overall appearance of the map; the optimal value may vary based on subjective preferences.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11011,"value":"We display label contours for every 10° interval of magnetic declination, ranging from -90° to +90°:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10317,"value":"thresholds =d3.range(-90,100,10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11016,"value":"With a `labelSpacing` value of ${labelSpacing} (as chosen via the input scroller), we extract ${baseLabels.length} labels that can be displayed on the map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10321,"value":"baseLabels = thresholds.flatMap(threshold => labelsContours(threshold, labelSpacing))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11020,"value":"After filtering and applying optional aesthetic adjustments, here is the list of the final **${labels.length} labels** currently displayed on the map (an average of **${labelsPerContour} label${labelsPerContour > 1? \"s\" : \"\"} per contour**):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10527,"value":"labels = {\n return baseLabels\n .filter(label => Math.abs(label.x) <= 170 && label.y >= labelLatMin && label.y <= labelLatMax)\n .map(label => ({\n ...label,\n angle: forceHorizontalLabel && Math.abs(label.angle) > (4 / 5) * 90 ? 0 : label.angle\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10313,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9998,"value":"### 4. Build the SVG map\nAs mentioned earlier, the contours are seamlessly projected onto any geographic projection. Below is the selection of projections available in the drop-down menu. Refer to the map cell above to see how the contours have been integrated into the SVG map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5202,"value":"projections = [\n {name: \"Aitoff\", value: d3.geoAitoff().scale(140)},\n {name: \"August\", value: d3.geoAugust()},\n {name: \"Ginzburg V\", value: d3.geoGinzburg5()}, \n {name: \"Equirectangular\", value: d3.geoEquirectangular().scale(150)},\n {name: \"Mercator\", value: d3.geoMercator().scale(153.5)},\n {name: \"Miller\", value: d3.geoMiller().scale(153.5)},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5118,"value":"projection = selected_projection.value.translate([width/2,height/2]); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11125,"value":"### Additional Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10323,"value":"viewof labelSpacing = Inputs.range([10, 150], {value: 45, step: 5, label: html`Label spacing parameter`})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11030,"value":"labelsPerContour = Math.round(labels.length/thresholds.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"### Data Files\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5883,"value":"fileMap = [\n {year: \"2025\", file: FileAttachment(\"IGRF-13_declination_2025.csv\") }, \n {year: \"2020\", file: FileAttachment(\"IGRF-13_declination_2020.csv\") }, \n {year: \"2000\", file: FileAttachment(\"IGRF-13_declination_2000.csv\") }, \n {year: \"1980\", file: FileAttachment(\"IGRF-13_declination_1980.csv\") },\n {year: \"1960\", file: FileAttachment(\"IGRF-13_declination_1960.csv\") },\n {year: \"1940\", file: FileAttachment(\"IGRF-13_declination_1940.csv\") },\n {year: \"1920\", file: FileAttachment(\"IGRF-13_declination_1920.csv\") },\n {year: \"1900\", file: FileAttachment(\"IGRF-13_declination_1900.csv\") },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7948,"value":"fileInfo = fileMap.find(d => d.year === selected_year.year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"### TopoJSON Mesh and Loaded Files\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5085,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4554,"value":"//world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")\nworld = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4556,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5649,"value":"worldWithLakes = FileAttachment(\"world-110m_withlakes.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5652,"value":"lakes = topojson.feature(worldWithLakes, worldWithLakes.objects.lakes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"### Libraries and Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6672,"value":"// https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6681,"value":"// https://observablehq.com/@mbostock/saving-svg\nfunction rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"