Published
Edited
Nov 28, 2020
1 star
normal = multivariateNormal(
// mean vector
[0, 0, 0],
// Covariance matrix
[
[4, 0, 0],
[0, 2, 0],
[0, 0, 3]
]
)
samples = normal.sample(10000)
points = {
const geometry = new THREE.Geometry();
const material = new THREE.PointsMaterial({
size: 0.2,
vertexColors: true,
blending: THREE.AdditiveBlending
});
samples.forEach(p => {
geometry.vertices.push(new THREE.Vector3(...p));
geometry.colors.push(new THREE.Color("rgb(255, 200, 200)"));
});
return new THREE.Points(geometry, material);
}
probs = {
const geometry = new THREE.Geometry();
const material = new THREE.PointsMaterial({
size: 0.2,
vertexColors: true,
blending: THREE.AdditiveBlending
});
// Create equally-spaced points
const n = 30;
const pdfPoints = []
d3.range(-5, 5, 10/n).forEach(x => {
d3.range(-5, 5, 10/n).forEach(y => {
d3.range(-5, 5, 10/n).forEach(z => {
pdfPoints.push({
pos: new THREE.Vector3(x, y, z),
val: normal.pdf([x, y, z])
});
});
});
});
// Set color based on normalized probability density
const max = d3.max(pdfPoints.map(d => d.val));
const color = d => d3.interpolateViridis(d / max);
pdfPoints.forEach(p => {
geometry.vertices.push(p.pos);
geometry.colors.push(new THREE.Color(color(p.val)));
});
return new THREE.Points(geometry, material);
}
// Meshes to visualize
meshes = {
const meshes = [];
if (check.includes("axis")) meshes.push(new THREE.AxisHelper(20));
if (check.includes("pdf")) meshes.push(probs);
if (check.includes("samples")) meshes.push(points);
return meshes;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000);
meshes.forEach(m => scene.add(m));
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0.3, -0.7, 0.2);
camera.up.set(0, 0, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
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.
