Designer. Geek. Beer addict. Data queen.
Public
Edited
May 1, 2024
5 stars
deckgl = {
return this || new deck.DeckGL({
container,
views: [new deck.OrbitView()],
initialViewState: {target: [0, 0, 0], rotationX: 0, zoom: 2},
controller: true
});
}
{
deckgl.setProps({
effects: [
new deck.LightingEffect({ambientLight, pointLight1, pointLight2, cameraLight, directionalLight})
],
layers: [
new deck.PointCloudLayer({
id: 'point-lights',
data: [pointLight1, pointLight2],
coordinateSystem: deck.COORDINATE_SYSTEM.IDENTITY,
getPosition: d => d.position,
getColor: d => d.color,
pointSize: 5,
material: null
}),
new deck.SimpleMeshLayer({
id: 'spheres',
coordinateSystem: deck.COORDINATE_SYSTEM.IDENTITY,
opacity: 1,
data: sphereLayoutData,
mesh: sphereMesh,
getPosition: d => d.position,
getColor: [128, 128, 128],
material: sphereMaterial
})
]
});
return 'Set up scene'
}
{
const inputs = controlPanel.querySelectorAll('input');
for (const input of inputs) {
input.oninput = redraw;
}
redraw();
return 'initialization';
}
redraw = function() {
const inputs = controlPanel.querySelectorAll('input');
const settings = {};
for (const input of inputs) {
const name = input.id;
const value = +input.value;
settings[name] = value;
controlPanel.querySelector(`#${name}-value`).innerHTML = value;
}
ambientLight.intensity = settings.ambientLight;
directionalLight.intensity = settings.directionalLight;
cameraLight.intensity = settings.cameraLight;
pointLight1.intensity = settings.pointLight1;
pointLight2.intensity = settings.pointLight2;
sphereMaterial.ambient = settings.ambient;
sphereMaterial.diffuse = settings.diffuse;
sphereMaterial.shininess = settings.shininess;
sphereMaterial.specularColor = [settings.specularR, settings.specularG, settings.specularB];
deckgl.redraw(true);
}
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.
