31:T57f,# SVG Map with d3.contours() ## Example: Earth’s Magnetic Field Declination This notebook demonstrates how to create an SVG map with contour lines. As an example, we showcase the Earth’s magnetic field declination. The contours are projected seamlessly onto any geographic projection using `d3-contour`. For the sake of simplicity, we will not address legends or labels (such as graticule labels or contour labels) in this demonstration.
➤ Check out this companion notebook for a similar map featuring contour labels. 🧭 *For further details about **Earth's magnetic field declination** and the **IGRF-13** model, please check out this companion notebook.* ---32:Tc55,map = { const scale = map_width/width const svg = d3.select(DOM.svg(scale*(width), scale*(height))) .attr("viewBox", `0 -50 ${width} ${(height)}`); svg.style("border", "0px solid #eee") .style("background-color", "white") const path = d3.geoPath().projection(projection); svg.append("defs").append("clipPath") .attr("id", "clip-bottom") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height-100); svg.append("defs").append("clipPath") .attr("id", "clip") .append("path") .datum({ type: "Sphere" }) .attr("d", path) svg.append("path") .datum({ type: "Sphere" }) .attr("d", path) .attr("fill", "#00d") .attr("fill-opacity", 0.05) .attr("clip-path", "url(#clip-bottom)") svg.append("path") .datum(land) .attr("d", path) .attr("fill", "#b0b0b0") .attr("fill-opacity", 0.4) .attr("stroke", "#99988d") .attr("stroke-width", 0.5) .attr("clip-path", "url(#clip-bottom)") svg.append("path") .datum(lakes) .attr("d", path) .attr("fill", "#E5EFEF") .attr("fill-opacity", 0.8) .attr("stroke-width", 0) svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#ccc") .style("stroke-width", 0.5) .attr("clip-path", "url(#clip-bottom)") const g_negDec1 = svg.append("g") .selectAll(".contour") .data(projectedContours(d3.range(-180,0,2))) .enter() .append("path") .attr("d", path) .attr("stroke-width", 0.25) .style("stroke", "blue") .attr("fill", "none") .attr("clip-path", "url(#clip-bottom)"); const g_negDec2 = svg.append("g") .selectAll(".contour") .data(projectedContours(d3.range(-180,0,10))) .enter() .append("path") .attr("d", path) .attr("stroke-width", 0.5) .style("stroke", "blue") .attr("fill", "none") .attr("clip-path", "url(#clip-bottom)"); const g_posDec = svg.append("g") .selectAll(".contour") .data(projectedContours(d3.range(180, 0, -2))) .enter() .append("path") .attr("d", path) .attr("stroke-width", 0.25) .style("stroke", "red") .attr("fill", "none") .attr("clip-path", "url(#clip-bottom)"); const g_posDec2 = svg.append("g") .selectAll(".contour") .data(projectedContours(d3.range(180, 0, -10))) .enter() .append("path") .attr("d", path) .attr("stroke-width", 0.5) .style("stroke", "red") .attr("fill", "none") .attr("clip-path", "url(#clip-bottom)"); const g0 = svg.append("g") .selectAll(".contour") .data(projectedContours([0])) .enter() .append("path") .attr("d", path) .attr("stroke-width", 2) .style("stroke", "green") .attr("stroke-dasharray", "8,5") .attr("fill", "none") .attr("clip-path", "url(#clip-bottom)"); 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)") return svg.node(); } 33:T6b8,--- ## 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}`} |34:T606,tip_excel = md`--- ## Useful tip To conclude this notebook, here is a tip to help you visualize CSV data with colors in Excel (see the screen capture below). ### Steps to Visualize Data with Colors in Excel: 1. **Open the CSV file in Excel**: > Download one of the CSV files from the ᥫ files pane in this Observable notebook. 3. **Select the data**: > Click and drag to highlight the rows or columns where you want to apply color formatting (*e.g.*, cells **A1 to MV180**). 5. **Apply Conditional Formatting**: > In the Excel **Ribbon**, go to the **Home** tab. > Click on **Conditional Formatting** in the “Styles” group. 6. **Choose a Formatting Rule**: > You can highlight data based on specific conditions. For this dataset, select **Color Scales** to apply a color gradient across all selected cells, showing low to high values. Choose the **Red - White - Blue** Color Scale to align with the IGRF convention. 7. **Set the Rule**: > Apply the rule, then adjust the column width and row height to create square cells (*e.g.*, set both **width** and **height** to **20 px**). After applying these steps, your data should be highlighted and will resemble the screen capture below. A quick inspection reveals that: * The data are flipped (*y*-reflection is effectively managed in the D3 library), * The aliasing observed around the poles is due to the data from the IGRF-13 model. `35:[{"id":"5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","href":"https://static.observableusercontent.com/files/5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","name":"world-110m_withlakes.topo.json","type":"application/json","lastModified":1727741154267.288,"size":92469},{"id":"d049f294715e7c7c2c2855833682b259a7fcd63e6b97421a66d9ce2b62da210c42d6c2a491156f746b81757a18ff63d80333d2a6272fe1d0b2f9439b6ffdbdd0","href":"https://static.observableusercontent.com/files/d049f294715e7c7c2c2855833682b259a7fcd63e6b97421a66d9ce2b62da210c42d6c2a491156f746b81757a18ff63d80333d2a6272fe1d0b2f9439b6ffdbdd0","name":"IGRF-13_declination_1900.csv","type":"text/csv","lastModified":1727741154267.288,"size":462453},{"id":"036f94c04e2838e6c7c3cf87e4bb47bb2e4b0902d8a95a18f7f79dd07e10ae6b16fa532b87a790e6ef69ab4466d0f54b16937961454b3ab6bf0c98f887ef7413","href":"https://static.observableusercontent.com/files/036f94c04e2838e6c7c3cf87e4bb47bb2e4b0902d8a95a18f7f79dd07e10ae6b16fa532b87a790e6ef69ab4466d0f54b16937961454b3ab6bf0c98f887ef7413","name":"IGRF-13_declination_2020.csv","type":"text/csv","lastModified":1727741154267.288,"size":463058},{"id":"7a30cf9730a8c74671fad85901a82bb056791a3176e1a8574df721aac510bb96eabb00f5a28a6e0873ba3a8924d870c3244d3819dd7376bf57ae1072fe7bafa0","href":"https://static.observableusercontent.com/files/7a30cf9730a8c74671fad85901a82bb056791a3176e1a8574df721aac510bb96eabb00f5a28a6e0873ba3a8924d870c3244d3819dd7376bf57ae1072fe7bafa0","name":"IGRF-13_declination_2020.PNG","type":"image/png","lastModified":1727741154267.288,"size":1148752},{"id":"b76bebbf585d1f8739a2172fea683ac7c3396150e4613200591d0db6f0b05691b85bc8dec92a96ccf5c079ef9597e1a2ea52515d0ac104341c5daf4b5660ed11","href":"https://static.observableusercontent.com/files/b76bebbf585d1f8739a2172fea683ac7c3396150e4613200591d0db6f0b05691b85bc8dec92a96ccf5c079ef9597e1a2ea52515d0ac104341c5daf4b5660ed11","name":"IGRF-13_declination_2025.csv","type":"text/csv","lastModified":1727741154267.288,"size":463208},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1727741154267.288,"size":545534},{"id":"b6eff7b0c5090df13747ffdf96493007d4167d6204b0f7c0fb374872e31de1d7399f89ffb5ff8a7620ce48e835a59cd46451de00a31f3c51e231c64a948bfba0","href":"https://static.observableusercontent.com/files/b6eff7b0c5090df13747ffdf96493007d4167d6204b0f7c0fb374872e31de1d7399f89ffb5ff8a7620ce48e835a59cd46451de00a31f3c51e231c64a948bfba0","name":"Excel_IGRF-13_declination_2020.png","type":"image/png","lastModified":1727789655005.006,"size":87781}] 2f:{"title":"SVG Map with d3.contours()","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":9662,"value":"## Reference\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.\n

