30: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(); }31:[] 2e:{"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"},{"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"},{"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"},{"id":27,"value":"html`\n\n

${drawMap(colorData)}

${drawHillshade(315, 45)}

${drawContourMap()}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":64,"value":"map = html`\n\n

${drawMap(colorData)}

${drawHillshade(315, 45)}

${drawContourMapWithLabels()}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":157,"value":"html`\n\n

${drawTanakaContours()}

${drawMap(waterMask)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"strokeColor = 'rgba(255,255,255,.5)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"shadowColor = 'rgba(84,74,59,.9)'","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":95,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":15,"value":"contours = d3.contours()\n .size([width, height])\n .thresholds(thresholds)\n (contourData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"contourData = blurredDemData.filter( (d, i) => i % 4 == 0)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":13,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {drawMap, colorData, drawHillshade, molokai, width, height, colorScale, demData, blue} from '@sahilchinoy/hillshader'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}