31:T665,html`

${heatmap(grid, { width: w, color: (t) => t === 0 ? "lightgrey" // See level : d3[`interpolate${sequentialColorSelector}`]( invertColorScheme ? 1 - t : t ), dither: false, contours: showContoursHeatmap, lineVertical: i2 })}

${drawHillshade( azimutAnimate, elevationAnimate )}

Sierra Nevada

Lat: ${ SNlocation[0] } Long: ${SNlocation[1]}

Granada - Spain

Sun azimuth ${azimutAnimate}º

Sun elevation ${elevationAnimate}º

${sunScheme}

`32:T61c,sunScheme = { // Adapting https://observablehq.com/@sahilchinoy/hillshader const svg = d3 .create("svg") .attr("width", 250) .attr("height", 120) .attr("transform", "scale(0.5)") // TODO: Improve this. Just a quick solution .style("font-style", "italic") .style("font-size", "12px"); svg .append("circle") .attr("cx", 50) .attr("cy", 70) .attr("r", 40) .style("stroke", "lightgrey") .style("fill", "none"); const sunAzimuth = (azimutAnimate * Math.PI) / 180; const dx = Math.cos(sunAzimuth - Math.PI / 2) * 40; const dy = Math.sin(sunAzimuth - Math.PI / 2) * 40; svg .append("line") .attr("x1", 50) .attr("x2", 50 + dx) .attr("y1", 70) .attr("y2", 70 + dy) .style("stroke", "white") .style("stroke-width", 2); svg .append("circle") .attr("cx", 50 + dx) .attr("cy", 70 + dy) .attr("r", 5) .attr("fill", "gold"); const g = svg.append("g").attr("transform", "translate(150, 30)"); g.append("path") .attr("d", "M80 80 a 80 80 0 0 0 -80 -80") .style("fill", "none") .style("stroke", "lightgrey"); const sunElev = (elevationAnimate * Math.PI) / 180; const dx2 = Math.cos(sunElev) * 80; const dy2 = Math.sin(sunElev) * 80; g.append("line") .attr("x1", 0) .attr("y1", 80) .attr("x2", dx2) .attr("y2", 80 - dy2) .style("stroke", "white") .style("stroke-width", 2); g.append("circle") .attr("cx", dx2) .attr("cy", 80 - dy2) .attr("r", 5) .attr("fill", "gold"); return svg.node(); }33:[{"id":"43c59eae0784c03fcc9cc64dfb9a34013b20be4fdbafa081d951ae691615bb88f47b2ac94308939337663d8fbf22d4d4118add96557367da9af99a7acdd04fbf","href":"https://static.observableusercontent.com/files/43c59eae0784c03fcc9cc64dfb9a34013b20be4fdbafa081d951ae691615bb88f47b2ac94308939337663d8fbf22d4d4118add96557367da9af99a7acdd04fbf","name":"untitled (10).png","type":"image/png","lastModified":1637429286603.977,"size":874044},{"id":"8e09a99680698e44e4c3592ace540949a20b3bd9b291c181e9e2337cca771c2f7d8e48a50ed1be808c1bfd8f3f4d64d007cdd20e221a0e49002d608a1e0ab780","href":"https://static.observableusercontent.com/files/8e09a99680698e44e4c3592ace540949a20b3bd9b291c181e9e2337cca771c2f7d8e48a50ed1be808c1bfd8f3f4d64d007cdd20e221a0e49002d608a1e0ab780","name":"SN-DEMx4x2.png","type":"image/png","lastModified":1637418138540.112,"size":1291382},{"id":"f638d0ee4f66b082077db2924e0e1b5a8735e79bcc3b76d674e12291c6acb63b342d5a4b3d29c7810649df31f161351d7e71c94d5d9200989f74af41a973a6ed","href":"https://static.observableusercontent.com/files/f638d0ee4f66b082077db2924e0e1b5a8735e79bcc3b76d674e12291c6acb63b342d5a4b3d29c7810649df31f161351d7e71c94d5d9200989f74af41a973a6ed","name":"A04-low.jpg","type":"image/jpeg","lastModified":1637418379600.295,"size":1044269},{"id":"1339e1588725065880629f869a3dc4f9e205c816cb2dec417d4893cca02b454c03746bb388e5c53c512e59609bd310bbca40bcddfe1384c553b13f84c370f390","href":"https://static.observableusercontent.com/files/1339e1588725065880629f869a3dc4f9e205c816cb2dec417d4893cca02b454c03746bb388e5c53c512e59609bd310bbca40bcddfe1384c553b13f84c370f390","name":"Screenshot 2021-11-20 at 15.29.36.png","type":"image/png","lastModified":1637418593470.521,"size":5200626},{"id":"8d01cd9ea07ce43f47a1d811487cdb92d4eac71f801f2b676c7bbdd5d8bb220458d0e55cc73bc84b806fca4c879079b2e511c9fd28f35953ad6fc36776d402ea","href":"https://static.observableusercontent.com/files/8d01cd9ea07ce43f47a1d811487cdb92d4eac71f801f2b676c7bbdd5d8bb220458d0e55cc73bc84b806fca4c879079b2e511c9fd28f35953ad6fc36776d402ea","name":"Screenshot 2021-11-20 at 15.25.35.png","type":"image/png","lastModified":1637418395402.364,"size":1030778},{"id":"ebe6bf99f0d83d66ed865a072e9d5301e845cbed62ca03cdd74d41a00be47c21c4eaa9e562e4b314469c93a2bea9fe5dbdf7348c983727fd4fa9c40c07f09b92","href":"https://static.observableusercontent.com/files/ebe6bf99f0d83d66ed865a072e9d5301e845cbed62ca03cdd74d41a00be47c21c4eaa9e562e4b314469c93a2bea9fe5dbdf7348c983727fd4fa9c40c07f09b92","name":"Screenshot 2021-11-20 at 15.24.43.png","type":"image/png","lastModified":1637418395231.68,"size":1111530}] 2f:{"title":"#30DayMapChallenge #21 Elevation","cells":[{"id":0,"value":"# #30DayMapChallenge #21 Elevation\n_Day 21 of [#30DayMapChallenge](https://observablehq.com/collection/@ambassadors/30daymapchallenge): Sweet hillshades, beautiful contours, high mountains or low valleys. DEM, DSM or something else._\n\nHaving lots of fun with Observable, embedding and readapting [Fil](https://observablehq.com/@fil) and [Sahil Chinoy](https://observablehq.com/@sahilchinoy) great notebooks 🙌🏻 to play around with my hometown [Sierra Nevada](https://www.juntadeandalucia.es/medioambiente/portal/web/ventanadelvisitante/detalle-buscador-mapa/-/asset_publisher/Jlbxh2qB3NwR/content/sierra-nevada-12/255035) mountains profile on a sort of colour party of dancing shadows :) ","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"viewof i2 = Scrubber(d3.range(0, h, 5), {\n autoplay: true,\n alternate: true,\n format: (d) => `Elevation scan (y): ${d}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"Plot.areaY(lineModif).plot({\n height: 150, // Affects the scale\n width: w,\n x: { axis: null },\n y: { domain: [0, 4000], label: \"Elevation (m)\", ticks: 5, grid: true }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"overlayDiv = html`\n\n\n

${colorPalette}

${divOverlay}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"👆🏻 Choose a **color scheme** by clicking on the thumbnails 👆🏻","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"viewof invertColorScheme = Inputs.toggle({\n label: \"Invert color scheme?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof showContoursHeatmap = Inputs.toggle({\n label: \"Show contours ? (🚨 SLOW)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"viewof azimutAnimate = Scrubber(d3.range(0, 360, 20), {\n delay: 1000,\n autoplay: true,\n loop: true,\n format: (d) => `Sun azimut: ${d}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof elevationAnimate = Scrubber(d3.range(0, 90, 10), {\n initial: 4,\n delay: 500,\n autoplay: false,\n format: (d) => `Sun elevation: ${d}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"## Process","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"### 1. Capture DEM from Sierra Nevada (ES) area.\nFollowed @Fil notebook on [Nextzen’s terrarium](https://observablehq.com/@fil/reproject-elevation-tiles-detail) (here is my [forked copy](https://observablehq.com/d/4ca017d319df45f8) with the coordinates I needed):","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"demModif = FileAttachment(\"SN-DEMx4x2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"### 2. Getting the contours and heatmaps based on DEM data.\nFollowed @Fill notebook [Deriving Pantelleria](https://observablehq.com/@visionscarto/deriving-pantelleria) to get the heatmaps and contours, using my DEM data instead:","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"import { grid, w, h, small, smaller } with {\n demModif as dem0,\n lineModif as line\n} from \"@visionscarto/deriving-pantelleria\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1126,"value":"I wanted @Fil's line profile to become a moving scan, so I integrated @MikeBostock srubber on it:","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"lineModif = grid.subarray(w * i2, w * (i2 + 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"Also forked @Fil's [heatmap notebook](https://observablehq.com/@fil/heatmap) to draw the scanning line on it on [my forked version](https://observablehq.com/@carmen-tm/fill-heatmap-version):","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"import { heatmap } from \"@carmen-tm/fill-heatmap-version\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"heatmap(grid, {\n width: w,\n color: (t) =>\n t === 0\n ? \"lightgrey\"\n : d3[`interpolate${sequentialColorSelector}`](\n invertColorScheme ? 1 - t : t\n ),\n dither: false,\n contours: showContoursHeatmap,\n lineVertical: i2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"/*viewof sequentialColorSelector = Inputs.select(sequentialArray, {\n label: \"Color scheme\",\n value: \"RdPu\"\n})*/\nsequentialColorSelector = name","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"### 3. Just enjoy painting my mountains with many color palettes 😋🌈 ","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"sequentialArray = [\n \"BuGn\",\n \"BuPu\",\n \"GnBu\",\n \"OrRd\",\n \"PuBuGn\",\n \"PuBu\",\n \"PuRd\",\n \"RdPu\",\n \"YlGnBu\",\n \"YlGn\",\n \"YlOrBr\",\n \"YlOrRd\",\n \"Cividis\",\n \"Viridis\",\n \"Inferno\",\n \"Magma\",\n \"Plasma\",\n \"Warm\",\n \"Cool\",\n \"CubehelixDefault\",\n \"Turbo\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"html`${sequentialArray.map((d, i) =>\n smaller(contourMapModif(grid, sequentialArray, i, showContoursHeatmap))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"I wanted to use those little maps thumbnails as a selector interface for the color palette. I don't have knowledge about `canvas`, so I decided to overlay a grid of `div` elements on another cell, and overlay them both. Is not 100% precise, but it works :)","pinned":false,"hidden":false,"mode":"md"},{"id":519,"value":"colorPalette = html`

${sequentialArray.map((d, i) =>\n smallest(\n contourMapModif(grid, sequentialArray, i, showContoursHeatmap),\n \"\",\n sequentialArray[i]\n )\n)}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"//TODO: Improve this. It's justs a quick solution to be improved, doesn't work well at any width.\ndivOverlay = {\n const div = d3.create(\"div\").style(\"width\", w);\n const elWidth = width / 8;\n const elHeight = elWidth / 2;\n\n const el = div\n .selectAll(\"div\")\n .data(sequentialArray)\n .join(\"div\")\n .style(\"display\", \"inline-block\")\n .style(\"width\", elWidth + \"px\")\n .style(\"height\", elHeight + \"px\")\n .style(\"margin\", 0)\n .style(\"padding\", 0)\n .attr(\"id\", (d) => d)\n .style(\"color\", \"white\")\n .style(\"border\", \"1px solid transparent\") // No perfect fit\n .style(\"cursor\", \"pointer\")\n .on(\"click\", function (e, d) {\n mutable name = d;\n })\n .append(\"p\")\n .text((d) => d)\n .style(\"text-align\", \"center\")\n .style(\"padding-top\", \"20px\");\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"mutable name = \"PuBu\" // Default value","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"// Based on smaller function at https://observablehq.com/@visionscarto/deriving-pantelleria\nfunction smallest(canvas, style = \"\", idEl = \"\") {\n return html`

${Object.assign(\n canvas,\n {\n style: `vertical-align: bottom;max-width: ${\n ((width / 8) | 0) - 1\n }px;${style};`\n }\n )}\n\n

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"contourMapModif = (grid, colorArray, myIndex, drawContours) =>\n heatmap(grid, {\n width: w,\n color: d3[`interpolate${colorArray[myIndex]}`],\n contours: drawContours // depends on toggle selector\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"### 4. Play with shadows as well\nFollowed @sahilchinoy great [hillshader](https://observablehq.com/@sahilchinoy/hillshader) notebook to get the shadows on my map. Again, I want to see them moving, so use other scrubbers for azimuth and latitude settings.","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"import { drawHillshade, drawRow } with {\n myDem as molokai,\n azimutAnimate as azimuth,\n elevationAnimate as elevation,\n w as width,\n h as height\n} from \"@sahilchinoy/hillshader\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"myDem = FileAttachment(\"untitled (10).png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"drawHillshade(azimutAnimate, elevationAnimate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1029,"value":"**Final image settings:**","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"// https://developer.mozilla.org/es/docs/Web/CSS/mix-blend-mode\nblendModesArray = [\n \"normal\",\n \"multiply\",\n \"screen\",\n \"overlay\",\n \"darken\",\n \"lighten\",\n \"color-dodge\",\n \"color-burn\",\n \"hard-light\",\n \"soft-light\",\n \"difference\",\n \"exclusion\",\n \"hue\",\n \"saturation\",\n \"color\",\n \"luminosity\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"viewof blendModeSelector = Inputs.radio(blendModesArray, {\n label: \"Blend mode\",\n value: \"multiply\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof hillshadeOpacity = Inputs.range([0, 1], {\n label: \"Hillshade opacity\",\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof brightnessFilterHillshade = Inputs.range([100, 150], {\n label: \"Brightness filter hillshade\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"viewof brightnessFilterHeatmap = Inputs.range([100, 150], {\n label: \"Brightness filter heatmap\",\n value: 120\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"viewof blurFilterHeatmap = Inputs.range([0, 20], {\n label: \"Blur filter heatmap\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof blurFilterHillshade = Inputs.range([0, 10], {\n label: \"Blur filter hillshade\",\n step: 0.1,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"### 5. I wanted to keep playing... but no time for more\nI wanted to connect all this with the sunpath diagram and real sun positions at Winter, Spring, Summer and Fall seasons of the year. Started to understand Mike's [Solar Path](https://observablehq.com/@mbostock/solar-path) and Vladimir Agafonkin [sun-position-in-900-bytes](https://observablehq.com/@mourner/sun-position-in-900-bytes) notebooks, but still a Work In Progress work 😅","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"SNlocation = [-3.4, 37.2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":".\n\n## Original idea: mountain profiles from tracks\n\nThinking about mountains and landscapes 🖤 made me want to revisit my old academic work to get my degree in architecture years ago about Sierra Nevada mountains in Granada, Spain. So I started diving into my old hard drives to find the files about all that. Amazing trip 😅\n\nFrom all the panels, I decided to revisit the one with my hiking tracks around Sierra Nevada, visiting all the shelters infraestructure. I liked the **track profiles** that I draw at that time, and decided that **my goal would be to learn how to redraw them on Observable with d3.js or Plot.js**, and ideally add an interface so people can upload and see their own tracks.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"### Old academic panels (2016):","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"#### A04: Personal trips to Sierra Nevada\nAnalyzing the shelters infraestructure and the ecosystems through each track","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"FileAttachment(\"A04-low.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"FileAttachment(\"Screenshot 2021-11-20 at 15.29.36.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"Zoom on a couple of profile examples:","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"FileAttachment(\"Screenshot 2021-11-20 at 15.24.43.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"FileAttachment(\"Screenshot 2021-11-20 at 15.25.35.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"#### Tools used at that time\n\n- _**Wikilok**_ - recording of all my tracks and download them in .kml format afterwards.\n- _**ArcGIS - ArcMap**_: to perform all the spatial analysis operations. Work with DEM file, add elevation to tracks based on DEM data, do all projections, etc. Also load the ecosystems shapefile areas. Projections and reprojections between all the differnet datasets done with ArcScene.\n- _**Rhinoceros and grasshopper3d**_: All geometric operations done with its programming visual interface. Draw all shelters. Load all geographic data and do stuff with it. Load the curves tracks, extract the ecosystems intersections with them, unroll them and draw the profiles, remapping the position of the shelters. Compute ecosystems percentages, etc.\n- _**Google Earth**_: I think I export the general 3d view with it, after loading all the relevant info (shapefiles, tracks...)\n- _**Indesign**_: layout the posters for printing.","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"### Getting messy and stuck\n\nI have started very excited, but after a while I realised that I don't have enough knowledge still to do that with my current programming skills with javaScript and d3.js. So after feeling a bit frustrated, I accept it, pospone my goal and thought about a plan B. I decided to focus on having fun learning from other's people amazing notebooks about DEM, elevations and shadows, and adapting them around my Sierra Nevada mountains. :)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}