30:T56c,add_basemap = { let features = null; async function init() { features = {}; const tiles = await Promise.all( tile().map(async d => { d.data = await d3.json( `https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${ d.y }.json?api_key=${nextzenapikey}` ); // Sign up for an API key: https://www.nextzen.org return d; }) ); Object.keys(tiles[0].data).forEach(key => { features[key] = d3.merge(tiles.map(d => d.data[key].features)); }); Object.keys(features).forEach(key => { if (!key.match(/^projected/)) features[`projected_${key}`] = path.pointRadius(0.5)({ type: "FeatureCollection", features: features[key] }); }); return features; } yield (addLayer.basemap = async function(p) { const { g } = p; const strokes = { roads: "#ddd", water: "lightblue", transit: "pink", boundaries: "#888" }; if (!features) { features = await init(); } ["transit", "water", "roads", "boundaries"] .filter(d => basemap_options.indexOf(d) > -1) .forEach(key => { g.append("path") .attr("id", key) .attr("d", features[`projected_${key}`]) .attr("fill", "none") .attr("stroke", strokes[key] || "black"); }); }); }31:T6f9,add_densities = { const color = d3 .scaleLinear() .domain([0, max_duration]) .range(["white", densities_color]); function density_contour(data, duration) { const contours = d3 .contourDensity() .x(d => ((d.xy = projection([d.lon, d.lat])), d.xy[0])) .y(d => ((d.xy = projection([d.lon, d.lat])), d.xy[1])) .size([width, height]); return contours .thresholds([1e-3]) .cellSize(8) .weight(d => (duration - d.duration) / 800)( data.filter(d => d.duration < duration) )[0]; } let blobs = null; function init() { blobs = d3 .range(5) .map(i => ((10 + max_duration) * (6 - i)) / 6) .map(duration => ({ duration, path: rawpath(density_contour(data, duration)) })); return blobs; } yield (addLayer.densities = async function(p) { const { g } = p; g.selectAll("path") .data(blobs || init()) .enter() .append("path") .attr("d", d => d.path) .attr("id", d => `duration-${60 * Math.round(d.duration / 60)}`) .attr("fill", "none") .attr("stroke", d => color(d.duration)) .attr("stroke-width", 2); g.append("g") .selectAll("text") .data(blobs) .enter() .append("text") .text(d => `${(d.duration / 60) | 0} min`) .attr("id", d => "label-duration-" + d.duration) .attr("transform", d => { // position at bottom of the curve const coords = (d.path || "") .split(/L/) .map(d => d.match("([0-9.]+)[ ,]([0-9]+)")) .filter(d => !!d), min = d3.scan(coords.map(d => -+d[2])); return `translate(${coords[min][1]},${coords[min][2]})`; }) .attr("fill", "black"); return svg; }); }32:T4f0,add_largedensities = { const color = d3 .scaleLinear() .domain([1800, 3600]) .range(["royalblue", "skyblue"]); let data = null; function density_contour(data, duration) { const contours = d3 .contourDensity() .x(d => ((d.xy = projection([d.lon, d.lat])), d.xy[0])) .y(d => ((d.xy = projection([d.lon, d.lat])), d.xy[1])) .size([width, height]); return contours .thresholds([1e-3]) .cellSize(8) .weight(d => (duration - d.duration) / 800)( data.filter(d => d.duration < duration) )[0]; } let blobs = null; async function init() { data = await larger_data(); blobs = d3 .range(5) .map(i => 1810 + (1800 * (6 - i)) / 6) .map(duration => ({ duration, path: rawpath(density_contour(data, duration)) })); return blobs; } yield (addLayer.largedensities = async function(p) { const { g } = p; g.selectAll("path") .data(blobs || (await init())) .enter() .append("path") .attr("d", d => d.path) .attr("id", d => `duration-${60 * Math.round(d.duration / 60)}`) .attr("fill", "none") .attr("stroke", d => color(d.duration)) .attr("stroke-width", 2); return svg; }); }33:T70e,add_orientation = { let outsidepoints = null; const strokeWidth = 4; function init() { const t = performance.now(); const start_xy = projection(mutable start), i0 = d3.scan( contour.coordinates.map(b => -d3.polygonContains(b[0], start_xy)) ), blob = contour.coordinates[i0][0], alloutsidepoints = data .map((d, i) => { d.i = i; d.predecessor = predecessor(i); d.pos = projection([d.lon, d.lat]); d.r = walkingtime(max_duration - +d.duration) + pointradius + 1 * (strokeWidth / 2); return d; }) .filter(d => d.r > 0) .filter(d => !d3.polygonContains(blob, projection([d.lon, d.lat]))) .sort((a, b) => d3.descending(a.r, b.r)); // unclutter & return outsidepoints = alloutsidepoints.filter((d, i) => { return alloutsidepoints .slice(0, i - 1) .every( e => (e.pos[0] - d.pos[0]) ** 2 + (e.pos[1] - d.pos[1]) ** 2 >= (d.r + e.r) ** 2 ); }); console.warn("time orientation", ((performance.now() - t) | 0) / 1000); return outsidepoints; } yield (addLayer.orientation = async function(p) { const { g } = p; const arc = d3.arc(); g.selectAll("path") .data(outsidepoints || init()) .enter() .append("path") .attr("transform", d => `translate(${projection([d.lon, d.lat])})`) .attr("d", d => { const A = d.pos, B = projection([data[d.predecessor].lon, data[d.predecessor].lat]), angle = Math.atan2(A[1] - B[1], A[0] - B[0]); return halfCircle(d.r, angle); }) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", strokeWidth); }); }34:T4ff,function makeblob(duration, data, start, invert) { const w = width, h = height; const context = DOM.context2d(w, h, 1), rawpath = d3.geoPath().context(context), path = d3 .geoPath() .projection(projection) .context(context); context.fillRect(0, 0, w, h); context.fillStyle = "white"; data.forEach((d, i) => { const T = duration - +d.duration; if (T < 0) return; path.pointRadius(walkingtime(T) + pointradius); context.beginPath(), path({ type: "Point", coordinates: points[i] }), context.fill(); }); // Add the starting point (for alpha close to 0) path.pointRadius(pointradius); context.beginPath(), path({ type: "Point", coordinates: start }), context.fill(); if (invert) { context.beginPath(); rawpath({ type: "LineString", coordinates: [[0, 0], [w - 1, 0], [w - 1, h - 1], [0, h - 1], [0, 0]] }), (context.strokeStyle = "white"), context.stroke(); } const imgdata = context .getImageData(0, 0, w, h) .data.filter((_, i) => i % 4 === 0); if (invert) { imgdata.forEach((d, i) => (imgdata[i] = 255 - d)); } return d3 .contours() .thresholds([128]) .size([w, h])(imgdata)[0]; }35:[] 2e:{"title":"Isochrone of Paris, France","cells":[{"id":0,"value":"md`# Isochrone of Paris, France`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"md`----\n### Map & Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`Permalink: ${JSON.stringify(\n start\n)}. (*Click on the map to change starting point.*)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2196,"value":"MAP = {\n const svg = DOM.svg(width, height);\n yield svg;\n d3.select(svg)\n .append(\"style\")\n .attr(\"type\", \"text/css\")\n .text(css);\n d3.select(svg)\n .append(\"text\")\n .classed(\"loading\", true)\n .attr(\"x\", width / 2)\n .attr(\"y\", height / 2)\n .text(\"Loading…\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"viewof animate = checkbox([\"3D\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"viewof showvalues = {\n const options = components.split(/ /),\n active =\n JSON.parse(params.get(\"showvalues\")) ||\n \"blobs centralblob densities arcs orientation start\".split(/ /);\n return checkbox({\n options: options,\n value: active\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`${download(\n () => serialize(MAP),\n `${download_title}.svg`,\n \"Download SVG\"\n)} ${download(() => rasterize(MAP), `${download_title}.png`, \"PNG\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2456,"value":"md`----\n_Hillshading_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2433,"value":"viewof hillshade = checkbox({\n options: [\"Hillshade\"],\n description: \"Compute hillshading\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"HILLSHADED = {\n return hillshade ? MIXED(MAP) : md`…`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"viewof compositeAlpha = slider({\n min: 0,\n max: 1,\n value: 0.5,\n description: \"Drama\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2447,"value":"viewof compositeOperation = select({\n options: [\n \"luminosity\",\n \"source-over\",\n //\"source-in\",\n //\"source-out\",\n \"source-atop\",\n //\"destination-over\",\n //\"destination-in\",\n //\"destination-out\",\n //\"destination-atop\",\n \"lighter\",\n \"copy\",\n //\"xor\",\n \"multiply\",\n \"screen\",\n \"overlay\",\n \"darken\",\n //\"color-dodge\",\n \"color-burn\",\n \"hard-light\",\n \"soft-light\",\n \"difference\",\n \"exclusion\"\n //\"hue\",\n //\"saturation\",\n //\"color\"\n ],\n value: \"luminosity\", // lovely\n description: \"Composite operation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2462,"value":"md`${download(\n _ => new Promise(resolve => HILLSHADED.toBlob(resolve)),\n `${download_title}-hillshaded.png`,\n \"Download PNG\"\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2452,"value":"md`----\n_CSS definitions_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2264,"value":"css = `\nsvg {\n background: white;\n}\n\n#densities text {\n text-anchor: middle;\n fill: black;\n font-size: 12px;\n}\n\n#centralblob path {\n stroke-width: 3px;\n stroke: #888;\n opacity:1;\n stroke: #888;\n stroke-width: 2px;\n}\n\n#hagerstrand path {\n opacity:0.6;\n}\n\n#basemap path {\n stroke:#d5c0a2;\n}\n\n#start path { \n fill: #000;\n}\n\n#arcs path {\n stroke-dasharray: 3pt 4pt;\n stroke-width: 2pt;\n stroke-linecap: round;\n stroke: #000;\n opacity:1;\n}\n\n#densities path {\n stroke-width: 3px;\n fill: #cc3333;\n stroke: white;\n opacity:0.1;\n}\n\n#densities text {\n text-anchor: middle;\n fill: black;\n font-size: 12px;\n font-family: sans-serif;\n font-weight: bold;\n}\n\n#largedensities path {\n stroke-width: 1px;\n fill: rgba(120,120,190, 0.03);\n opacity: #0.8;\n}\n\n\n#orientation path {\n fill: none;\n stroke-width: 2px;\n stroke-linecap: round;\n stroke: #000;\n}\n\n#blobs path {\n fill: none;\n stroke: #888;\n stroke-width: 2px;\n}\n#basemap path {\n stroke: #ddd;\n}\n\n#basemap path#water {\n stroke: #aae1f1;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"md`Map components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"components =\n \"paris basemap isochrones hagerstrand largedensities densities blobs centralblob km points arcs orientation start\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"max_duration = 60 * (1 + Math.floor(d3.max(data.map(d => +d.duration)) / 60))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1769,"value":"viewof basemap_options = checkbox({\n options: \"water roads transit boundaries\".split(/ /),\n description: \"Basemap contents\",\n value: \"water roads transit boundaries\".split(/ /)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1851,"value":"viewof basemap_density = select({\n options: [1, 2, 5, 10, 20],\n description: \"Basemap scale\",\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"add_isochrones = {\n const blobs = d3\n .range(5)\n .map(i => (max_duration * (6 - i)) / 6)\n .map(duration => ({\n duration,\n path: rawpath(makeblob(duration, data, start, false))\n }));\n yield (addLayer.isochrones = function(p) {\n const { g } = p;\n\n g.selectAll(\"path\")\n .data(blobs)\n .enter()\n .append(\"path\")\n .attr(\"d\", d => d.path)\n .attr(\"id\", d => \"duration-\" + d.duration)\n .attr(\"fill\", d => isochrone_color(d.duration));\n\n return svg;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"viewof walkingspeed = slider({\n min: 0,\n max: 20,\n value: 3,\n step: 1,\n description: \"walking speed in km/h\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"viewof pointradius = slider({\n min: 1,\n max: 10,\n value: 5,\n description: \"point radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"add_hagerstrand = {\n const blobs = d3\n .range(5)\n .map(i => (max_duration * (6 - i)) / 6)\n .map(duration => ({\n duration,\n path: rawpath(makeblob(duration, data, start, true))\n }));\n yield (addLayer.hagerstrand = async function(p) {\n const { g } = p;\n\n g.selectAll(\"path\")\n .data(blobs)\n .enter()\n .append(\"path\")\n .attr(\"d\", d => d.path)\n .attr(\"id\", d => \"duration-\" + d.duration)\n .attr(\"fill\", d =>\n d.duration == max_duration\n ? \"black\"\n : hagerstrand_white\n ? \"transparent\"\n : \"black\"\n )\n .attr(\"fill-opacity\", d => (d.duration < max_duration ? 0.15 : 1));\n\n return svg;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1909,"value":"viewof hagerstrand_white = checkbox({\n options: [\"white\"],\n value: [\"white\"],\n description: \"Option for Hägerstrand\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1688,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2248,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"add_paris = {\n yield (addLayer.paris = async function(p) {\n const { g } = p;\n g.append(\"path\")\n .attr(\"d\", path(paris))\n .attr(\"fill\", \"#fefef2\")\n .attr(\"stroke\", \"pink\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1787,"value":"add_centralblob = {\n const start_xy = projection(mutable start);\n\n yield (addLayer.centralblob = async function(p) {\n const { g } = p;\n\n [contour, contour_small].forEach((contour, j) => {\n if (contour.coordinates.length === 0) return;\n const i0 = d3.scan(\n contour.coordinates.map(b => -d3.polygonContains(b[0], start_xy))\n );\n\n g.append(\"path\")\n .attr(\"id\", \"centralblob\" + j)\n .attr(\n \"d\",\n rawpath({\n type: \"Polygon\",\n coordinates: [contour.coordinates[i0][0]]\n })\n )\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#888\")\n .attr(\"stroke-width\", 3);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof alpha = slider({\n min: 0,\n max: 1,\n description: \"relative size of the inner blob\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"add_blobs = {\n const start_xy = projection(mutable start);\n \n yield (addLayer.blobs = async function(p) {\n const { g } = p;\n\n [contour, contour_small].forEach((contour, j) => {\n if (contour.coordinates.length === 0) return;\n const i0 = d3.scan(\n contour.coordinates.map(b => -d3.polygonContains(b[0], start_xy))\n );\n\n g.append(\"g\")\n .attr(\"id\", \"blob\" + j)\n .selectAll(\"path\")\n .data(contour.coordinates.filter((_, i) => i !== i0))\n .enter()\n .append(\"path\")\n .attr(\"d\", d =>\n rawpath({\n type: \"Polygon\",\n coordinates: [d[0]]\n })\n )\n .attr(\"fill\", \"#999\");\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"add_km = {\n yield (addLayer.km = async function(p) {\n const { g } = p;\n\n const kms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n g.append(\"g\")\n .attr(\"id\", \"concentric\")\n .selectAll(\"path\")\n .data(kms)\n .enter()\n .append(\"path\")\n .attr(\"d\", km =>\n path(\n d3\n .geoCircle()\n .center(start)\n .radius((km / 40000) * 360)() // km => degrees\n )\n )\n .attr(\"id\", km => \"km-\" + km)\n .attr(\"fill\", \"none\")\n .attr(\"stroke-opacity\", 0.5)\n .attr(\"stroke\", \"black\");\n g.append(\"g\")\n .attr(\"id\", \"concentric-text\")\n .selectAll(\"text\")\n .data(kms)\n .enter()\n .append(\"text\")\n .text(km => `${km}km`)\n .attr(\n \"transform\",\n km =>\n `translate(${projection([start[0], start[1] + (km / 40000) * 360])})`\n )\n .attr(\"id\", km => \"km-\" + km + \"t\")\n .attr(\"fill\", \"black\")\n .attr(\"fill-opacity\", 0.5);\n\n return svg;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"add_points = {\n let points = null;\n function init() {\n const start_xy = projection(mutable start),\n i0 = d3.scan(\n contour.coordinates.map(b => -d3.polygonContains(b[0], start_xy))\n ),\n blob = contour.coordinates[i0][0];\n\n return (points = data\n .filter(d => !d3.polygonContains(blob, projection([d.lon, d.lat])))\n .map(d => path({ type: \"Point\", coordinates: [d.lon, d.lat] })));\n }\n\n yield (addLayer.points = async function(p) {\n const { g } = p;\n g.selectAll(\"path\")\n .data(points || init())\n .enter()\n .append(\"path\")\n .attr(\"d\", d => d);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"add_arcs = {\n const start_xy = projection(mutable start),\n i0 = d3.scan(\n contour.coordinates.map(b => -d3.polygonContains(b[0], start_xy))\n ),\n arcs = data\n .map((d, i) => ({\n path: path({\n type: \"LineString\",\n coordinates: [points[i], points[predecessor(i)]]\n }),\n duration: d.duration,\n index: i\n }))\n .filter(\n d =>\n d3.geoDistance(points[d.index], points[predecessor(d.index)]) >\n 0.00009 &&\n !d3.polygonContains(\n contour.coordinates[i0][0],\n projection(points[d.index])\n )\n );\n\n yield (addLayer.arcs = function(p) {\n const { g } = p;\n g.selectAll(\"path\")\n .data(arcs)\n .enter()\n .append(\"path\")\n .attr(\"d\", d => d.path)\n .attr(\"stroke-width\", d => 1 + (max_duration - +d.duration) / 20)\n .attr(\"stroke\", \"#999\") // || color(0 * +d.duration)\n .attr(\"opacity\", 0.5)\n .attr(\"fill\", \"none\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"add_start = {\n yield (addLayer.start = function(p) {\n const { g } = p;\n g.append(\"path\")\n .attr(\n \"d\",\n path.pointRadius(3)({ type: \"Point\", coordinates: mutable start })\n )\n .attr(\"fill\", \"red\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"map_updated = {\n updated;\n\n const svg = d3.select(MAP);\n\n svg.selectAll(\".loading\").remove();\n svg.selectAll(\".layer\").remove();\n\n svg.on(\"click\", function() {\n const m = d3.mouse(this),\n p = projection.invert(m);\n mutable start = p.map(x => Math.round(x * 10000) / 10000);\n });\n\n components.split(/ +/).forEach(component => showLayer(component, { svg }));\n\n // animate layers in 3D\n svg.selectAll(\"g.layer\").call(add3Dsupport);\n\n return Date.now();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"md`----\n_Data - Retrieve data from Navitia API_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"import {get_journeys} from \"529140a6d468cf32\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2103,"value":"viewof datasource = select({\n options: [\n { value: \"navitia\", label: \"Navitia\" },\n { value: \"uniform\", label: \"Uniform distribution\" }\n ],\n description: \"Data source\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"data = {\n switch (datasource) {\n case \"uniform\":\n //yield data_onepoint;\n yield data_uniform;\n break;\n case \"navitia\":\n yield get_journeys(start);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2053,"value":"data_uniform = {\n const data = [];\n const start_xy = projection(start);\n for (let r = 60; r < 2000; r += 60) {\n const n = r / 40;\n for (let a = 0; a < n; a++) {\n const p = projection.invert([\n start_xy[0] +\n (r / 10) * Math.cos((a / n) * 2 * Math.PI + 0.05 * Math.random()),\n start_xy[1] +\n (r / 10) * Math.sin((a / n) * 2 * Math.PI + 0.05 * Math.random())\n ]);\n data.push({ lon: p[0], lat: p[1], duration: r });\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2050,"value":"data_onepoint = [\n {\n lon: start[0],\n lat: start[1],\n duration: 420\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"points = data.map(d => [d.lon, d.lat])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2245,"value":"md`Larger data: 1 hour instead of 30min… yields many more points, but useful to display larger isochrones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2239,"value":"larger_data = {\n let larger = null;\n async function init() {\n return (larger = get_journeys(start, false));\n }\n return async function() {\n return larger || init();\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2241,"value":"larger_data()","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"md`----\n### Specific tools`","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"md`_Colors_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"isochrone_color = d3\n .scaleLinear()\n .domain([0, max_duration])\n .range([\"white\", \"royalblue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1462,"value":"md`Half-Circle with radius r and rotation angle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1464,"value":"function halfCircle(r, angle) {\n const c = r * Math.cos(angle),\n s = r * Math.sin(angle);\n return `M${-s},${c} A ${r} ${r} 0 0 0 ${s} ${-c}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"md`----\n_Heuristics_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function predecessor(i) {\n const duration = +data[i].duration;\n // which is the nearest among points that are bigger than me\n return d3.scan(\n data.map((d, j) =>\n +d.duration < duration\n ? d3.geoDistance(points[i], points[j]) *\n Math.sqrt(duration / +d.duration)\n : Infinity\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"// How many seconds walking, per pixel?\nwalkingtime = {\n // At the equator 40000km ~= 960px * projection.scale() / d3.geoMercator().scale()\n // multiply by cos(latitude)\n const scale =\n walkingspeed /\n (((40000 * Math.cos(projection.center()[1] * radians)) /\n 960 /\n projection.scale()) *\n d3.geoMercator().scale() *\n 3600);\n return function(T) {\n return T * scale;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"md`----\n_Geo_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"mutable start = {\n let a = null;\n try {\n a = JSON.parse(params.get(\"start\"));\n } catch (e) {}\n return a || [2.349002, 48.863713];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"projection = d3\n .geoMercator()\n .fitExtent(\n [[(width * 1) / 4, (height * 1) / 4], [(width * 3) / 4, (height * 3) / 4]],\n paris\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"rawpath = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"paris = d3.json(\n \"https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/paris.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"md`_nextzen vector tiles_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"import {tile, nextzenapikey} with {largeprojection as projection} from \"17564db3a49dd521\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1836,"value":"largeprojection = {\n const factor = basemap_density;\n return d3\n .geoMercator()\n .fitExtent(\n [\n [(width * (1 - 1 / factor)) / 2, (height * (1 - 1 / factor)) / 2],\n [(width * (1 + 1 / factor)) / 2, (height * (1 + 1 / factor)) / 2]\n ],\n paris\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"md`----\n_Blobs_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"contour = makeblob(max_duration, data, start)","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"contour_small = {\n const contour = makeblob(max_duration * alpha, data, start);\n const start_xy = projection(mutable start);\n contour.coordinates = contour.coordinates.filter(b =>\n d3.polygonContains(b[0], start_xy)\n );\n\n return contour;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2444,"value":"md`----\n_Hillshading_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2421,"value":"import { MIXED } with { data, start, compositeOperation, compositeAlpha, height } from \"1064f84cb4d3b46b\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"md`----\n### Generic tools`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"md`_Perspective_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"import {add3Dsupport, animate3Dlayers} with {height, opacity} from \"f2259c5429d1589a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"opacity = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"d3\n .select(MAP)\n .call(animate3Dlayers, animate)\n .style(\"overflow\", \"visible\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"viewof densities_color = color({\n value: \"#378e3a\",\n title: \"Densities Color\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"md`----\n_Parametric permalink ([Ref](https://beta.observablehq.com/@jeffbaumes/permalink))_\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"function show(option) {\n return options.indexOf(option) > -1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1714,"value":"mutable options = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"updated = {\n add_arcs;\n hagerstrand_white;\n while (options.length > 0) options.pop();\n showvalues.forEach(v => options.push(v));\n yield Date.now();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"params = new URLSearchParams(html``.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"permalink = params => {\n const { protocol, host, pathname } = html``;\n return `${protocol + \"//\" + host + pathname}?${Object.keys(params)\n .map(key => {\n return (\n encodeURIComponent(key) +\n \"=\" +\n encodeURIComponent(JSON.stringify(params[key]))\n );\n })\n .join(\"&\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"height = width | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1983,"value":"md`----\n_Layer management_\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"function showLayer(id, p) {\n if (show(id)) {\n const g = p.svg\n .append(\"g\")\n .attr(\"id\", id)\n .classed(\"layer\", true);\n if (addLayer[id]) {\n try {\n addLayer[id]({ ...p, g });\n } catch (e) {\n console.warn(e);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"mutable addLayer = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"debug_time = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"md`----\n_libraries_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-contour\", \"d3-tile@0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"radians = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"import {checkbox, color, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"import {download} from \"@mbostock/lazy-download\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"import {serialize, rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"download_title = `Paris-isochrone-${start}-${showvalues}-${\n new Date().toISOString().split(\".\")[0]\n}`.replace(/[,:]/g, \"-\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}