30:T92e,drawMap = () => { const ctx = DOM.context2d(width, height); const path = d3.geoPath(contourProjection).context(ctx); // water const waterGrd = ctx.createLinearGradient(0, 0, width, height); waterGrd.addColorStop(0, d3.hsl(waterColor).darker(.1).hex()); waterGrd.addColorStop(1, d3.hsl(waterColor).brighter(.1).hex()); ctx.fillStyle = waterGrd; ctx.fillRect(0, 0, width, height); // land const landGrd = ctx.createLinearGradient(0, 0, width, height); landGrd.addColorStop(0, d3.hsl(landColor).darker(.1).hex()); landGrd.addColorStop(1, d3.hsl(landColor).brighter(.2).hex()); ctx.fillStyle = landGrd; ctx.beginPath(); path(contours[0]); ctx.fill(); // black outline ctx.lineWidth = 1.5; ctx.stroke(); contours.slice(1).forEach( d => { d.coordinates.forEach(coords => { var prev = null; coords[0].forEach(coords => { if (coords) { const pt = { 'type': 'Point', 'coordinates': coords } const centroidCoords = path.centroid(pt); if (prev == null) { ctx.beginPath(); ctx.moveTo(...centroidCoords); } else { // angle of line segment const angle = Math.atan2(coords[1] - prev[1], -coords[0] + prev[0]); // convert angle to aspect const aspect = ((Math.PI / 2 - angle) + 2 * Math.PI) % (2 * Math.PI); // convert sun azimuth to radians const azimuth = (az / 180) * Math.PI; // difference between angle and azimuth const diff = ( (aspect - azimuth) + 2 * Math.PI) % (2 * Math.PI); // scale width of stroke based on orientation ctx.lineWidth = widthScale(diff); // color stroke based on orientation ctx.strokeStyle = diff > Math.PI ? shadowColor : highlightColor; ctx.lineTo(...centroidCoords); ctx.stroke(); ctx.beginPath(); ctx.moveTo(...centroidCoords); } prev = coords; } }); }); }); return ctx.canvas; }31:[] 2e:{"title":"Tanaka contours","cells":[{"id":0,"value":"md`# Tanaka contours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`*This currently doesn’t work in Firefox and Safari because it uses a canvas blur filter.* `","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`A few months ago I came across [this tweet](https://twitter.com/visualvariable/status/1108378507799863297/photo/3) that had a beautiful map rendered with Tanaka illuminated contours.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`Here’s an attempt to recreate that style for the Hawaiian island that I [previously](https://observablehq.com/@sahilchinoy/contour-map) made a contour map of. Drawing illuminated contours involves calculating the orientation of each line segment, then coloring it and scaling its width. Check the [drawMap](#drawMap) function for details.\n\nLike the [hillshader](https://observablehq.com/@sahilchinoy/hillshader), you can control which direction the light is coming from.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof az = slider({\n min: 0, \n max: 360,\n value: 315,\n step: 1,\n description: \"Azimuth in degrees\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"html`\n\n

${drawMap()}

Moloka’i

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`A few more parameters to play with…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof minWidth = slider({\n min: 0, \n max: 5,\n value: .3,\n step: .1,\n description: \"Minimum line width\",\n format: d => `${d}px`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof maxWidth = slider({\n min: 0, \n max: 5,\n value: 3,\n step: .1,\n description: \"Maximum line width\",\n format: d => `${d}px`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof blur = slider({\n min: 3, \n max: 9,\n value: 6,\n step: 1,\n format: d => d + 'px',\n description: \"Blur in pixels\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof tolerance = slider({\n min: 0, \n max: 10,\n value: 0,\n step: .1,\n description: \"Simplification\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`(I can’t seem to get these colors right — suggestions welcome.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof landColor = color('#ffc67e')","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof waterColor = color('#d2def2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof highlightColor = color('#ffd8c0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"viewof shadowColor = color('#cb4827')","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"widthScale = d3.scaleLinear()\n.domain([0, Math.PI / 2, Math.PI, 3 * Math.PI / 2, 2 * Math.PI])\n.range([minWidth * width / 1000, maxWidth * width / 1000, minWidth * width / 1000, maxWidth * width / 1000, minWidth * width / 1000]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"contourProjection = d3.geoTransform({\n point: function(x, y) {\n this.stream.point(x, y);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"contours = d3.contours()\n.size([width, height])\n.thresholds([1, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250])\n(contourData)\n.filter(d => d.coordinates.length > 0)\n.map(d => turf.simplify(d, {\n tolerance,\n highQuality: true\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {width, height, contourData} with {blur} from '@sahilchinoy/contour-map'","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {slider, color} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}