Public
Edited
Jun 5, 2023
8 stars
chart = {
if (this) return this; // avoids a crash when going fullscreen (??)
const scene = `<a-scene embedded>
<a-sky color="#abc0ea"></a-sky>
<a-entity id="axes"
line__x="start: 0 0 0; end: 1 0 0; color: #fff"
line__y="start: 0 0 0; end: 0 1 0; color: #fff"
line__z="start: 0 0 0; end: 0 0 1; color: #fff"
></a-entity>
<a-entity look-controls wasd-controls="wsAxis: y; wsInverted: true">
<a-entity camera position="1 1 8"></a-entity>
</a-entity>
</a-scene>`,
chart = html`<div style="width:${width}px;height:${
width * 0.8
}px">${scene}</div>`;
create(chart, data);
return chart;
}
// https://observablehq.com/@enjalot/hello-a-frame-vr
function create(chart, data) {
var scene = d3.select(chart).select("a-scene");
scene.selectAll(".dot").remove();
const r = 0.05; // radius or half-width
scene
.selectAll(".dot")
.data(data)
.join("a-sphere") // <a-sphere> or <a-box>
.classed("dot", true)
.attr("color", d => d.color)
.attr("radius", r) // for <a-sphere>
.attr("width", 2 * r) // for <a-box>
.attr("height", 2 * r)
.attr("depth", 2 * r)
.attr("position", (_, i) =>
[3 * Math.random(), 3 * Math.random(), 3 * Math.random()].join(" ")
);
}
update(chart, res.result) // update will be called each time UMAP yields {res}, or {chart} is recreated
function update(chart, values) {
const x = d3
.scaleLinear()
.range([-4, 4])
.domain(d3.extent(values.flat()));
d3.select(chart)
.selectAll(".dot")
.transition()
.duration(5000)
//.attr("material", "shader: flat")
.attr("position", (_, i) => values[i].map(x).join(" "));
return html`<tt>> updated ${
values.length
} values at ${new Date().toLocaleString(undefined, {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
})}.`;
}
aframe = require("aframe")
import { data, res } with {
nComponents,
distanceType
} from "@fil/umap-o-matic@1125"
d3 = require("d3@5")
import {select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