","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":5726,"value":"---\n## Final result\nThe SVG illustration 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.\n\nThe following sections outline the detailed step-by-step procedure used to create this map.\n

","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":4903,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5446,"value":"viewof map_width = Inputs.range([700, 1100], {value: 800, step: 100, label: htl.html`Map width
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6696,"value":"DOM.download(() => serialize(map), \"IGRF-13_declination_\"+selected_projection.name+\"_\"+selected_year.year, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6669,"value":"DOM.download(() => rasterize(map), \"IGRF-13_declination_\"+selected_projection.name+\"_\"+selected_year.year, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6678,"value":"You can save the currently displayed map in either SVG or PNG format. If you choose to save it as a PNG, please follow these two steps:\n 1. Click on \"Save as PNG\" to initiate the conversion.\n 2. Click on \"Download\" to retrieve the PNG file.\n\nThis process converts the SVG map into a canvas format before generating the PNG.","pinned":false,"hidden":false,"mode":"md"},{"id":728,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":9618,"value":"
\nTo manipulate these data, we construct the `rawData` object from the selected CSV file:","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":9775,"value":"We will later on use the identity transform `geoIdentity` to translate the initial 2D geometry.","pinned":false,"hidden":false,"mode":"md"},{"id":8721,"value":"initialProjection = d3.geoIdentity().translate([rawData.gridWidth / 2, rawData.gridHeight / 2]);\n// ↳ Note that this rectangular grid could also be treated as an equirectangular projection.\n// initialProjection = d3.geoEquirectangular().translate([rawData.gridWidth / 2, rawData.gridHeight / 2]).scale(57.35).reflectY(true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1439,"value":"### 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","pinned":false,"hidden":false,"mode":"md"},{"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 geographical coordinates (longitude, latitude) to the projected coordinate space (in pixels).","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":8723,"value":"projectedContours = thresholds => contours(thresholds).map(projectContour);","pinned":true,"hidden":false,"mode":"ojs"},{"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 null declination:","pinned":false,"hidden":false,"mode":"md"},{"id":9816,"value":"projectedContours([0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":9843,"value":"### 3. 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"},{"id":5202,"value":"projections = [\n {name: \"Aitoff\", value: d3.geoAitoff().scale(140)},\n {name: \"August\", value: d3.geoAugust()},\n {name: \"Bertin’s 1953\", value: d3.geoBertin1953()},\n {name: \"Ginzburg V\", value: d3.geoGinzburg5()}, \n {name: \"Equirectangular\", value: d3.geoEquirectangular().translate([width/2,height/2-100]).scale(150)},\n {name: \"Mercator\", value: d3.geoMercator().translate([width/2,height/2-30]).scale(153.5)},\n {name: \"Miller\", value: d3.geoMiller().translate([width/2,height/2-10]).scale(153.5)},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5118,"value":"projection = selected_projection.value; ","pinned":false,"hidden":false,"mode":"ojs"},{"id":9872,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":9870,"value":"excel_csv_screen_capture = {\n const container = html`\n

📈 Editing the CSV File in Excel: IGRF-13 Declination Data for Epoch 2020.0\n
[ File: IGRF-13_declination_2020.csv ]\n

👆🏻 Click to resize and flip the screen capture 🙃\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"600px\" ? `${Math.max(1000, map_width)}px` : \"600px\";\n\n // Flip the image along the y-axis\n const image = document.getElementById(\"captureImage\");\n image.style.transform = image.style.transform === \"scaleY(-1)\" ? \"scaleY(1)\" : \"scaleY(-1)\";\n };\n \n return container; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"### Data Files\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":5883,"value":"fileMap = [\n {year: \"1900\", file: FileAttachment(\"IGRF-13_declination_1900.csv\") },\n {year: \"2020\", file: FileAttachment(\"IGRF-13_declination_2020.csv\") },\n {year: \"2025\", file: FileAttachment(\"IGRF-13_declination_2025.csv\") },\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7948,"value":"fileInfo = fileMap.find(d => d.year === selected_year.year);","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"### TopoJSON Mesh and Loaded Files\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":5085,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4556,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5649,"value":"worldWithLakes = FileAttachment(\"world-110m_withlakes.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5652,"value":"lakes = topojson.feature(worldWithLakes, worldWithLakes.objects.lakes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"### Libraries and Variables","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}