25:null 26:["$","title",null,{"children":"IDing intersections in vector tiles part 2–the streetening | Ingrid Burrington | Observable"}] 2b:T448,test = function(){ let index = [] lineslines.features.forEach(function(r, idx){ let obj = r obj.points = [] let set = new Set() lineslines.features.forEach(function(ki,i){ if (ki.properties.name != r.properties.name){ let int = turf.lineIntersect(r, ki); if (int.features.length > 0) { let intString = `${ki.properties.name} and ${r.properties.name}` if (!set.has(intString)){ set.add(intString) int.features[0].properties = {} int.features[0].properties.int1 = ki.properties.name int.features[0].properties.int2 = r.properties.name // console.log(int.features[0]) obj.points.push(int.features[0]) // int.features.forEach(function(inter){ // inter.properties = {} // inter.properties.int1 = ki.properties.name // inter.properties.int2 = r.properties.name // obj.points.push(inter) //}) }} } }) obj.points.sort((a,b) => turf.distance(obj.points[0],a)-turf.distance(obj.points[0],b)) index.push(obj) }) return index}();2c:[{"id":"1a273fc214adbfd7dde45619d807a2b2d602bcb7d8b986c73a5e4b596ada8af3c98d895527ef3c6a5e73f5638f0d627ced69c7e38fd013b4694d841dbf7172c3","href":"https://static.observableusercontent.com/files/1a273fc214adbfd7dde45619d807a2b2d602bcb7d8b986c73a5e4b596ada8af3c98d895527ef3c6a5e73f5638f0d627ced69c7e38fd013b4694d841dbf7172c3","name":"newyork.json","type":"application/json","lastModified":1591383664049.51,"size":6056984}] 29:{"id":"3bdb2c927e1a604e","slug":"iding-intersections-in-vector-tiles/2","title":"IDing intersections in vector tiles part 2–the streetening","thumbnail":"94158f69401a306bb584a7eae73414f1ccda0919875abcb061536a05758e57a5","access_level":"public","create_time":"$D2020-06-03T17:18:13.032Z","update_time":"$D2020-06-23T17:25:51.768Z","view_time":null,"first_public_time":"$D2020-06-04T01:43:25.196Z","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":1770,"publish_version":1770,"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 2–the streetening","cells":[{"id":0,"value":"md`# IDing intersections in vector tiles part 2–the streetening`","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 << 24) / (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\" && f.properties.kind != \"highway\" && f.properties.kind != undefined)).filter(m => m.length > 0).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"md `## helpful function for dealing with weird arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"\nchunk = (arr, size) =>\n Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>\n arr.slice(i * size, i * size + size)\n );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"md `## deduplicated list of every street name in tile view with collision ID`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"names = function(){\n let arr = Array.from(new Set(tiles\n .map(t => t.data.roads.features\n .filter(f => f.properties.kind != \"ferry\" && f.properties.kind != \"rail\" && f.properties.kind != \"highway\" && f.properties.kind != undefined)\n .map(m => `${m.properties.name},${m.properties.collision_rank}`)).flat()))\n\n for (let i=0; i < arr.length; i++){\n arr[i] = arr[i].split(',')\n if (arr[i].length > 2){\n arr[i] = [`${arr[i][0]} ${arr[i][1]}`,arr[i][2].trim()]\n }\n }\n return arr\n}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"md `## using deduped name list, turn tiled road data and make into single LineStrings for each street (collision ID should prevent errors here but turns out the data has errors lol)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"lineslines = function(){\n let feat = []\n names.forEach(function(n){\n let arr = chunk(tiles.map(t => t.data.roads.features.filter(f => f.properties.name == n[0] && f.properties.collision_rank == n[1])).flat().map(s => s.geometry.coordinates).flat(4),2)\n if (arr.length > 0){\n let obj = {}\n obj.type=\"Feature\"\n obj.properties = {}\n obj.properties.name = n[0]\n obj.properties.rank = n[1]\n obj.geometry = {}\n obj.geometry.type = \"LineString\"\n obj.geometry.coordinates= arr\n feat.push(obj)\n }\n })\n let geojson = {};\n geojson.type = \"FeatureCollection\";\n geojson.features = feat;\n return geojson;\n}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md `## find intersections on all roads`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"test[2].points","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"// cleanup = function(){\n// for (let i=0; i < test.length; i++){\n// for (let j = 0; test[i].points; j++){\n// if (test[i].points[j+1] !== undefined){\n// if (turf.distance(test[i].points[j], test[i].points[j+1]) < .01){\n// test[i].points.splice(test[i].points[j+1], 1) \n// }\n// }\n// }\n// }\n// return test\n// }()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"makeLines = function(){\n let arr = []\n //loop through every object with intersection points\n for (var i = 0; i < test.length; i++) {\n //for each object, loop through the intersection points\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].properties.name\n obj.properties.ids = [j, j+1]\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} return arr;\n}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"makePoints = function(){\n let arr = [];\n for (var i = 0; i < test.length; i++){\n let obj = test[i].points;\n arr.push(obj);\n }\nreturn arr.flat()} ();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"bbox = function(){\nlet bb = {}\nbb.type = \"FeatureCollection\"\nbb.features = []\nlet obj = {}\nobj.geometry = {}\nobj.type = \"Feature\"\nobj.geometry.type = \"Polygon\"\n // [x1,y1][x2,y1][x2,y2][x1,y2][x1,y1]\nobj.geometry.coordinates = [[projection.invert([0,0]), projection.invert([width,0]), projection.invert([width,600]), projection.invert([0,600]),projection.invert([0,0])]]\nbb.features.push(obj)\nreturn bb\n}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"ring = FileAttachment('newyork.json').json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"ringbbox = turf.bbox(ring)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"projection.invert([0,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"projection.invert([width,height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"ringsample = function(){\n let arr = []\n let r = turf.pointsWithinPolygon(ring, bbox.features[0])\n r.features.forEach(function(ri){\n let d = turf.circle(ri, .001);\n arr.push(d)\n }) \nreturn arr}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"md `## find overlaps between block-level lines and camera locations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"md `for each line, check each camera to see if it intersects. create array of cameras that intersect, use length of camera array to determine color value for street`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"overlaps = function(){\n let arr = []\n makeLines.forEach(function(l){\n let lineobj = l\n lineobj.points = []\n ringsample.forEach(function(r){\n let dist = turf.lineIntersect(l, r);\n if (dist.features.length > 0){\n lineobj.points.push(dist)\n }\n })\n if (lineobj.points.length > 0){ arr.push(lineobj)} \n })\nreturn arr}()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"offset = turf.lineOffset(overlaps[7], .02, {units: 'inches'});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"hm = test[39].points.sort((a,b) => turf.distance(test[39].points[0],a)-turf.distance(test[39].points[0],b)).map(p => projection(p.geometry.coordinates))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"point = function(){\n let arr = []\n overlaps.forEach(function(o){\n arr.push(o.points)\n })\nreturn arr.flat(); }()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"tiles[0].data.roads","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"map = svg`