3D Data Visualization & Analytics

Write a React Three Fiber component that renders an animated 3D bar chart using InstancedMesh for a dataset of up to 10,000 bars. Requirements: (1) Accept a prop data: Array<{ id: string, value: number, category: string }> and a colorScale: (category: string) => string function. (2) Use a single InstancedMesh with BoxGeometry(1, 1, 1) — scale each instance on Y to represent value, normalized to a max height of 5 units. Position instances in a grid layout with 0.1 gap. (3) Per-instance color: use InstancedBufferAttribute with a Float32Array of RGB values derived from colorScale. Set mesh.instanceColor to this attribute. (4) Entry animation: on mount and on data change, use useFrame with a spring-like lerp (factor 0.08) to animate each bar's Y scale from 0 to its target value. Store target scales in a useRef Float32Array. (5) Hover interaction: use a Raycaster in useFrame to detect the hovered instance index. On hover, brighten that instance's color by multiplying RGB by 1.3. Show a Drei Html tooltip with the data point's id, value, and category. (6) Export as BarChart3D. Full TypeScript with proper R3F types.

Write a React Three Fiber force-directed 3D graph component. Requirements: (1) Accept props: nodes: Array<{ id: string, group: number, label: string }> and links: Array<{ source: string, target: string, strength: number }>. (2) Run D3-force simulation in a Web Worker: use forceSimulation with forceLink (distance 30), forceManyBody (strength -80), forceCenter, and a custom forceZ that adds a Z-axis component (use forceZ = alpha => nodes.forEach(n => n.vz -= n.z * alpha * 0.1)). Post node positions to main thread every 16ms. (3) In the main thread, receive positions and update a useRef positions object. In useFrame, lerp each node mesh position toward its target with factor 0.1. (4) Render nodes as SphereGeometry(0.3) with MeshStandardMaterial colored by group (use a D3 categorical color scale mapped to Three.js Color). Render edges as Line2 (from @react-three/drei) connecting source and target node positions. (5) On node click: camera fly-to animation — lerp camera.position toward node.position + [0, 0, 5] over 60 frames. (6) Label each node with Drei Text (fontSize 0.2, always face camera via billboarding). Full TypeScript.