31:T5a3,{ const text1 = `This contour map showcases the iconic Matterhorn,` const text2 = `Both the East and North faces are prominently visible from the Swiss village of Zermatt.` const text3 = `(*i.e.*, with map rotation currently set to ${mapRotation}°).` let dynamicText1; let dynamicText2 = ` The Matterhorn serves as a natural border between Switzerland and Italy.

` // Create dynamic text based on mapRotation if (mapRotation === 0) { dynamicText1 = ` with its East face positioned at the bottom of the illustration`; dynamicText2 = ` The Matterhorn serves as a natural border between Italy (shown on the left) and Switzerland (on the right).`; } else if (mapRotation === 90) { dynamicText1 = ` with its North face positioned at the bottom of the illustration`; } else if (mapRotation === 180) { dynamicText1 = ` with its East face positioned at the top of the illustration`; } else if (mapRotation === -90) { dynamicText1 = ` with its South face positioned at the bottom of the illustration`; dynamicText2 = ` The Matterhorn serves as a natural border between Switzerland (North) and Italy (South).` } else { dynamicText1 = ` `; } // Return the markdown formatted text return md`${text1} ${dynamicText1} ${text3} ${text2} ${dynamicText2}`; } 32:T1299,map = { const scale = size / rawData.gridWidth; const width = scale * rawData.gridWidth; const height = scale * rawData.gridHeight; const svg = d3.select(DOM.svg(width, height)) .style("background-color", "#eee"); const path = d3.geoPath().projection(projection); // Create a group element that will be scaled const g = svg.append("g") .attr("transform", `scale(${scale})`); // Function to create contours based on a single threshold value const createContourForThreshold = (threshold, strokeWidth, strokeColor, fillColor, isMajor) => { const contourData = projectedContours([threshold]); // Generate contour paths for the current threshold // Debug: Check if contourData is empty if (!contourData || contourData.length === 0) { console.warn(`No contours generated for threshold: ${threshold}`); return; } const contoursGroup = g.append("g") .selectAll(".contour") .data(contourData) // Use the generated contour data .enter() .append("path") .attr("class", "contour") .attr("d", path) .attr("stroke-width", strokeWidth / scale) // Adjust stroke width for scaling .style("stroke", strokeColor) .attr("fill", fillColor); // Use the color function for the threshold // Create a mask for major contours only if (isMajor) { const contourMask = svg.append("defs").append("mask") .attr("id", `contour-mask-${strokeColor.replace('#', '')}`); // Ensure ID is unique and colorless // 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); // Remove scale from label dimensions 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 / scale) .attr("ry", 10 / scale) .attr("transform", `rotate(${angle}, ${projectedPoint[0]}, ${projectedPoint[1]})`) .attr("fill", "black"); // Mask area for labels }); // Apply the mask to the contours contoursGroup.attr("mask", `url(#contour-mask-${strokeColor.replace('#', '')})`); } return contoursGroup; }; // Add contours for minor thresholds first minorThresholds.forEach(threshold => { createContourForThreshold(threshold, 0.2, contourColor, color(threshold), false); // Fill color for minor thresholds }); // Add contours for major thresholds on top majorThresholds.forEach(threshold => { createContourForThreshold(threshold, 1, contourColor, "none", true); // Major thresholds without fill }); // Add text labels labels.forEach(({ x, y, text, angle }) => { const projectedPoint = projection([x, y]); g.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", `${2 / scale}px`) .style("stroke-opacity", labelBackgroundOpacity) .style("paint-order", "stroke") .style("fill", contourColor) .style("font-size", `${labelSize / scale}px`) .text(text); }); // Add a scale bar const scaleMeters = 200 // 200 m const scaleBarLength = (scaleMeters / 25); // 25 m per grid unit // Group for the scale bar and text const scaleBarGroup = svg.append("g").attr("class", "scale-bar"); // Draw the scale bar scaleBarGroup.append("rect") .attr("x", 25) // .attr("y", height - 35) .attr("width", scaleBarLength * scale) .attr("height", 8) .attr("fill", contourColor); // Text label above the scale bar scaleBarGroup.append("text") .attr("x", 25 + (scaleBarLength * scale) / 2) .attr("y", height - 45) .attr("text-anchor", "middle") .style("fill", contourColor) .style("font-size", "18px") .style("stroke", "white") .style("stroke-width", "2px") .style("stroke-opacity", labelBackgroundOpacity) .style("paint-order", "stroke") .text(`${scaleMeters} m`); return svg.node(); }; 33:T68d,// 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+ ` `, x: projection.invert(xy)[0], y: projection.invert(xy)[1], angle: parseFloat(angle.toFixed(2)) }); } }); }) ); return results; };34:[{"id":"0e37b6b6967c16a90fffae269b4f97038282f4bf5c07942dccb521f8b5da672ee461d86f53ef110955a6e09f18330de49ee5094b3b8965e8c169a78ead788d66","href":"https://static.observableusercontent.com/files/0e37b6b6967c16a90fffae269b4f97038282f4bf5c07942dccb521f8b5da672ee461d86f53ef110955a6e09f18330de49ee5094b3b8965e8c169a78ead788d66","name":"DHM_xyz_Matterhorn.txt","type":"text/plain","lastModified":1727972917545.879,"size":171943},{"id":"a79702372c8798f0e1e804cde61fb371aaa4335f2c17bb9f61a62f3762f3ccce4a68e0417c14b608417558b1ae5e3dfb8f052ac478627b66888aa8b36c45703d","href":"https://static.observableusercontent.com/files/a79702372c8798f0e1e804cde61fb371aaa4335f2c17bb9f61a62f3762f3ccce4a68e0417c14b608417558b1ae5e3dfb8f052ac478627b66888aa8b36c45703d","name":"Logo-Zermatt-Matterhorn.png","type":"image/png","lastModified":1727998326172.891,"size":169068}] 2f:{"title":"Contour Map of the Matterhorn","cells":[{"id":0,"value":"# Contour Map of the Matterhorn","pinned":false,"hidden":false,"mode":"md"},{"id":11791,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11647,"value":"The map uses data from an ASCII file (see `dataFile`) organized in XYZ format:\n* **X** and **Y** represent coordinates in the Swiss coordinate system.\n* **Z** indicates the elevation at each specific (X, Y) coordinate, measured in meters.\n\nThe map covers an area of 2 km by 2 km (80 × 80 grid, 25-meter grid resolution).\n\n**Source**: Digital height model DHM25 by Swisstopo (25-meter grid resolution), using sample data from the Matterhorn region.","pinned":false,"hidden":false,"mode":"md"},{"id":11440,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":10231,"value":"---\n### Map Adjustment Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":11787,"value":"viewof mapRotation = Inputs.range([-90, 180], {value: 0, step: 90, label: html`Rotate the map
(clockwise, in °)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11032,"value":"

${viewof labelSpacing}

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

","pinned":false,"hidden":false,"mode":"html"},{"id":10462,"value":"viewof labelSize = Inputs.range([8, 14], {value: 11, step: 0.5, label: html`Label text height
(in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10919,"value":"viewof labelBackgroundOpacity = Inputs.range([0, 1], {value: 0.2, step: 0.05, label: html`Label background opacity`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11585,"value":"viewof contourColor = Inputs.color({label: \"Contour color\", value: \"#411807\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11403,"value":"viewof size = Inputs.range([500, 900], {value: 700, step: 50, label: html`Width and Height
(in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11712,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":11717,"value":"If you are having trouble recognizing the Matterhorn in the contour map, the Zermatt Tourism logo should help you identify it more easily.\n\n➤ Check out this other notebook for a 3D map of the Matterhorn created using the same data file.","pinned":false,"hidden":false,"mode":"md"},{"id":11702,"value":"Zermatt_logo = {\n const container = html`\n

Logo of Zermatt Tourism.\n
[ Source: zermatt.ch ]\n

👆🏻 Click to resize the logo\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"200px\" ? \"500px\" : \"200px\";\n };\n\n return container; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":10323,"value":"viewof labelSpacing = Inputs.range([10, 100], {value: 45, step: 5, label: html`Label spacing parameter`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11394,"value":"minorThresholds =d3.range(2500,4500,20).filter(threshold => !majorThresholds.includes(threshold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":10317,"value":"majorThresholds = d3.range(3000,4500,100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10321,"value":"labels = majorThresholds.flatMap(threshold => labelsContours(threshold, labelSpacing))","pinned":false,"hidden":false,"mode":"ojs"},{"id":11030,"value":"labelsPerContour = Math.round(labels.length/majorThresholds.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11416,"value":"interpolateTerrain = {\n const i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90));\n const i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95));\n return t => t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11414,"value":"color = d3.scaleSequential(interpolateTerrain).domain(d3.extent(rawData.data)).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"### Data File\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":7948,"value":"dataFile = FileAttachment(\"DHM_xyz_Matterhorn.txt\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11218,"value":"parsedData = (await dataFile.text()).trim().split(\"\\n\").slice(1).map(line => {\n const [x, y, z] = line.split(/\\s+/).map(Number);\n return { x, y, z };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11778,"value":"function rotateGrid90(grid) {\n const rotated = [];\n for (let y = 0; y < grid[0].length; y++) {\n const newRow = [];\n for (let x = grid.length - 1; x >= 0; x--) {\n newRow.push(grid[x][y]);\n }\n rotated.push(newRow);\n }\n return rotated;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11781,"value":"function rotateGrid180(grid) {\n return grid.map(row => row.reverse()).reverse();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11783,"value":"function rotateGrid270(grid) {\n const rotated = [];\n for (let y = grid[0].length - 1; y >= 0; y--) {\n const newRow = [];\n for (let x = 0; x < grid.length; x++) {\n newRow.push(grid[x][y]);\n }\n rotated.push(newRow);\n }\n return rotated;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11221,"value":"rawData2DGrid = {\n const grid = {};\n \n // Traverse the dataset and populate the grid\n parsedData.forEach(({ x, y, z }) => {\n if (!grid[x]) grid[x] = {};\n grid[x][y] = z;\n });\n\n // Convert the grid object to a 2D array\n const rows = Object.keys(grid).map(x => {\n const row = Object.keys(grid[x]).map(y => grid[x][y]);\n return row;\n });\n\n // Rotate the grid based on mapRotation\n if (mapRotation === 90) {\n return rotateGrid90(rows);\n } else if (mapRotation === 180) {\n return rotateGrid180(rows);\n } else if (mapRotation === -90) {\n return rotateGrid270(rows);\n } else {\n return rows; // No rotation\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":11224,"value":"rawData = Object({\n \"gridWidth\": rawData2DGrid.flat().length / rawData2DGrid.length,\n \"gridHeight\": rawData2DGrid.length,\n \"data\": rawData2DGrid.flat().map(x => parseFloat(x)),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"### Map Projection and Contours","pinned":false,"hidden":false,"mode":"md"},{"id":5118,"value":"projection = d3.geoIdentity().translate([rawData.gridWidth / 2, rawData.gridHeight / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"contours = thresholds => \n d3.contours()\n .size([rawData.gridWidth, rawData.gridHeight])\n .thresholds(thresholds)(rawData.data);","pinned":false,"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 projection.invert(point); })\n )\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8723,"value":"projectedContours = thresholds => contours(thresholds).map(projectContour);","pinned":false,"hidden":false,"mode":"ojs"},{"id":10326,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"### Library","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@3\", \"d3-hsv@0.1.0/build/d3-hsv.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}