2e:null 2f:["$","title",null,{"children":"MVT parsing contour maps | Ingrid Burrington | Observable"}] 34:[] 32:{"id":"99a2c618a9556232","slug":"mvt-parsing-contour-maps","title":"MVT parsing contour maps","thumbnail":"6644c083d48c5ded1b1e710f0b234a7ee3ea5bf69d728993c4bb3e9315d4b5a4","access_level":"public","create_time":"$D2021-03-03T14:10:33.148Z","update_time":"$D2021-12-24T19:02:08.053Z","view_time":null,"first_public_time":"$D2021-04-19T23:46:51.132Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":1250,"publish_version":1250,"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":"MVT parsing contour maps","cells":[{"id":0,"value":"md`# MVT parsing contour maps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`mostly just messing around with Mapbox contour tile data. Using Mike Fogel's [polygon clipping](https://github.com/mfogel/polygon-clipping) library to join tiles by elevation in an attempt to minimize the clunky tile grid. Still kind of an issue but a lot less annoying!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"groupedmap = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"clipmap = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"polygons = turf.featureCollection(\n entries\n .map((e) =>\n e.values\n .map((v) => {\n if (v.geometry.type != \"Polygon\") {\n return turf.flatten(v).features.flat();\n } else {\n return v;\n }\n })\n .flat()\n )\n .map(\n (p) =>\n clip\n .union(p.map((m) => m.geometry.coordinates))\n .map((e) =>\n turf.polygon(e, { ele: p.map((m) => m.properties.ele)[0] })\n )\n // }))\n )\n .flat()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"nestedclipped = d3\n .nest()\n .key(function (d) {\n return d.properties.ele;\n })\n .entries(polygons.features)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"entries = d3\n .nest()\n .key(function (d) {\n return d.properties.ele;\n })\n .entries(ele)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"ele = contour.map(c => c.features.filter(f => f.id > 1)).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"set = Array.from(new Set(ele.map(e => e.properties.ele).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":50,"value":"contour = tiles.map((t) => t.data.contour)","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":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\")","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(100000 / (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"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"