31:[] 2f:{"title":"IDing intersections in vector tiles","cells":[{"id":0,"value":"md`# IDing intersections in vector tiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md `## Boring stuff setting up tiles`","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":169,"value":"md `## filter roads to remove ferry routes and rail`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":175,"value":"md `## for each road in tile, identify overlaps`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":398,"value":"md `## Let's see the intersection points we've generated`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":402,"value":"md `## Turning the points into Lines`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":299,"value":"d3colors = d3.quantize(d3.interpolateHcl(\"cyan\", \"hotpink\"), 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":15,"value":"turf = require(`https://unpkg.com/@turf/turf/turf.min.js`)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}