Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
deck.gl | population density map of South Koreathree.js | Physics basicthree.js | Shader (galaxy)three.js | Shader patternsthree.js | Shader (Sea)deck.gl | LineLayer + Tooltipdeck.gl | TripsLayer + Animationdeck.gl | HexagonLayer + Camera Animationthree.js | FontLoaderthree.js | Camera animationthree.js | GLTFLoaderthree.js | OrbitControls
three.js | Shader basic
renderer.domElement
// Continuously updates
{
while (true) {
renderer.render(scene, camera);
const elapsedTime = clock.getElapsedTime();
// Update material
material.uniforms.uTime.value = elapsedTime;
yield null;
}
}
clock = new THREE.Clock();
material = new THREE.ShaderMaterial({
vertexShader: vertextShaderTxt,
fragmentShader: fragmentShaderTxt,
// wireframe: true
side: THREE.DoubleSide,
transparent: true,
uniforms: {
uFrequency: { value: new THREE.Vector2(10, 5) },
uTime: { value: 0 },
uColor: { value: new THREE.Color("orange") },
uTexture: { value: flagTexture }
}
})
img = await FileAttachment("flag-french.jpg").url()
flagTexture = new THREE.TextureLoader().load(img)
camera = {
const fov = 75;
const aspect = width / height;
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0.25, -0.25, 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.
