2f:null 30:["$","title",null,{"children":"IDing intersections in vector tiles, part 3 | Ingrid Burrington | Observable"}] 35:[] 33:{"id":"4a7352d3b09f5188","slug":"iding-intersections-in-vector-tiles-part-3","title":"IDing intersections in vector tiles, part 3","thumbnail":"40435397dc0dd14986b0fa3d8b3b45052fb908163afac4b3a448319bcf7f4f58","access_level":"public","create_time":"$D2020-06-26T16:23:30.778Z","update_time":"$D2020-07-23T18:00:29.298Z","view_time":null,"first_public_time":"$D2020-06-27T14:32:40.190Z","has_unpublished_edits":null,"fork":{"id":"28fd8675bbe56e35","slug":"iding-intersections-in-vector-tiles","title":"IDing intersections in vector tiles","owner":{"id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington"}},"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":1123,"publish_version":1123,"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":0,"collection":null,"type":"notebook","body":{"title":"IDing intersections in vector tiles, part 3","cells":[{"id":0,"value":"md`# IDing intersections in vector tiles, part 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md `## Boring stuff setting up tiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"projection = d3.geoMercator()\n .center([-73.9888682,40.6916651])\n .scale((1 << 24) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .precision(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"path = d3.geoPath(projection) //https://github.com/d3/d3-geo#paths returns the paths applied to ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"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":30,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=ztkh_UPOQRyakWKMjH_Bzg`); \n return d; \n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md `## filter roads to remove ferry routes and rail`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"roads = tiles\n.map(t => t.data.roads.features\n .filter(f => f.properties.kind != \"ferry\" && f.properties.kind != \"rail\" && f.properties.kind != \"highway\"))\n .filter(m => m.length > 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md `## to split roads, we need LineStrings so turn MultiLineStrings into LineStrings (probably don't need to do this in 2 steps)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"multilines = roads.map(r=> r.map(l => { if (l.geometry.type == \"MultiLineString\"){ return l.geometry.coordinates.map(fm => turf.lineString(fm, {id: l.properties.id})).flat()} else { return l}}).flat()).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"longLines = idsPrime.map(i => multilines.filter(m => m.properties.id == i).map(a => turf.combine(a))).flat().map(a => a.features.map(f=> f.geometry.coordinates.map(fm => turf.lineString(fm))).flat()).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"md `## testing thing, making a collection of points that mark where roads intersect`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"points = longLines.map(m => longLines.map(l => turf.lineIntersect(l, m)).filter(f => f.features.length > 0)).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md `## find roads that cross other roads`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"test = function(){\n let index = []\n longLines.forEach(function(r){\n // find roads that cross road\n let crosses = longLines.filter(m => turf.booleanCrosses(m, r)) \n //if a road does not cross any other road (apparently a thing??), push to array anyway\n if (crosses.length == 0){\n r.properties.length = turf.length(r)\n index.push(r)\n // split all roads that do have crossing roads at intersection\n } else {\n let feat = crosses.map(s => turf.lineSplit(r,s))\n let t = feat.map(f => f.features.map((m) => { \n m.properties.id = r.properties.id; \n m.properties.name = r.properties.name; \n m.properties.length = turf.length(m); \n return m })).flat()\n index.push(t)\n }\n })\n //this is lazy but for now: using sort to see shortest paths on map\n return index.flat().sort((a,b) => {return turf.length(a) - turf.length(b)}).reverse()}();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"md `## sloppy deduplication idea come back to this later`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"idsPrime = Array.from(new Set(multilines.map(m => m.properties.id)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"removeLongestLine = function(){\n let arr = [];\n idsPrime.forEach(i => {\n let demo = test.filter(t => t.properties.id == i)\n if (demo.length < 2){arr.push(demo)}\n let remove = demo.filter(m => turf.length(m)!= Math.max(...demo.map(m => turf.length(m))))\n arr.push(remove)\n })\nreturn arr.flat()\n}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"md ` ## cross-streets used for testing stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"crossHenry = henry.map(h => multilines.filter(l => turf.booleanCrosses(h,l) == true).map(m => turf.lineSplit(h, m)).map(a => a.features).flat()).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"henry = roads.flat().filter(f => f.properties.name == \"Henry St.\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"joralemon = roads.flat().filter(f => f.properties.name == \"Joralemon St.\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md `## sanity check with an actual map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"testcolors = d3.quantize(d3.interpolateHcl(\"cadetblue\", \"thistle\"), 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"newcolors = d3.quantize(d3.interpolateHcl(\"chartreuse\", \"orange\"), 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"d3colors = d3.quantize(d3.interpolateHcl(\"cyan\", \"hotpink\"), 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\",\"d3-scale-chromatic@1\", \"d3-interpolate@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"turf = require(`https://unpkg.com/@turf/turf/turf.min.js`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 34:"$33:body"