2e:null 2f:["$","title",null,{"children":"IDing intersections in vector tiles | Ingrid Burrington | Observable"}] 34:[] 32:{"id":"28fd8675bbe56e35","slug":"iding-intersections-in-vector-tiles","title":"IDing intersections in vector tiles","thumbnail":"91a162a21b0c77beebdee5311e92f138fa9aa3c8c9b4008e032d3dcdcc09fb77","access_level":"public","create_time":"$D2020-06-02T02:07:19.464Z","update_time":"$D2020-06-03T19:23:03.387Z","view_time":null,"first_public_time":"$D2020-06-02T13:20:29.164Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":403,"publish_version":403,"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":4,"collection":null,"type":"notebook","body":{"title":"IDing intersections in vector tiles","cells":[{"id":0,"value":"md`# IDing intersections in vector tiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md `## Boring stuff setting up tiles`","pinned":true,"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]) //https://github.com/d3/d3-geo#projection_center, does what it says on the tin\n .scale((1 << 22) / (2 * Math.PI)) // this number is actually 333772.1072150545. Why is it this number? I am assuming this has something to do with projecting from a...circle? Because we're dividing by tau?\n//https://github.com/d3/d3-geo#projection_scale\n .translate([width / 2, height / 2]) //https://github.com/d3/d3-geo#projection_translate. this feature defaults to translating the center point of your map against a 960x500 area svg? I don't really know why that size. What we have here will translate our map's center to the exact center of the div.\n .precision(0) //https://github.com/d3/d3-geo#projection_precision, d3 uses something called adaptive sampling to improve rendering and performance (see https://bl.ocks.org/mbostock/3795544), this definitely falls into \"I sort of understand this math, Mike\" territory","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() // based on the following parameters, which tiles will I need to fetch?\n .size([width, height]) //it's going to fill this space\n .scale(projection.scale() * 2 * Math.PI) // again, I am not 100% sure I know what's going oin\n .translate(projection([0, 0])) //don't change anything from the projection","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`); // map the tiles returned by tile() to the tile API endpoint\n return d; // look at the different items that are part of the output data!! so many\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.map(t => t.data.roads.features.filter(f => f.properties.kind != \"ferry\" && f.properties.kind != \"rail\" )).filter(m => m.length > 0).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md `## for each road in tile, identify overlaps`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"test = function(){\n let index = []\n roads.forEach(function(r){\n let obj = {}\n obj.name = r.properties.name\n obj.points = []\n obj.id = r.properties.id\n roads.forEach(function(ki,i){\n if (ki.properties.id != r.properties.id && ki.properties.name !== undefined && r.properties.name !== undefined){\n let int = turf.lineIntersect(r, ki);\n if (int.features.length > 0) {\n int.features.forEach(function(inter){\n if (inter.properties){\n inter.properties.intersection = ki.properties.name\n inter.properties.ID = ki.properties.id\n obj.points.push(inter)\n }\n })\n index.push(obj)\n }\n }\n}\n )\n })\n return index}();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md `## Let's see the intersection points we've generated`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"makePoints = function(){\n let arr = [];\n for (var i = 0; i < test.length; i++){\n let obj = test[i].points[0];\n arr.push(obj);\n }\n let geojson = {};\n geojson.type = \"FeatureCollection\";\n geojson.features = arr;\n return geojson;\n}();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md `## Turning the points into Lines`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"makeLineString = function(){\n let arr = []\n for (var i = 0; i < test.length; i++) {\n for(var j = 0; j < test[i].points.length; j++){\n if (test[i].points[j+1] !== undefined){\n let obj = {}\n obj.type= \"Feature\",\n obj.properties = {};\n obj.properties.path = `${test[i].points[j].properties.intersection} and ${test[i].points[j+1].properties.intersection}`\n obj.geometry = {};\n obj.geometry.type = \"LineString\";\n obj.geometry.coordinates= [test[i].points[j].geometry.coordinates, test[i].points[j+1].geometry.coordinates]\n arr.push(obj)\n }\n }\n \n} let geojson = {};\n geojson.type = \"FeatureCollection\";\n geojson.features = arr;\n return geojson;\n}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"d3colors = d3.quantize(d3.interpolateHcl(\"cyan\", \"hotpink\"), 10)","pinned":true,"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":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":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"