27:null 28:["$","title",null,{"children":"Grand Lyon Bus Elevation with Aframe | Fil | Observable"}] 2d:T7a5,add_sims = { const a = d3 .select(chart) .select("#lines") .html(""); const lines = a .selectAll("a-entity") .data(bus.features) .enter() .append("a-entity") //.attr("radius", 0.001) .attr("meshline", "") // no material for meshlines /*.attr( "material", l => `color: rgb(${l.properties.couleur.replace(/ /g, ",")});` )*/ .nodes(); //await Promises.delay(1000); if (true) for (var i = 0; i < lines.length; i++) { d3.select(lines[i]).attr( "meshline", l => `lineWidth: 0.4; path: ${l.geometry.coordinates .map(d => `${xyz(d)}`) .join(", ")}; color: rgb(${l.properties.couleur.replace( / /g, "," )});` ); yield `${1 + i}/${lines.length}`; } a.select("a-text").remove(); const b = d3.select(chart).select("#dots"); const boxes = b .html("") .selectAll("a-box") .data(bus.features) .enter() .append("a-box") .attr("width", 0.01) .attr("height", 0.01) .attr("depth", 0.01) .attr( "material", l => `color: rgb(${l.properties.couleur.replace(/ /g, ",")});` ); const camera = d3.select(chart).select("#camera"); do { const t = Date.now() / 30000, s = sims(Date.now()); boxes.attr("position", (d, i) => `${xyz(s[i].coordinates, i)}`); // recommended: if (false) boxes.each((d, i, e) => { const A = xyz(s[i].coordinates, i) .split(" ") .map(d => +d), pos = { x: A[0], y: A[1], z: A[2] }; e[i].setAttribute("position", pos); }); // camera.attr("position", `${3 * Math.sin(t)} 1 ${3 + 3 * Math.cos(t)}`); camera.each((d, i, e) => { e[i].setAttribute("position", { x: 3 * Math.sin(t), y: 1, z: 3 + 3 * Math.cos(t) }); }); yield html`sims updated at ${Date.now()}`; } while (true); }2e:T48b,sims = { const agents = bus.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])), alt = d3 .scaleLinear() .domain(domain) .range(line.map(d => d[2])); return { line, domain, max: l, pos: l * Math.random(), speed: l / 10000, dir: 1, lon, lat, alt, color: `rgb(${d.properties.couleur})` }; }); return function(t) { return agents.map(a => { a.pos = (t * a.speed) % (2 * a.max); if (a.pos > a.max) a.pos = a.pos - a.max; /* a.pos = 2 * a.max - a.pos;*/ return { coordinates: [a.lon(a.pos), a.lat(a.pos), a.alt(a.pos)], color: a.color }; }); }; }2f:[] 2b:{"id":"f55a5e658cc22a7e","slug":null,"title":"Grand Lyon Bus Elevation with Aframe","thumbnail":"d6b21d20f452891bbf84f224c6290908dd71ae32b1e98cc4268c8ec5f2adb62a","access_level":"unlisted","create_time":"$D2019-05-09T07:59:33.308Z","update_time":"$D2020-05-13T07:54:51.653Z","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":449,"publish_version":449,"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":1,"collection":null,"type":"notebook","body":{"title":"Grand Lyon Bus Elevation with Aframe","cells":[{"id":0,"value":"md`# Grand Lyon Bus Elevation with Aframe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chart = {\n aframe; // wait for the module to load before building (???)\n if (this) return this; // avoids a crash when going fullscreen (??)\n const height = window.outerHeight - 50;\n const chart = html`${scene} `;\n return chart;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"add_terrain = {\n const a = d3\n .select(chart)\n .select(\"#terrain\")\n .html(\"\");\n\n a.selectAll(\"a-entity\")\n .data(mesh.coordinates)\n .enter()\n .append(\"a-entity\")\n //.attr(\"radius\", 0.001)\n .attr(\n \"meshline\",\n (l, i) =>\n `lineWidth: 0.05; path: ${l\n .map(xyz)\n .join(\", \")}; color:white; lineWidthStyler: Math.floor(p*${(13 + i) **\n 2})%8===0;`\n );\n\n yield \"added terrain\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"scene = `\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoMercator().fitExtent([[-3, -3], [3, 3]], bus)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"sims(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// import {sims, d3} with {bus} from \"72aee60478e18be8\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"bus = d3.json(\n \"https://gist.githubusercontent.com/Fil/5f02b4379cb740e4970e4ba2cd3c9e94/raw/22f93245c560877d24d852d164d60dee7d4d3f02/bus_altitude.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"function altitude(point) {\n return point[2] || 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"// saved from https://observablehq.com/d/3eb05d54a7f00cc9\nmesh = d3.json(\n \"https://gist.githubusercontent.com/Fil/2349af28f2185f87ce0b36ddd3d8f432/raw/7cce191cd844703697cb9e7f43306f21d35a9efb/mesh3.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"xyz = {\n const z = d3\n .scaleLinear()\n .domain([100, 300])\n .range([0, 0.4]),\n xy = d => {\n d = projection(d);\n d[1] = -d[1];\n return d;\n };\n return function(point, line) {\n return [...xy(point), z(altitude(point))].join(\" \");\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"aframe = {\n await require(\"aframe@1.0.4\");\n await require(\"aframe-extras@5.1.0/dist/aframe-extras.js\").catch(() => {}); // works on Firefox\n\n // https://github.com/supermedium/superframe/tree/master/components/orbit-controls\n await require(\"aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js\").catch(\n () => {}\n );\n\n await require(\"aframe-meshline-component@0.3.1/dist/aframe-meshline-component.js\").catch(\n () => {}\n );\n\n // const THREE = window.THREE;\n\n return window.AFRAME;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"