React 3D Charts

import { Scatter3D, Surface3D, Globe3D } from "@chartts/gl"

export function ResearchViz({ data }) {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div className="rounded-xl card p-6">
        <Scatter3D
          data={data.samples}
          x="x" y="y" z="z"
          colorBy="cluster"
          className="h-96"
          orbit
          picking
          onPointClick={(point) => console.log(point)}
        />
      </div>
      <div className="rounded-xl card p-6">
        <Surface3D
          data={data.surface}
          x="longitude" y="latitude" z="elevation"
          className="h-96"
          colorScale="viridis"
          wireframe={false}
          orbit
        />
      </div>
      <div className="col-span-2 rounded-xl card p-6">
        <Globe3D
          data={data.locations}
          lat="lat" lng="lng" value="revenue"
          className="h-96"
          autoRotate
          markerClassName="fill-cyan-400"
        />
      </div>
    </div>
  )
}