27:null 28:["$","title",null,{"children":"Réseau métro / bus Grand Lyon | Fil | Observable"}] 2d:T449,sims = { const agents = lignes.features //.filter((_, i) => i === 0) .map(d => { const line = d.geometry.coordinates; const domain = []; var c0 = line[0], l = 0; line.forEach(c => { domain.push((l += d3.geoDistance(c, c0))); c0 = c; }); const lon = d3 .scaleLinear() .domain(domain) .range(line.map(d => d[0])), lat = d3 .scaleLinear() .domain(domain) .range(line.map(d => d[1])); return { line, domain, max: l, pos0: l * Math.random(), speed: l / 10, dir: 1, lon, lat, color: `rgb(${d.properties.couleur})`, metro: d.properties.metro }; }); return function(t) { return agents.map(a => { a.pos = ((t / 1000) * a.speed + a.pos0) % (2 * a.max); if (a.pos > a.max) a.pos = a.pos - a.max; // 2 * a.max - a.pos; return { coordinates: [a.lon(a.pos), a.lat(a.pos)], color: a.color, metro: a.metro }; }); }; }2e:[] 2b:{"id":"0cdabd47285ff828","slug":null,"title":"Réseau métro / bus Grand Lyon","thumbnail":"2f5e9781f5baeeab0cb7ac8dc3ca67787d9179d0f0506365078b62e4a6e21ad9","access_level":"unlisted","create_time":"$D2019-05-15T09:03:44.367Z","update_time":"$D2019-05-15T09:55:56.547Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":337,"publish_version":337,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Réseau métro / bus Grand Lyon","cells":[{"id":0,"value":"md`# Réseau métro / bus Grand Lyon\n\n(updated: added metro+funiculaire)\n\nSee online: https://projet.liris.cnrs.fr/mi2/posts/2019/05/15/animated-bus-lines.html\n\nSource for bus lines: https://data.beta.grandlyon.com/fr/datasets/bb6bde0b-c03f-420d-bb4c-bdab28648f1e/\n
Metro + funiculaire: https://data.beta.grandlyon.com/fr/datasets/58f93af3-a651-4cbd-bd9d-b4562f8d404d/\n
Settings: EPSG:4326`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"chart = md`

${staticcanvas}

${mobilecanvas}

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"staticcanvas = {\n const context = DOM.context2d(width, height),\n path = d3.geoPath(projection).context(context);\n\n context.lineWidth = 1;\n lignes.features.forEach(f => {\n context.beginPath();\n path(f);\n if (f.properties.metro) {\n context.strokeStyle = \"#666\";\n context.lineWidth = 6;\n context.stroke();\n }\n context.strokeStyle = \"rgb(\" + f.properties.couleur + \")\";\n context.lineWidth = 1;\n context.stroke();\n });\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"mobilecanvas = {\n // const width = 500;\n projection.fitExtent([[10, 10], [width - 10, height - 10]], bus);\n const context = DOM.context2d(width, height),\n path = d3.geoPath(projection).context(context);\n\n do {\n fade(context, 0.05);\n\n sims(Date.now()).forEach(a => {\n context.beginPath();\n path.pointRadius(a.metro ? 5 : 2.5);\n path({\n type: \"Point\",\n coordinates: a.coordinates\n });\n context.fillStyle = a.color;\n context.fill();\n });\n yield context.canvas;\n } while (true);\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"function fade(context, alpha) {\n const { globalAlpha, globalCompositeOperation } = context;\n context.globalCompositeOperation = \"destination-out\";\n context.fillStyle = \"white\";\n context.globalAlpha = alpha || 1;\n context.fillRect(0, 0, context.canvas.width, context.canvas.height);\n context.globalAlpha = globalAlpha;\n context.globalCompositeOperation = globalCompositeOperation;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"projection = d3\n .geoMercator()\n .fitExtent([[10, 10], [width - 10, height - 10]], bus)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"api_BUS =\n \"https://download.data.grandlyon.com/wfs/rdata?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=tcl_sytral.tcllignebus&outputFormat=application/json; subtype=geojson&SRSNAME=EPSG:4326&count=10000&startIndex=1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"api_METRO =\n \"https://download.data.grandlyon.com/wfs/rdata?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=tcl_sytral.tcllignemf&outputFormat=application/json; subtype=geojson&SRSNAME=EPSG:4326&count=10000&startIndex=1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"bus = d3.json(api_BUS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"[...d3.group(bus.features, d => d.properties.ligne)].filter(\n d => d[1].length !== 2\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"metro = d3.json(api_METRO).then(\n d => (\n d.features.forEach(\n f => (f.properties.metro = f.properties.ligne[0] !== \"F\") // Métro ou *F*uniculaire ?\n ),\n d\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"lignes = ({\n type: \"FeatureCollection\",\n features: [metro.features, bus.features].flat()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"