2b:null 2c:["$","title",null,{"children":"Space-Time/Elevation Cube with Aframe | Fil | Observable"}] 31:T545,chart = { aframe; // wait for the module to load before building (???) //if (this) return this; // avoids a crash when going fullscreen (??) await Promises.delay(500); const height = window.outerHeight - 50; const chart = html`

${scene}

`; var t; const model = d3.select(chart).select("#model"), bbox_mixin = d3.select(chart).selectAll("#bboxtube a-tube"); bbox_mixin.attr( "material", "color: white" // + color((1 + Math.sin(+Date.now() / 100)) / 2) ); yield chart; // const routes = d3 .select(chart) .select("#model") .append("a-entity") .attr("id", "routes") .selectAll("a-entity") .data(route.features) .join("a-tube") .attr("radius", 0.023) .attr("material", l => `color: ${l.properties.color};`); var alpha = 0; do { alpha = 1 - alpha; routes .transition() .duration(1000) .attr("path", l => l.geometry.coordinates .map(d => `${xy(projection(d).join(","))} ${z(d, alpha)}`) .join(", ") ); d3.select(chart) .select("a-sky") .transition() .duration(1000) .attr("color", alpha ? "#abbbea" : "#446"); await Promises.delay(3500); } while (true); return chart; }32:[] 2f:{"id":"46de8ae31709a0e9","slug":null,"title":"Space-Time/Elevation Cube with Aframe","thumbnail":"e703bfffd2e2f0a0c69e6e86edbd89ee99099f01eaf59f50fc6d19257822aa6c","access_level":"unlisted","create_time":"$D2019-04-29T08:23:32.712Z","update_time":"$D2019-05-15T07:35:31.918Z","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","bio":"Vocateur."},"version":771,"publish_version":771,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur."}],"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Space-Time/Elevation Cube with Aframe","cells":[{"id":0,"value":"md`# Space-Time/Elevation Cube with Aframe\n\nSee online: https://projet.liris.cnrs.fr/mi2/posts/2019/05/14/space-time-elevation-cube.html\n\nNote: to export, select the 3D view, type ctrl-alt-I, and use the GLTF icon.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"data = d3.csv(\n \"https://projet.liris.cnrs.fr/mi2/oddata/samsunghealth/samsunghealth.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"/* a LineString with z */\nroute = {\n const z = d3\n .scaleLinear()\n .domain(d3.extent(data, d => +d.alt))\n .range([0, 8]);\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n var route = {\n type: \"FeatureCollection\",\n features: [...d3.group(data, d => d.id)].map(l => {\n const t0 = d3.min(l[1], d => +d.time),\n t = d3\n .scaleLinear()\n .domain([t0, t0 + 1000000])\n .range([0, 2]);\n return {\n type: \"Feature\",\n properties: { color: color(l[0]) },\n geometry: {\n type: \"LineString\",\n coordinates: l[1].map(d => [+d.lon, +d.lat, z(d.alt), t(d.time)])\n }\n };\n })\n };\n\n return route;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"projection = d3\n .geoMercator()\n .fitExtent([[-2, -2], [2, 2]], route)\n .precision(0.0001)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"xy = d => {\n d = d.split(/,/).map(d => +d);\n d[1] = -d[1];\n return d.join(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"z = {\n const scale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([0, 0.15]);\n return (d, alpha) => scale(d[3] * alpha + (1 - alpha) * d[2]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"/* *** OBSOLETE *** \n \n \n*/\nfunction bboxline(low, hi, opts) {\n let a = \"\",\n i = 0;\n const corners = [\n [low[0], low[1]],\n [low[0], hi[1]],\n [hi[0], hi[1]],\n [hi[0], low[1]]\n ];\n for (const c of corners)\n a += `line__${i++}=\"start: ${c[0]} ${c[1]} ${low[2]}; end: ${c[0]} ${\n c[1]\n } ${hi[2]}; color: ${opts.color};\"\\n`;\n\n corners.push(corners[0]);\n d3.pairs(corners).forEach(p => {\n a += `line__${i++}=\"start: ${p[0][0]} ${p[0][1]} ${low[2]}; end: ${\n p[1][0]\n } ${p[1][1]} ${low[2]}; color: ${opts.color};\"\\n`;\n a += `line__${i++}=\"start: ${p[0][0]} ${p[0][1]} ${hi[2]}; end: ${\n p[1][0]\n } ${p[1][1]} ${hi[2]}; color: ${opts.color};\"\\n`;\n });\n\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"function bboxtube(low, hi, opts) {\n let a = \"\",\n i = 0;\n\n if (opts.color) opts.material = `color: ${opts.color};`;\n\n const corners = [\n [low[0], low[1]],\n [low[0], hi[1]],\n [hi[0], hi[1]],\n [hi[0], low[1]]\n ];\n for (const c of corners)\n a += ``;\n\n corners.push(corners[0]);\n d3.pairs(corners).forEach(p => {\n a += ``;\n a += ``;\n });\n\n return `${a}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"scene = `\n\n\n\n\n\n\n\n\n${bboxtube([-2, -2, 0], [2, 2, 8 * 0.15], {\n material: \"color: lime; metalness: 0.3; roughness:0.8\",\n radius: 0.005\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`---\n_libs_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-scale-chromatic@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"map = {\n const width = 1500,\n height = 1200;\n const scale0 = projection.scale(),\n translate0 = projection.translate(),\n context = DOM.context2d(width, width, 2), // must be square to be mapped to the square \n path = d3.geoPath(projection).context(context);\n\n projection.fitExtent([[0, 0], [width, width]], route);\n context.beginPath();\n //path(world);\n context.fillStyle = \"rgba(255, 255, 255, 0.5)\";\n context.fill();\n context.strokeStyle = \"#222\";\n context.stroke();\n route.features.forEach(r => {\n context.beginPath();\n path(r);\n context.lineWidth = 2;\n context.strokeStyle = r.properties.color;\n context.stroke();\n });\n context.canvas.setAttribute(\"id\", \"map\");\n\n projection.scale(scale0).translate(translate0);\n\n context.canvas.style = \"width:100%; height:auto\";\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"aframe = {\n await require(\"aframe\");\n\n // await import(\"aframe-curve-component/dist/aframe-curve-component.js?module\");\n // await import(\"aframe-extras/dist/aframe-extras.js?module\");\n await require(\"aframe-extras/dist/aframe-extras.js\").catch(() => {}); // works on Firefox\n\n await require(\"aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js\").catch(\n () => {}\n );\n\n return window.AFRAME;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"