29:null 2a:["$","title",null,{"children":"Zoomable Raster & City Graph with street activity | Pierre Ripoll | Observable"}] 2f:T2c05,function createMapEvents({ width: width = width, height: height = height, sizeIcons: s = 300, eventsNumber = 20, urls: urls = [] }) { var _urls = urls, _events = [], _sizeIcons = s, _hoveredWebcam = null, _hoveredEvent = null, _transform = d3.zoomIdentity, _width = width, _height = height; const minScale = 0.1, maxScale = 14, initialScale = 1, borderSize = (_sizeIcons / 20) | 0; const id = DOM.uid().id; const container = d3 .select(DOM.element('div')) .attr('id', id) .attr( 'style', `width: ${_width}px; height: ${_height}px; overflow: hidden; position: relative` ); for (let i = 0; i < eventsNumber; i++) { _events.push(randomEvent(seed + i)); } container.node().append(createStyle(id, borderSize)); // BACKGROUND MAP const mapTile = container .append("svg") .style("position", "absolute") .attr("viewBox", [0, 0, _width, _height]) .style('opacity', 1); const origin = projection([0, 0]); const tile = d3 .tile() .size([_width, _height]) .scale(t => t.k * projection.scale() * 2 * Math.PI) .translate(({ x, y, k }) => [x + k * origin[0], y + k * origin[1]]) .tileSize(256); let image = mapTile .append("g") .attr("pointer-events", "none") .selectAll("image"); //EVENTS AND WEBCAMS const eventsDiv = container.append("div").attr('class', 'events'); let events = eventsDiv.selectAll('div'); let webcamsDiv = container.append("div").attr('class', 'webcams'); let webcams = webcamsDiv.selectAll('div'); const threshold = 1.5; function filterEvent(d, k) { return d.level < 3 && k < threshold; } //GRAPH const canvas = container .append('canvas') .attr('width', _width) .attr('height', _height), context = canvas.node().getContext('2d'), path = d3.geoPath().context(context); // Bind the drag behavior for interaction. const line_scale = 0.1 / geo_diagonal; container.node().appendChild(context.canvas); function renderBackground(transform, full) { // console.log(transform); context.save(); context.clearRect(0, 0, _width, _height); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); context.strokeStyle = "#2c8f1f"; context.lineWidth = 1 / transform.k; const path = transform.k > threshold ? graphPath_full : graphPath; context.stroke(full ? path : path.simple); context.beginPath(); const r = _sizeIcons / (10 * maxScale); for (let e of _events) { if (filterEvent(e, transform.k)) { context.moveTo(e.x + r, e.y, true); context.arc(e.x, e.y, r, 0, 2 * Math.PI); } } context.strokeStyle = "black"; context.stroke(); context.fillStyle = 'yellow'; context.fill(); context.restore(); } //ZOOM function render(t, full = true) { _transform = t; const tiles = tile(t); image = image .data(tiles, d => d) .join("image") .attr("xlink:href", d => url(...d3.tileWrap(d))) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); const size_events = _sizeIcons / 2; const offsetEvents = size_events / 2; const scaling = 0.25 + Math.log(1 + (t.k - initialScale) / (maxScale - initialScale)); events = eventsDiv .selectAll('div') .data(_events) .join( enter => enter .append('div') .append('img') .attr("src", d => icons.get(d.type).src), update => update .style('width', `${size_events}px`) .style('height', `${size_events}px`) .style('transform', `scale(${scaling}) `) .style('top', ({ y }) => `${t.y + y * t.k - offsetEvents}px`) .style('left', ({ x }) => `${t.x + x * t.k - offsetEvents}px`) .style('visibility', d => filterEvent(d, t.k) ? 'hidden' : 'visible' ) ); const size_webcam = size_events; const offsetWebcams = borderSize + size_webcam / 2; webcams = webcamsDiv .selectAll('div') .data(webcams_lyon, d => d.url) .join( enter => enter .append('div') .append('img') .attr("src", d => d.url), update => update .style('width', `${size_webcam}px`) .style('height', `${size_webcam}px`) .style('transform', `scale(${scaling}) `) .style('top', ({ y }) => `${t.y + y * t.k - offsetWebcams}px`) .style('left', ({ x }) => `${t.x + x * t.k - offsetWebcams}px`) ); const t1 = performance.now(); for (let i = 0; i < 1000; i++) renderBackground(t, full); mutable time = performance.now() - t1; } const containerHTML = container.node(); const zoom = d3 .zoom() // .scaleExtent([minScale, maxScale]) .extent([[0, 0], [_width, _height]]) .on("zoom.render", event => render(event.transform, false)) .on("end.render", event => render(event.transform, true)) .on('start', e => container.classed('dragged', true)) .on('end', e => { container.classed('dragged', false); containerHTML.dispatchEvent(new CustomEvent('bounds')); }); const zoomListener = container .call(zoom) .call(zoom.transform, d3.zoomIdentity); function getBounds() { const m = containerHTML.__zoom; const [xO, yO] = projection.translate(); // console.log( // m, // xO, // yO, // projection // .invert([-(m.x - _width) / m.k, -(m.y - _height) / m.k]) // .reverse() // ); return { topLeft: projection.invert([-m.x / m.k, -m.y / m.k]), bottomRight: projection.invert([ (_width - m.x) / m.k, (_height - m.y) / m.k ]) }; } function getCenter() { const m = containerHTML.__zoom; return projection.invert([ (_width / 2 - m.x) / m.k, (_height / 2 - m.y) / m.k ]); } const selectWebcams = urls => { webcams.each(function(d) { if (_urls.includes(d.url)) d3.select(this).classed('selected', true); else d3.select(this).classed('selected', false); }); }; selectWebcams(_urls); const hoverEvent = id => { _hoveredEvent = null; events.each(function(d) { if (d.id === id) { d3.select(this).classed('hover', true); _hoveredEvent = d3.select(this).datum(); } else d3.select(this).classed('hover', false); }); containerHTML.dispatchEvent( new CustomEvent('hover', { detail: { type: 'event', target: id } }) ); }; const hoverWebcam = url => { _hoveredWebcam = null; webcams.each(function(d) { if (d.url === url) { d3.select(this).classed('hover', true); _hoveredWebcam = d3.select(this).datum(); } else d3.select(this).classed('hover', false); }); containerHTML.dispatchEvent( new CustomEvent('hover', { detail: { type: 'webcam', target: url } }) ); }; const zoomTo = (coor, scale, time = 1000) => container .transition() .duration(time) .call( zoom.transform, d3.zoomIdentity .translate(_width / 2, _height / 2) .scale(-scale) .translate(...projection(coor)) .scale(-1) ); webcams .on('dblclick', function(event) { event.preventDefault(); event.stopPropagation(); // zoomTo(d3.select(this).datum().coordinates, 1 << 22); }) .on('mouseenter', function(event) { _hoveredWebcam = d3.select(this).datum(); hoverWebcam(_hoveredWebcam.url); }) .on('mouseleave', function(event) { _hoveredWebcam = null; hoverWebcam(null); }) .on('mousedown', function(event) { event.preventDefault(); event.stopPropagation(); const div = d3.select(this); const url = div.select('img').attr('src'); if (!_urls.includes(url)) { _urls.push(url); div.attr('class', 'selected'); } else { _urls.splice(_urls.indexOf(url), 1); div.attr('class', null); } containerHTML.dispatchEvent(new CustomEvent('input')); }); events .on('dblclick', function(event) { event.preventDefault(); event.stopPropagation(); }) .on('mouseenter', function(event) { _hoveredEvent = d3.select(this).datum(); hoverEvent(_hoveredEvent.id); }) .on('mouseleave', function(event) { _hoveredEvent = null; hoverEvent(null); }) .on('mousedown', function(event) { event.preventDefault(); event.stopPropagation(); zoomTo(d3.select(this).datum().pt, threshold + 0.5); containerHTML.dispatchEvent(new CustomEvent('clickEvent')); }); function updateSize(newWidth, newHeight) { const prevCenter = getCenter(); const prevScale = _transform.k; _width = newWidth; _height = newHeight; container.style('width', `${_width}px`); container.style('height', `${_height}px`); mapTile.attr("viewBox", [0, 0, _width, _height]); containerHTML.dispatchEvent(new CustomEvent('bounds')); canvas.attr('height', _height); canvas.attr('width', _width); context.width = _width; context.height = _height; tile.size([_width, _height]); zoomTo(prevCenter, prevScale, 0); } Object.assign(containerHTML, { zoom, container, getBounds, zoomListener, zoomTo }); Object.defineProperties(containerHTML, { value: { get() { return { urls: _urls, events: _events }; }, enumerable: true }, width: { get() { return _width; }, set(val) { // _width = val; updateSize(val, _height); } }, height: { get() { return _height; }, set(val) { // _height = val; updateSize(_width, val); } }, hoveredEvent: { get() { return _hoveredEvent; }, set(id) { hoverEvent(id); }, enumerable: true }, hoveredWebcam: { get() { return _hoveredWebcam; }, set(url) { hoverWebcam(url); }, enumerable: true }, urls: { get() { return _urls; }, set(val) { _urls = val; containerHTML.dispatchEvent(new CustomEvent('input')); selectWebcams(_urls); }, enumerable: true }, visibleEvents: { enumerable: true, get() { const { topLeft: [xA, yA], bottomRight: [xB, yB] } = getBounds(); return _events .filter(d => !filterEvent(d, _transform.k)) .filter(({ pt: [x, y] }) => x > xA && x < xB && y < yA && y > yB); } }, sizeIcons: { set(val) { _sizeIcons = val; render(_transform, true); }, get() { return _sizeIcons; }, enumerable: true } }); return containerHTML; }30:Ta5f,createListViz = options => { const id = DOM.uid().id; const list = d3.create('div').attr('id', id); const listNode = list.node(); const padZero = n => ("0" + n).slice(-2); var _options = options; function update() { const items = list .selectAll('div') .data(_options) .join('div') .attr('class', d => d.type) .text( ({ edge, time }) => `${edge.nomvoie} - ${time.getDate()}/${time.getMonth()} ${padZero( time.getHours() )}H${padZero(time.getMinutes())}` ) .sort((a, b) => a.time - b.time) .lower(); items .append('img') .attr('class', 'icon') .attr('src', ({ type }) => icons.get(type).src) .lower(); list .selectAll('div') .on('mouseover', function() { d3.select(this).classed('hover', true); listNode.dispatchEvent( new CustomEvent('hover', { detail: { target: d3.select(this).datum().id } }) ); }) .on('mouseout', function() { d3.select(this).classed('hover', false); listNode.dispatchEvent( new CustomEvent('hover', { detail: { target: null } }) ); }) .on('mousedown', function() { // d3.select(this).classed('hover', false); listNode.dispatchEvent( new CustomEvent('input', { detail: { target: d3.select(this).datum() } }) ); }); return items; } var items = update(); list.node().append(html` `); Object.defineProperties(listNode, { value: { get() { return _options; }, set(val) { _options = val; items = update(); } }, hoveredEvent: { set(id) { items.each(function(d) { if (id === null) d3.select(this).classed('hover', false); else if (d.id === id) d3.select(this).classed('hover', true); else d3.select(this).classed('hover', false); }); } }, height: { set(val) { list.style('height', `${val}px`); } }, width: { set(val) { list.style('width', `${val}px`); } } }); return listNode; }31:T442,createStyle = (id, borderSize) => html` `32:[{"id":"435d2751000a882d2fd283a21e8fe4ae5388317b8c5ac855b1b3eeaa0b34c1a9e5ba1af34ff8dad6bb6903c28feba56dec06513798c5616db67dacab2c93bb3c","href":"https://static.observableusercontent.com/files/435d2751000a882d2fd283a21e8fe4ae5388317b8c5ac855b1b3eeaa0b34c1a9e5ba1af34ff8dad6bb6903c28feba56dec06513798c5616db67dacab2c93bb3c","name":"nodes_grand_lyon.json","type":"application/json","lastModified":1604585312188.764,"size":1419185},{"id":"d087ed17770f602e1918e322e74c3a6175a5f461f1a5048c958df373865f27f56e3b304e38c4da29b8d24e4864ab2d606d86c018fa2273f72067eae9392e2fea","href":"https://static.observableusercontent.com/files/d087ed17770f602e1918e322e74c3a6175a5f461f1a5048c958df373865f27f56e3b304e38c4da29b8d24e4864ab2d606d86c018fa2273f72067eae9392e2fea","name":"paths_grand_lyon@5.json","type":"application/json","lastModified":1604599062787.737,"size":10912245},{"id":"6c1236810b87614d3209cbc7de30a0a9505c8408f28daf284087a0486fb773ade5d62832cd8b958ced419c6587376b5c6e0c22aeaa85413aad101e7611e5d961","href":"https://static.observableusercontent.com/files/6c1236810b87614d3209cbc7de30a0a9505c8408f28daf284087a0486fb773ade5d62832cd8b958ced419c6587376b5c6e0c22aeaa85413aad101e7611e5d961","name":"webcams_lyon.json","type":"application/json","lastModified":1604601033699.327,"size":9204},{"id":"042f847a3b59e832626af22cd2fd1bb5abf87f91292d56789b11bc7eda4fd4cdad8e8e1cb342c4c892b964a984128c154b875ac15614fd8eeffac2646f09273d","href":"https://static.observableusercontent.com/files/042f847a3b59e832626af22cd2fd1bb5abf87f91292d56789b11bc7eda4fd4cdad8e8e1cb342c4c892b964a984128c154b875ac15614fd8eeffac2646f09273d","name":"road-work.svg","type":"image/svg+xml","lastModified":1604862874027.902,"size":3273},{"id":"6d2ab827f6daedd26b06e692b38cec8b5cb83226055ae7e5bdb09b73842f28b027a6299e432264d1e54332fc3cc7893919f1e808c5a20f307d5fca591bc139d0","href":"https://static.observableusercontent.com/files/6d2ab827f6daedd26b06e692b38cec8b5cb83226055ae7e5bdb09b73842f28b027a6299e432264d1e54332fc3cc7893919f1e808c5a20f307d5fca591bc139d0","name":"warning.svg","type":"image/svg+xml","lastModified":1604862783547.564,"size":2054}] 2d:{"id":"934ac71deecb5ece","slug":"city-graph-events-street-activity","title":"Zoomable Raster & City Graph with street activity","thumbnail":"6362b84c9b2ffa67e1efff8e6dfb945753223d690f8e4c22ac81796382b4a77d","access_level":"public","create_time":"$D2020-11-05T14:08:32.188Z","update_time":"$D2022-06-01T00:30:01.414Z","view_time":null,"first_public_time":"$D2022-06-01T00:29:42.198Z","has_unpublished_edits":null,"fork":{"id":"b44dc5efc2916305","slug":"zoomable-raster-graph-city-trafic","title":"Zoomable Raster & City Graph","owner":{"id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll"}},"stars":2,"starred":false,"owner":{"type":"team","id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":"starter_2024"},"version":2339,"publish_version":2339,"role":null,"authored":false,"authors":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null}],"members":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"97c9a11f8bdff74a","slug":"epfl-3-juin","title":"EPFL 3 JUIN","owner":{"id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll"}},"type":"notebook","body":{"title":"Zoomable Raster & City Graph with street activity","cells":[{"id":0,"value":"md`# Zoomable Raster & City Graph with street activity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`This notebook combines [d3-tile](https://github.com/d3/d3-tile), [d3-zoom](https://github.com/d3/d3-zoom) and [d3-geo](https://github.com/d3/d3-geo). It's inspired by notebooks from [Mike Bostock](https://observablehq.com/@d3/zoomable-raster-vector?collection=@d3/d3-tile) and [Philippe Rivière](https://observablehq.com/@d3/versor-zooming?collection=@d3/d3-geo). Data are from [Data Grand Lyon](https://data.grandlyon.com/jeux-de-donnees/chaussees-trottoirs-metropole-lyon/donnees), I only removed attributes for a lighter file. OpenStreetMap has a [list](https://wiki.openstreetmap.org/wiki/Tile_servers) of available tile servers. Also [simplify-js](https://mourner.github.io/simplify-js/) helps me create a smooth zooming with an intermediate graph. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"map = createMapEvents({\n width: width,\n height,\n sizeIcons: 300,\n eventsNumber: 120,\n urls: webcams_lyon.map(w => w.url)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"listViz = {\n const events = map.visibleEvents;\n const viz = createListViz(events);\n\n const onMapUpdate = event => {\n viz.hoveredEvent = event.detail.target;\n };\n map.addEventListener('hover', onMapUpdate);\n invalidation.then(() => map.removeEventListener('input', onMapUpdate));\n\n const onMapZoom = () => {\n viz.value = map.visibleEvents;\n };\n map.addEventListener('bounds', onMapZoom);\n invalidation.then(() => map.removeEventListener('bounds', onMapZoom));\n\n const onHoverList = event => {\n map.hoveredEvent = event.detail.target;\n };\n\n viz.addEventListener('hover', onHoverList);\n invalidation.then(() => map.removeEventListener('hover', onHoverList));\n\n const onClick = event => {\n const d = event.detail.target;\n map.zoomTo(d.pt, 1.8);\n };\n\n viz.addEventListener('input', onClick);\n invalidation.then(() => map.removeEventListener('input', onClick));\n\n return viz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"viewof sizeIcons = {\n const form = slider({\n min: 50,\n max: 800,\n step: 5,\n value: 300,\n title: \"Size icons\"\n });\n const updateMap = () => {\n map.sizeIcons = form.value;\n };\n form.addEventListener('input', updateMap);\n invalidation.then(() => form.removeEventListener('input', updateMap));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"viewof seed = text({\n title: \"Seed random\",\n value: \"city\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"viewof urlTiles = select({\n options: [\n { label: \"Standard\", value: \"a.tile.openstreetmap.org\" },\n {\n label: \"Light\",\n value: \"cartodb-basemaps-1.global.ssl.fastly.net/light_all\"\n }\n ],\n value: \"cartodb-basemaps-1.global.ssl.fastly.net/light_all\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"viewof newWidth = {\n const form = slider({\n min: 50,\n max: width,\n step: 5,\n value: width,\n title: \"Width\"\n });\n const updateMap = () => {\n map.width = form.value;\n };\n form.addEventListener('input', updateMap);\n invalidation.then(() => form.removeEventListener('input', updateMap));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"viewof newHeight = {\n const form = slider({\n min: 50,\n max: width,\n step: 5,\n value: height,\n title: \"Height\"\n });\n const updateMap = () => {\n map.height = form.value;\n };\n form.addEventListener('input', updateMap);\n invalidation.then(() => form.removeEventListener('input', updateMap));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Geography`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2233,"value":"projection = d3\n .geoMercator()\n .center([4.8320114, 45.7578137])\n .scale(Math.pow(2, 21) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .precision(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"geo_bounds = d3.geoBounds({\n type: \"MultiPoint\",\n coordinates: nodes.map(d => [d.x, d.y])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"geo_centroid = d3.geoCentroid({\n type: \"MultiPoint\",\n coordinates: nodes.map(d => [d.x, d.y])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"geo_diagonal = Math.hypot(\n geo_bounds[0][0] - geo_bounds[1][0],\n geo_bounds[0][1] - geo_bounds[1][1]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"z = map.__zoom\n .scale(-1)\n .translate(...projection(geo_centroid).map(d => -d))\n .scale(-1 / (1 << 20))\n .translate(-width / 2, -height / 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"edges = FileAttachment(\"paths_grand_lyon@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"nodes = FileAttachment(\"nodes_grand_lyon.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## Graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"pts = nodes.map(({ x, y }) => projection([x, y]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"lines = edges.map(e => {\n const coor = e.coordinates.map(d => projection(d));\n return coor;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"filteredLines = edges\n .filter(l => l.type > 2)\n .map(e => {\n const coor = e.coordinates.map(d => projection([d[0], d[1]]));\n return coor;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"graphPath = {\n // WARNING : THIS IS A GAME CHANGER : ALWAYS STORE PATH2D WHEN YOU HAVE A MASSIVE GRAPH BACKGROUND\n const path = new Path2D(\n \"M\" +\n filteredLines\n .map(e => {\n return e.map(d => [d[0], d[1]].join(\",\")).join(\"L\");\n })\n .join(\"M\")\n );\n\n const simple = new Path2D(\n \"M\" +\n filteredLines\n .map(line => {\n const l = line.map(([x, y]) => ({ x, y }));\n return simplify(l, simplifyFactor, true).map(({ x, y }) => [x, y]);\n })\n .map(e => {\n return e.map(([x, y]) => [x, y].join(\",\")).join(\"L\");\n })\n .join(\"M\")\n );\n\n return Object.assign(path, { simple });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"graphPath_full = {\n // WARNING : THIS IS A GAME CHANGER : ALWAYS STORE PATH2D WHEN YOU HAVE A MASSIVE GRAPH BACKGROUND\n const path = new Path2D(\n \"M\" +\n lines\n .map(e => {\n return e.map(d => [d[0], d[1]].join(\",\")).join(\"L\");\n })\n .join(\"M\")\n );\n\n const simple = new Path2D(\n \"M\" +\n lines\n .map(line => {\n const l = line.map(([x, y]) => ({ x, y }));\n return simplify(l, simplifyFactor, true).map(({ x, y }) => [x, y]);\n })\n .map(e => {\n return e.map(([x, y]) => [x, y].join(\",\")).join(\"L\");\n })\n .join(\"M\")\n );\n\n return Object.assign(path, { simple });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"simplifyFactor = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## Background`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"url = (x, y, z) => `https://${urlTiles}/${z}/${x}/${y}.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"md`## Events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"eventsList = ['warning', 'roadwork']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"icons = new Map([\n ['warning', await FileAttachment('warning.svg').image()],\n ['roadwork', await FileAttachment('road-work.svg').image()]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"randomEvent = (seed = randomUID()) => {\n const random = seedrandom(seed);\n\n const randomEdge = edges[(random() * edges.length) | 0];\n const randomPt =\n randomEdge.coordinates[(random() * randomEdge.coordinates.length) | 0];\n\n const type = eventsList[(random() * eventsList.length) | 0];\n\n const [x, y] = projection(randomPt);\n\n const now = new Date();\n const delay = type === \"warning\" ? 8 : 24 * 5;\n const time = getRandomDate(\n new Date(\n now.getFullYear(),\n now.getMonth(),\n now.getDate(),\n now.getHours() - delay\n ),\n now,\n random\n );\n\n return {\n id: randomUID(),\n type,\n level: randomEdge.type,\n edge: randomEdge,\n time,\n type,\n pt: randomPt,\n x,\n y\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"function getRandomDate(from, to, random = Math.random) {\n from = from.getTime();\n to = to.getTime();\n return new Date(from + random() * (to - from));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"randomUID = () =>\n Math.random()\n .toString(36)\n .substr(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"random = seedrandom(seed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"md`## Webcams`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1795,"value":"urls = webcams_lyon.map(w => w.url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"webcams_lyon = (await FileAttachment('webcams_lyon.json').json()).features.map(\n wc => ({\n x: projection(wc.geometry.coordinates)[0],\n y: projection(wc.geometry.coordinates)[1],\n coordinates: wc.geometry.coordinates,\n nom: wc.properties.nom,\n libellelong: wc.properties.libellelong,\n observation: wc.properties.observation,\n url: wc.properties.url,\n last_update: wc.properties.last_update\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"webCriter = {\n var js = await d3.json(\n 'https://download.data.grandlyon.com/ws/grandlyon/pvo_patrimoine_voirie.pvotronconwebcriter/all.json'\n );\n var values = js.values;\n while (js.next) {\n js = await d3.json(js.next);\n values = values.concat(js.values);\n yield values;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"seedrandom = require('seedrandom')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"import { geocoding } from '@pierreleripoll/geocoding-nominatim'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"simplify = require('simplify-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"import { select, text, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"