Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
Public
Edited
Nov 11, 2023
1 star
deck.gl | population density map of South Koreathree.js | Physics basicthree.js | Shader patternsthree.js | Shader (Sea)three.js | Shader basicdeck.gl | LineLayer + Tooltipdeck.gl | TripsLayer + Animationdeck.gl | HexagonLayer + Camera Animationthree.js | FontLoaderthree.js | Camera animationthree.js | GLTFLoaderthree.js | OrbitControls
three.js | Shader (galaxy)
Also listed in…
Big data visualization
renderer.domElement
{
while (true) {
renderer.render(scene, camera);
const elapsedTime = clock.getElapsedTime();
// Update material
material.uniforms.uTime.value = elapsedTime;
yield null;
}
}
generateGalaxy()
generateGalaxy = () => {
disposeScene(scene, renderer);
/**
* Geometry
*/
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(parameters.count * 3);
const colors = new Float32Array(parameters.count * 3);
const scales = new Float32Array(parameters.count * 1);
const randomness = new Float32Array(parameters.count * 3);
const insideColor = new THREE.Color(parameters.insideColor);
const outsideColor = new THREE.Color(parameters.outsideColor);
for (let i = 0; i < parameters.count; i++) {
const i3 = i * 3;
// Position
const radius = Math.random() * parameters.radius;
const branchAngle =
((i % parameters.branches) / parameters.branches) * Math.PI * 2;
const randomX =
Math.pow(Math.random(), parameters.randomnessPower) *
(Math.random() < 0.5 ? 1 : -1) *
parameters.randomness *
radius;
const randomY =
Math.pow(Math.random(), parameters.randomnessPower) *
(Math.random() < 0.5 ? 1 : -1) *
parameters.randomness *
radius;
const randomZ =
Math.pow(Math.random(), parameters.randomnessPower) *
(Math.random() < 0.5 ? 1 : -1) *
parameters.randomness *
radius;
positions[i3] = Math.cos(branchAngle) * radius;
positions[i3 + 1] = 0;
positions[i3 + 2] = Math.sin(branchAngle) * radius;
// Randomness
randomness[i3] = randomX;
randomness[i3 + 1] = randomY;
randomness[i3 + 2] = randomZ;
// Color
const mixedColor = insideColor.clone();
mixedColor.lerp(outsideColor, radius / parameters.radius);
colors[i3] = mixedColor.r;
colors[i3 + 1] = mixedColor.g;
colors[i3 + 2] = mixedColor.b;
// Scale
scales[i] = Math.random();
}
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
geometry.setAttribute("aScale", new THREE.BufferAttribute(scales, 1));
geometry.setAttribute(
"aRandomness",
new THREE.BufferAttribute(randomness, 3)
);
/**
* Points
*/
const points = new THREE.Points(geometry, material);
scene.add(points);
}
material = new THREE.ShaderMaterial({
depthWrite: false,
blending: THREE.AdditiveBlending,
vertexColors: true,
vertexShader: galaxyVertexShader,
fragmentShader: galaxyFragmentShader,
uniforms: {
uTime: { value: 0 },
uSize: { value: 30 * renderer.getPixelRatio() }
}
})
scene = {
const scene = new THREE.Scene();
return scene;
}
parameters = ({
count: 200000,
size: 0.005,
radius: 5,
branches: 3,
spin: 1,
randomness: 0.5,
randomnessPower: 3,
insideColor: "#ff6030",
outsideColor: "#1b3984"
})
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.
