2e:null 2f:["$","title",null,{"children":"Hillshade maps with line fills | Ingrid Burrington | Observable"}] 34:[] 32:{"id":"5a099bfb2b127237","slug":"mvt-parsing-hillshade-maps","title":"Hillshade maps with line fills","thumbnail":"5d27d107ba7657bbd1b93b34805a41e482b5894204cacf7abc21acf466f64bce","access_level":"public","create_time":"$D2021-12-16T23:06:26.544Z","update_time":"$D2021-12-25T21:57:22.163Z","view_time":null,"first_public_time":"$D2021-12-16T23:14:01.957Z","has_unpublished_edits":null,"fork":{"id":"99a2c618a9556232","slug":"mvt-parsing-contour-maps","title":"MVT parsing contour maps","owner":{"id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington"}},"stars":3,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":1812,"publish_version":1812,"role":null,"authored":false,"authors":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null}],"members":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Hillshade maps with line fills","cells":[{"id":0,"value":"md`# Hillshade maps with line fills`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`Mostly just wanted to experiment with Mapbox's terrain tiles. Makes giant SVGs, probably going to use them for plotter art?? Borrowing from/building on [@fil's experiment with filling polygons with lines](https://observablehq.com/@fil/fill-with-stroke).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"justlines = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"opacitycheck = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"byclassmap = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"set = Array.from(new Set(hillshade.map((e) => e.properties.level).sort()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"color = [\"#23171b\",\"#453494\",\"#4a55d8\",\"#4076f5\",\"#3297f7\",\"#27b5e7\",\"#26d0cd\",\"#2ee5ae\",\"#42f48f\",\"#5ffc73\",\"#82fd5b\",\"#a7f648\",\"#cbe839\",\"#e9d42f\",\"#feb927\",\"#ff9b21\",\"#ff7a1c\",\"#f15816\",\"#d6390f\",\"#b71f08\",\"#9c0f00\",\"#900c00\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"hillshade = tiles\n .map((t) => t.data.hillshade)\n .map((h) => h.features)\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"test01 = turf.featureCollection(\n poly.map((p) =>\n turf.multiPolygon(clip.union(p.map((l) => l.geometry.coordinates)), {\n level: p[0].properties.level\n })\n )\n)\n// turf.multiPolygon(\n// clip.union(polygons[0][1].map((p) => p.geometry.coordinates))\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"test02 = turf.featureCollection(\n polygons_class.map((p) =>\n turf.multiPolygon(clip.union(p.map((l) => l.geometry.coordinates)), {\n level: p[0].properties.level\n })\n )\n)\n// turf.multiPolygon(\n// clip.union(polygons[0][1].map((p) => p.geometry.coordinates))\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"poly = hs_nest\n .map((e) =>\n e.values.map((v) =>\n v.values\n .map((h) => {\n if (h.geometry.type != \"Polygon\") {\n return turf.flatten(h).features.flat();\n } else {\n return h;\n }\n })\n .flat()\n )\n )\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"polygons_class = hs_nest_class.map((e) =>\n e.values\n .map((h) => {\n if (h.geometry.type != \"Polygon\") {\n return turf.flatten(h).features.flat();\n } else {\n return h;\n }\n })\n .flat()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"hs_nest_class = d3\n .nest()\n .key(function (d) {\n return d.properties.class;\n })\n .entries(hillshade)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"hs_nest = d3\n .nest()\n .key(function (d) {\n return d.properties.class;\n })\n .key(function (d) {\n return d.properties.level;\n })\n .entries(hillshade)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"tiles = Promise.all(tile().map(async t => {\n let data = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`))).layers\n \n t.data = Object.keys(data).reduce((initialData, key) => {\n initialData[key] = {\n type: \"FeatureCollection\",\n features: [...Array(data[key].length).keys()].map((item, i) => {\n let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z)\n return feature\n })\n }\n\n return initialData\n }, {})\n \n return t;\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"projection.preclip(clipPolygon)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Protobuf = require('pbf')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@2.1.2\", \"d3-collection@latest\", \"d3-geo-polygon@latest\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"projection = d3\n .geoMercator()\n .center([-65.995, -18.927])\n .scale(1000000 / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0,0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"clip = require(\"polygon-clipping@0.15.3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"turf = require(\"@turf/turf@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"merge = require(\"https://bundle.run/@mapbox/geojson-merge@1.1.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"lint = require(\"https://bundle.run/@mapbox/geojsonhint@3.0.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"import { intersections } from \"@fil/fill-with-stroke\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"//generalizing from @fil's version\n\nfunction renderHatches(data, step, color) {\n //d3.select(m).select(\"path.lines\").remove();\n\n const poly = polygons(projection, data);\n\n const lines = [];\n\n for (let y = 0; y < width; y += step) {\n let A = intersections(poly, y);\n for (let i = 0; i < A.length - 1; i += 2) {\n if (A[i + 1] - A[i] > 1 * step)\n lines.push({\n x1: A[i] + step * 0.5,\n x2: A[i + 1] - step * 0.5,\n y1: y,\n y2: y\n });\n }\n }\n return ` `M${[d.x1, d.y1]}L${[d.x2, d.y2]}`)\n .join(\"\")} stroke=${color} stroke-opacity=0.5 >`;\n // d3.select(m)\n // .append(\"path\")\n // .attr(\"d\", lines.map((d) => `M${[d.x1, d.y1]}L${[d.x2, d.y2]}`).join(\"\"))\n // .classed(\"lines\", true)\n // .attr(\"stroke\", \"brown\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"polygons = function (projection, data) {\n const path = d3.geoPath(projection);\n\n return path(data)\n .split(/M/)\n .filter((d) => d)\n .map((d) =>\n d.split(/L/).map((d) => d.split(/,/).map((d) => parseFloat(d)))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"