Maps — and other representations of the world.
import { data, interpolateTerrain } from "@d3/volcano-contours"
function volcanoScene({
displacementScale = 0.5,
width,
height,
...options
} = {}) {
const id = "a" + Math.random().toString(16).slice(2);
return html`
<a-scene embedded stats=false style="height: 500px" id=${id}>
<a-assets>
<img id=${id}-texture>
<img id=${id}-displacement>
<img id=${id}-normal>
</a-assets>
<a-plane
class="plane"
position="0 1.8 -3"
rotation="-30 0 0" width="${(width / height) * 4}" height="${4}"
src="#${id}-texture"
normal-map="#${id}-texture"
displacement-map="#${id}-displacement"
displacement-scale=${displacementScale}
segments-width=${Math.min(width, 200)}
segments-height=${Math.min(height, 200)}
></a-plane>
</a-scene>`;
}
updater = {
const s = d3.select(volcano);
const id = s.attr("id");
s.select(`#${id}-texture`).attr(
"src",
heatmap(data.values, {
width: data.width,
height: data.height,
color: interpolateTerrain
}).toDataURL()
);
s.select(`#${id}-displacement`).attr(
"src",
heatmap(data.values, {
width: data.width,
height: data.height,
color: (t) => d3.interpolateGreys(1 - t)
}).toDataURL()
);
let t0 = Date.now();
do {
const a = (2 + Math.sin((Date.now() - t0) / 3000)) / 3;
s.select(".plane").attr("displacement-scale", a);
yield { a };
} while (animate);
}
aframe = require("https://aframe.io/releases/0.8.2/aframe.min.js")
import { heatmap } from "@fil/heatmap"
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.
