chart = {
replay;
const div = document.createElement("div");
div.appendChild(renderer.domElement);
drawCircles();
div.addEventListener("mousemove", trackMouse, false);
div.addEventListener("dblclick", zoom, false);
tooltip.attach(div);
invalidation.then(() => {
dispose();
div.removeEventListener("mousemove", trackMouse);
div.removeEventListener("dblclick", zoom);
const mem = renderer.info.memory;
if (mem.geometries > 0 || mem.textures > 0) console.log(mem);
});
mutable rendering = "";
return div;
}
camera = {
const camera = new THREE.PerspectiveCamera(75, width/height, 0.2, 1500);
camera.aspect = width / height;
camera.updateProjectionMatrix();
camera.position.set(0, 650, 0);
return camera;
}
scene = {
const scene = new THREE.Scene();
scene.position.x = -dimensions.width / 2;
scene.position.y = dimensions.height / 2;
scene.position.z = -dimensions.depth / 2;
scene.background = new THREE.Color(0xffffff);
return scene;
}
controls = {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2.5;
controls.minDistance = 150;
controls.maxDistance = 650;
controls.addEventListener("change", () => {
tooltip.clear();
renderer.clear();
renderer.render(scene, camera);
});
controls.update();
invalidation.then(() => controls.dispose());
return controls;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.autoClear = false;
invalidation.then(() => renderer.dispose());
return renderer;
}
render = () => {
renderer.clear();
renderer.render(scene, camera);
}
raycaster = new THREE.Raycaster()
mouse = ({
screen: new THREE.Vector2(),
scene: new THREE.Vector2(),
animating: false,
focus: null
})
trackMouse = e => {
e.preventDefault();
if (e.target instanceof HTMLCanvasElement) {
const x = e.offsetX + e.target.offsetLeft;
const y = e.offsetY + e.target.offsetTop;
mouse.screen.x = x;
mouse.screen.y = y;
mouse.scene.x = (e.offsetX / width) * 2 - 1;
mouse.scene.y = -(e.offsetY / height) * 2 + 1;
if (!mouse.animating) intersect();
}
}
intersect = () => {
camera.updateMatrixWorld();
raycaster.setFromCamera(mouse.scene, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
let target;
for (let current of intersects) {
if (current.object.info) {
target = current.object;
break;
}
}
if (target) {
if (mouse.focus !== target) {
cancelHighlight();
mouse.focus = target;
addFrame(target);
tooltip.update(mouse.focus);
render();
}
}
else cancelHighlight();
}
else cancelHighlight();
}
cancelHighlight = () => {
const f = mouse.focus;
if (f) {
if (f.frame) {
f.remove(f.frame);
f.frame.geometry.dispose();
f.frame.material.dispose();
f.frame = null;
}
mouse.focus = null;
tooltip.clear();
render();
}
}
zoom = e => {
mouse.animating = true;
// Disable the OrbitControls to avoid interfering with the animation
controls.enabled = false;
let requestId;
if (mouse.focus)
moveCamera(
true,
camera.position.x, 450, camera.position.z,
-(mouse.focus.position.x + mouse.focus.scale.x / 2) + camera.position.x,
dimensions.height / 2,
-(mouse.focus.position.z + mouse.focus.scale.z / 2) + camera.position.z);
else
moveCamera(
false,
0, 650, 0,
-dimensions.width / 2, dimensions.height / 2, -dimensions.depth / 2,
-1.57, 0, 0);
function moveCamera(dollyOut, x, y, z, sx, sy, sz, rx, ry, rz) {
animate();
if (dollyOut)
gsap.to(camera.position, {duration: 0.1, y: 600}).then(() => move());
else
move();
function move() {
const tweens = [];
if (requires(x, y, z)) tweens.push(gsap.to(camera.position, {duration: 0.25, x, y, z}));
if (requires(sx, sy, sz)) tweens.push(gsap.to(scene.position, {duration: 0.25, x: sx, y: sy, z: sz}));
if (requires(rx, ry, rz)) tweens.push(gsap.to(camera.rotation, {duration: 0.25, x: rx, y: ry, z: rz}));
Promise.all(tweens).then(() => {
// Exit the animation loop after the transition is finished.
cancelAnimationFrame(requestId);
if (!mouse.focus)
controls.reset();
else
controls.update();
mouse.animating = false;
controls.enabled = true;
});
}
}
function requires(a, b, c) {
return a || a === 0 || b || b === 0 || c || c === 0;
}
function animate() {
requestId = requestAnimationFrame(animate);
renderer.clear();
renderer.render(scene, camera);
}
}
tooltip = {
const tooltip = initDivTooltip();
invalidation.then(() => tooltip.dispose());
return tooltip;
}
initDivTooltip = () => {
const div = document.createElement("div");
div.style.position = "absolute";
div.style.display = "none";
div.style.font = "9pt Tahoma";
div.style.backgroundColor = "white";
div.style.opacity = 0.85;
div.style.borderRadius = "3px";
div.style.boxShadow = "1px 1px 1px #666666";
div.style.border = "solid 1px #666666";
div.style.padding = "3px";
div.style.pointerEvents = "none";
const tooltip = {
attach: function(container) {
if (container) container.appendChild(div);
},
update: function(target) {
div.innerText = getNodeFullName(target.info) + "\n" + format(target.info.value);
div.style.display = "block";
div.style.left = `${mouse.screen.x + 5}px`;
div.style.top = `${mouse.screen.y + 5}px`;
},
clear: function() {
div.innerText = "";
div.style.display = "none";
},
dispose: function() {
if (div.parentElement) div.parentElement.removeChild(div);
}
}
return tooltip;
}
drawCircles = () => {
mouse.animating = true;
// Disable the OrbitControls to avoid interfering with the animation
controls.enabled = false;
let requestId, tweens = [];
animate();
camera.position.set(-350, 350, 550);
camera.rotation.set(-0.5, -0.5, -0.3);
chartData.forEach(layer => layer[1].forEach(node => drawNode(node, tweens)));
tweens.push(gsap.to(camera.position, {duration: time * 1.25, x: 0, y: 650, z: 0}));
tweens.push(gsap.to(camera.rotation, {duration: time * 1.25, x: -1.57, y: 0, z: 0}));
Promise.all(tweens).then(() => {
cancelAnimationFrame(requestId);
mouse.animating = false;
controls.enabled = true;
});
function animate() {
requestId = requestAnimationFrame(animate);
render();
}
}
drawNode = (node, tweens) => {
const h = cylinderHeight, hh = h / 2,
w = node.r * 2,
d = node.r * 2,
cl = chartData.length - node.height - 1;
const initY = (node.height === 0 ? 250 : -250) * Math.random() * 5,
duration = Math.random() * 2;
const circle = addCircle(0, h, node.x, initY, node.y, cl);
circle.info = node;
tweens.push(gsap.to(circle.position, {duration: time, y: cl * h}));
tweens.push(gsap.to(circle.scale, {duration: time * 1.5, x: node.r, z: node.r}));
const rx = Math.PI * 1.5;
if (!node.children) {
const labels = node.data.name.split(/(?=[A-Z][^A-Z])/g),
max = Math.max(...labels.map(label => label.length * fontSize * tolerance));
if (max < w) {
if (labels.length * fontSize > d) labels.pop();
if (labels.length * fontSize < d) {
const ty = node.y - (labels.length - 1) * 6;
labels.forEach((label, i) => {
const t = addText(
label, fontSize, 0.3,
node.x, initY, ty + (i * 12),
rx, 0, 0);
tweens.push(gsap.to(t.position, {duration: time, y: cl * h + hh}));
});
}
}
}
}
addCircle = (r, h, x, y, z, color) => {
const circle = new THREE.Mesh(pool.geometry, pool.materials[color]);
circle.position.set(x, y, z);
circle.scale.set(r, h, r);
const frame = new THREE.LineSegments(pool.edgeGeometry, pool.lineMaterials[color]);
circle.add(frame);
scene.add(circle);
return circle;
}
addText = (text, size, h, x, y, z, rx, ry, rz) => {
const geometry = new THREE.TextBufferGeometry(
text,
{font: helvetiker, size, height: h});
geometry.computeBoundingSphere();
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, pool.textMaterial);
if (!geometry.boundingBox) geometry.computeBoundingBox();
const bbox = geometry.boundingBox;
mesh.position.set(x - bbox.max.x / 2, y, z);
mesh.rotation.set(rx, ry, rz);
scene.add(mesh);
return mesh;
}
// Highlight frame
addFrame = target => {
const geometry = new THREE.EdgesGeometry(target.geometry),
material = new THREE.LineBasicMaterial({color: 0x666666, linewidth: 1}),
frame = new THREE.LineSegments(geometry, material);
frame.renderOrder = 1;
target.frame = frame;
target.add(frame);
}
pool = {
const geometry = new THREE.CylinderGeometry(1, 1, 1, 128),
colors = chartData.map(layer => color(layer[0]));
return {
geometry,
materials: colors.map(color => new THREE.MeshBasicMaterial({
color,
opacity: 0.9,
transparent: true
})),
edgeGeometry: new THREE.EdgesGeometry(geometry),
lineMaterials: colors.map(color => new THREE.LineBasicMaterial({
color: d3.color(color).darker(0.5).formatHex(),
linewidth: 1
})),
textMaterial: new THREE.MeshBasicMaterial({color: 0x333333})
}
};
dispose = () => {
cleanup(scene);
function cleanup(obj) {
for(let i = obj.children.length - 1; i >= 0; i--) {
const child = obj.children[i];
obj.remove(child);
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
if (child.children && child.children.length > 0) cleanup(child);
}
}
}
chartData = {
const data = await FileAttachment("flare-2.json").json();
const root = d3.pack()
.size([dimensions.width, dimensions.depth])
.padding(3)(
d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
);
return Array.from(d3.group(root, d => d.height));
}
getNodesAt = layer => chartData[layer][1];
getNodeFullName = node => node.ancestors().reverse().map(d => d.data.name).join("/");
format = d3.format(",d")
color = d3.scaleSequential([8, 0], d3.interpolateMagma)
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.
