2b:null 2c:["$","title",null,{"children":"Contour map | Sahil Chinoy | Observable"}] 31:T440,drawContourMapWithLabels = () => { const svg = d3.select(drawContourMap()); const paths = svg.selectAll('path'); paths.filter( (d, i) => i % labelEvery == 0).each( function(d) { const pathNode = d3.select(this).node(); const totalLength = pathNode.getTotalLength(); const labelText = d.value; const rectWidth = labelText.toString().length * 12; d3.range(labelDistance, totalLength, labelDistance).forEach(length => { const pt1 = pathNode.getPointAtLength(length); const pt2 = pathNode.getPointAtLength(length + 1); const angle = Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x) * 180 / Math.PI; const g = svg.append('g') .attr('transform', `rotate(${angle} ${pt1.x}, ${pt1.y}) translate(${pt1.x}, ${pt1.y})`); g.append('text') .attr('x', 0) .attr('y', 5) .text(labelText) .style('text-anchor', 'middle') .style('fill', 'white') .style('stroke', 'black') .style('stroke-width', 1.5) .style('paint-order', 'stroke') }); }) return svg.node(); }32:[] 2f:{"id":"aec7c2ca308f07a9","slug":"contour-map","title":"Contour map","thumbnail":"0b49b196fabb6d9bfe2dcc8ee618638ad65bbce34c6abf42d909e93819f9b317","access_level":"public","create_time":"$D2019-03-01T21:45:26.685Z","update_time":"$D2019-05-18T13:52:38.167Z","view_time":null,"first_public_time":"$D2019-05-17T02:46:14.921Z","fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"fa42d4b5bae30469","login":"sahilchinoy","name":"Sahil Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/97370b11dad642a58468652ed8f11e5301d85511b2aeb670e2ae3e20346378f3","tier":"starter_2024"},"version":276,"publish_version":276,"role":null,"authored":false,"authors":[{"type":"individual","id":"31dca4840d5abd61","login":"sahilchinoy","name":"Sahil Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/97370b11dad642a58468652ed8f11e5301d85511b2aeb670e2ae3e20346378f3","tier":null}],"members":[{"type":"individual","id":"31dca4840d5abd61","login":"sahilchinoy","name":"Sahil Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/97370b11dad642a58468652ed8f11e5301d85511b2aeb670e2ae3e20346378f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":14,"collection":{"id":"27236029d2a6fa42","slug":"geo-experiments","title":"mapping experiments","owner":{"id":"fa42d4b5bae30469","login":"sahilchinoy","name":"Sahil Chinoy"}},"type":"notebook","body":{"title":"Contour map","cells":[{"id":0,"value":"md`# Contour map\n\nAdding contour lines to a [relief map](https://observablehq.com/@sahilchinoy/hillshader) of Moloka’i.\n\nIt’s helpful to generalize the terrain a bit before drawing contours. This is sometimes accomplished by blurring the DEM — and it turns out it’s possible to do this in the browser, too, using a [canvas filter](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter). But 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":"ojs","author":"$undefined","summary":"$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"},{"id":44,"value":"viewof thresholds = slider({\n min: 5, \n max: 25,\n value: 15,\n step: 10, \n description: \"Approx. number of contours\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"html`\n\n

${drawMap(colorData)}

${drawHillshade(315, 45)}

${drawContourMap()}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`Here’s a version that tries to automatically place contour labels. (This automatic positioning isn't great, and probably needs to be tweaked for a published map.) Note that the labels correspond to pixel values (0 to 255), not a meaningful elevation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"viewof labelDistance = slider({\n min: 10,\n max: 200,\n step: 10,\n value: 150,\n description: \"Distance between each label\",\n format: d => d + 'px'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"viewof labelEvery = slider({\n min: 1,\n max: contours.length,\n step: 1,\n value: 3,\n description:\n \"Label every nth contour\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"map = html`\n\n

${drawMap(colorData)}

${drawHillshade(315, 45)}

${drawContourMapWithLabels()}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"md`Here’s another style: [Tanaka illuminated contours](http://wiki.gis.com/wiki/index.php/Tanaka_contours), again inspired by an [Andy Woodruff project](https://www.axismaps.com/blog/2018/04/contours-in-browser/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"html`\n\n

${drawTanakaContours()}

${drawMap(waterMask)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"strokeColor = 'rgba(255,255,255,.5)'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"shadowColor = 'rgba(84,74,59,.9)'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"waterMask = {\n \n var data = new Uint8ClampedArray(demData.length);\n \n for (var n = 0; n < demData.length; n += 4) {\n \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] = 0;\n data[n+1] = 0;\n data[n+2] = 0;\n data[n+3] = 0;\n \n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"drawContourMap = () => {\n const svg = d3.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.selectAll('path')\n .data(contours.slice(1))\n .enter().append('path')\n .attr('d', path)\n .style('fill', 'none')\n .style('stroke', 'crimson')\n .style('stroke-width', (d, i) => i % 5 == 0 ? 1.5 : .5);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":15,"value":"contours = d3.contours()\n .size([width, height])\n .thresholds(thresholds)\n (contourData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"contourData = blurredDemData.filter( (d, i) => i % 4 == 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"blurredDemData = new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n\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 image.src = molokai;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import {drawMap, colorData, drawHillshade, molokai, width, height, colorScale, demData, blue} from '@sahilchinoy/hillshader'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"