2c:null 2d:["$","title",null,{"children":"Contour map of Sao Miguel, Azores. | Bernelle Verster | Observable"}] 32:T59e,md`# Contour map of Sao Miguel, Azores. Adapted [@sahilchinoy](https://observablehq.com/@sahilchinoy/contour-map)'s contour map of moloka'i for Sao Miguel, Azores, to do small papercraft models for e.g. jewelry and a keychain trinket. The DEM blurring is really useful for this small work! First challenge is finding a digital elevation model (DEM) file, hacking about on [earthdata.nasa.gov](https://search.earthdata.nasa.gov/). How I did it, was first navigate to your area of interest, then press on the "crop" icon and choose a rectangle and draw it around your area of interest. (and now for the moment I'm stuck on how I got the actual file.) Another potential resource is https://earthexplorer.usgs.gov/ and this post had some tips too: https://gisgeography.com/free-global-dem-data-sources/ I also struggled to download it in the right format, I think the tiff is too big and/or needs to be opened in a dedicated program like QGIS, same for a kmz. At my low required resolution, a screenshot was fine. I ran into the [CORS](https://talk.observablehq.com/t/sudden-fetch-cors-error/7280) issue, annoyingly, which seems to have to do with attribution (a test file from wiki worked but uploaded files didn't, nor a linked file from [earthdata](https://worldview.earthdata.nasa.gov/).) Short fix is to upload it somewhere (I used my blog, but people suggested e.g. imgur) and then do a [corsproxy](https://corsproxy.io/) prefix.`33:[{"id":"0f284560181f88dce8afae2751c25ab26433dc599e33bbcbac2b5e9b9801734c9a0051351c962fd05cddbe8b71074c3c9f49d22d2e2b22f56ff8c95fd9813044","href":"https://static.observableusercontent.com/files/0f284560181f88dce8afae2751c25ab26433dc599e33bbcbac2b5e9b9801734c9a0051351c962fd05cddbe8b71074c3c9f49d22d2e2b22f56ff8c95fd9813044","name":"earth_GDEM-10km-BW.png","type":"image/png","lastModified":1691481923405.666,"size":2077157},{"id":"45147db9864f62ec36f7d8580f539be8539ad48f8c97cffa356ebc1e13bd76f9f2ab300dc66be0e58d46831b3911ef2c07365487cafa42252cdbac985bd23296","href":"https://static.observableusercontent.com/files/45147db9864f62ec36f7d8580f539be8539ad48f8c97cffa356ebc1e13bd76f9f2ab300dc66be0e58d46831b3911ef2c07365487cafa42252cdbac985bd23296","name":"Screenshot from 2024-02-12 10-02-36.png","type":"image/png","lastModified":1707735797688.637,"size":50359},{"id":"5fba128d5a44761571512b970ef491dc3af8f59fd4663f397876ea28c37d5ddb16553b1903b60f0ab59bef5f462c383de7635e12e14755d8064bb87c4b5aceb7","href":"https://static.observableusercontent.com/files/5fba128d5a44761571512b970ef491dc3af8f59fd4663f397876ea28c37d5ddb16553b1903b60f0ab59bef5f462c383de7635e12e14755d8064bb87c4b5aceb7","name":"Sao_Miguel_dem.png","type":"image/png","lastModified":1691424267775.142,"size":230535},{"id":"eaf7c3d5f3ba93b7e8aba66108aa7ecc6e34ec09be6b4e2562a79dd09fc5d92467c9077473c8d1bfbf81738aafe61aaa4a4c11b92760d1a65093fc6204186f5d","href":"https://static.observableusercontent.com/files/eaf7c3d5f3ba93b7e8aba66108aa7ecc6e34ec09be6b4e2562a79dd09fc5d92467c9077473c8d1bfbf81738aafe61aaa4a4c11b92760d1a65093fc6204186f5d","name":"Azores_srtm_v3_64d0b1dfb4fbfc39.kmz","type":"application/zip","lastModified":1691425801740.397,"size":2320}] 30:{"id":"b7b73fe5de1d7df7","slug":"contour-map-of-sao-miguel-azores","title":"Contour map of Sao Miguel, Azores.","thumbnail":"e450475162682cdca844cf4c7eb3e9cb17f994c61f07e14cef14aaf64bf9ac14","access_level":"public","create_time":"$D2023-08-07T16:03:36.781Z","update_time":"$D2025-01-15T09:10:24.644Z","view_time":null,"first_public_time":"$D2023-08-07T16:03:36.781Z","has_unpublished_edits":null,"fork":{"id":"aec7c2ca308f07a9","slug":"contour-map","title":"Contour map","owner":{"id":"fa42d4b5bae30469","login":"sahilchinoy","name":"Sahil Chinoy"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":"starter_2024"},"version":493,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Contour map of Sao Miguel, Azores.","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"TODO: Along the vein of we-should-strive-for-normalized-streamlined-data it is more interesting to check if OpenStreetMap has the elevation data that I could use, e.g. [bicycle view](https://www.openstreetmap.org/search?query=Sao%20Miguel%2C%20Azores#map=11/37.8086/-25.4951&layers=C) or even [opentopomap](https://opentopomap.org/#map=10/37.6990/-25.6696) (thanks Jonas!) using GDAL? \nMaybe this is helpful: https://observablehq.com/@toja/mapping-the-mediterranean","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"viewof blur = slider({\n min: 0, \n max: 10,\n value: 3,\n step: 1, \n description: \"Blur in pixels\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof thresholds = slider({\n min: 5,\n max: 15,\n value: 5,\n step: 1,\n description: \"Approx. number of contours\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`Turns out the \"layers of paper\" style I love so darn much is called [Tanaka illuminated contours](http://wiki.gis.com/wiki/index.php/Tanaka_contours).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"html`\n\n

${drawTanakaContours()}

${drawMap(waterMask)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"The coastline in the top pic is less than ideal, I'm guessing it has to do with Sao Miguel's edgy coast, so I upped the \"< 1\" in \"if (demData[n] < 1) {\" to 20. I think this is forcing the water higher, effectively. (The blob on the right is a screenshot artefact)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"html`\n\n

${drawMap(colorData)}

${drawHillshade(\n 315,\n 45\n )}

${drawContourMap()}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"strokeColor = \"rgba(255,255,255,.5)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"shadowColor = 'rgba(84,74,59,.9)'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"waterMask = {\n var data = new Uint8ClampedArray(demData.length);\n\n for (var n = 0; n < demData.length; n += 4) {\n // value 0 is ocean\n\n if (demData[n] < 20) {\n // 1) {\n data[n] = blue.r;\n data[n + 1] = blue.g;\n data[n + 2] = blue.b;\n data[n + 3] = 255;\n continue;\n }\n\n //const color = d3.color(colorScale(demData[n]));\n\n data[n] = 0;\n data[n + 1] = 0;\n data[n + 2] = 0;\n data[n + 3] = 0;\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"drawContourMap = () => {\n const svg = d3\n .select(DOM.svg(width, height))\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-weight\", 300)\n .style(\"font-size\", 12);\n\n const path = d3.geoPath(contourProjection);\n\n svg\n .selectAll(\"path\")\n .data(contours.slice(1))\n .enter()\n .append(\"path\")\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2); //(d, i) => (i % 5 == 0 ? 1.5 : 0.5));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"drawTanakaContours = () => {\n const ctx = DOM.context2d(width, height);\n \n const path = d3.geoPath(contourProjection).context(ctx);\n \n contours.forEach( (d, i) => {\n ctx.beginPath();\n ctx.fillStyle = colorScale(d.value);\n path(d);\n \n ctx.strokeStyle = strokeColor;\n ctx.stroke();\n \n ctx.shadowOffsetX = 3;\n ctx.shadowOffsetY = 3;\n ctx.shadowBlur = 5;\n ctx.shadowColor = shadowColor;\n \n ctx.fill();\n });\n \n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"contourProjection = d3.geoTransform({\n point: function(x, y) {\n this.stream.point(x, y);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"contours = d3.contours().size([width, height]).thresholds(thresholds)(\n contourData\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"contourData = blurredDemData.filter((d, i) => i % 4 == 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"demData = new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const data = ctx.getImageData(0, 0, width, height).data;\n\n resolve(data);\n };\n image.src = old_sao_miguel_dem; // saomiguel;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"blurredDemData = new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.src = old_sao_miguel_dem; // saomiguel; // molokai; // earth_gdem10kmBw;\n image.onerror = reject;\n // image.alt = imageDescription;\n image.onload = () => {\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n ctx.filter = `blur(${blur}px)`;\n\n ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const data = ctx.getImageData(0, 0, width, height).data;\n\n resolve(data);\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"Apparently, while it’s possible to blur the DEM in the browser, using a [canvas filter](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter), this doesn't work at all in Safari, and behaves differently in Firefox. So this notebook currently only works in Chrome.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"drawMap = (data) => {\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n const imgData = new ImageData(data, width, height);\n\n ctx.putImageData(imgData, 0, 0, 0, 0, width, height);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"colorData = {\n var data = new Uint8ClampedArray(demData.length);\n\n for (var n = 0; n < demData.length; n += 4) {\n // value 0 is ocean\n\n if (demData[n] < 1) {\n data[n] = blue.r;\n data[n + 1] = blue.g;\n data[n + 2] = blue.b;\n data[n + 3] = 255;\n continue;\n }\n\n const color = d3.color(colorScale(demData[n]));\n\n data[n] = color.r;\n data[n + 1] = color.g;\n data[n + 2] = color.b;\n data[n + 3] = 255;\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {\n // drawMap,\n // colorData,\n drawHillshade,\n // molokai,\n // width,\n // height,\n // colorScale,\n blue\n} from \"@sahilchinoy/hillshader\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"I copied many of the imported things over so I can mess with them. I'm wondering about the aspect ratio, currently.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"height = 351","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"colorScale = d3\n .scaleLinear()\n .domain([3, 53, 103, 153, 203, 255])\n .range([\"#004000\", \"#679167\", \"#81b279\", \"#bfdfa8\", \"#d0b8aa\", \"#ffffff\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"old_sao_miguel_dem = FileAttachment(\"Sao_Miguel_dem.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"sao_miguel = FileAttachment(\"Screenshot from 2024-02-12 10-02-36.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"saomiguel = \"https://corsproxy.io/?\" +\n encodeURIComponent(\n \"https://indiebio.co.za/wp-content/uploads/2024/02/Screenshot-from-2024-02-12-10-02-36.png\"\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"ustest = \"https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/U.S._Interior_Highlands_DEM.png/800px-U.S._Interior_Highlands_DEM.png\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"azores = FileAttachment(\"Azores_srtm_v3_64d0b1dfb4fbfc39.kmz\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"import { kmzToGeoJSON } from \"@rdmurphy/convert-kmz-to-geojson\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"toGeoJSON = require(\"@tmcw/togeojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"JSZip = require(\"https://unpkg.com/jszip@3/dist/jszip.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"earth_gdem10kmBw = \"https://corsproxy.io/?\" +\n encodeURIComponent(\"https://worldview.earthdata.nasa.gov/\")\n// corsproxy doesn't work with the nasa site... FileAttachment(\"earth_GDEM-10km-BW.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"