renderer.domElement
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xfefefe);
// create cubes
for (let x = 0; x < 9; ++x) {
for (let y = 0; y < 9; ++y) {
for (let z = 0; z < num_grids; ++z) {
console.log(x, y, z);
var kCube = cube(
setBlockColor(index_csv(x, y, z)),
index_csv(x, y, z) == null ? 0 : setOpac(index_csv(x, y, z))
);
kCube.position.x = 0 + 1 * x; // originally 10
kCube.position.y = 0 + 1 * y;
kCube.position.z = 10 + 1 * z;
scene.add(kCube);
}
}
}
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-25, 55, -75);
camera.lookAt(new THREE.Vector3(0, -100, 0));
return camera;
}
// define block coloring function
setBlockColor = d3
.scaleQuantize()
.domain(d3.extent(createArrayFromObjects(data)))
.range(["#EEAFF5", "#F37FFF", "#E40EFA", "#B206C4", "#8A0497"])
setOpac = d3
.scaleQuantize()
.domain(d3.extent(createArrayFromObjects(data)))
.range([0.03, 0.21, 0.28, 0.34, 0.4])
// read in sample data
df = FileAttachment("time_spent_per_cell.csv").csv({ typed: true })
data = d3.map(df, (d) => Object.values(d).slice(0, 81))
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
d3 = require("d3@6")
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.
