Code snippet for Plotting 3D data (3D scatter plot) using react-typescript and plotly

ScatterPlot3D.tsx

import { Data } from 'plotly.js'
import Plot from 'react-plotly.js'

interface WidgetProps {
  x: number[]
  y: number[]
  z: number[]
}

function PlotWidget({ fileId = 434 }: { fileId: number }) {
  const { id } = useOutletContext<ProjectType>()

  const URL = `data/source`
  const { data, isLoading } = useQuery<DevfileWidgetProps>('plot-data', () => {
    return axios.get(URL).then(res => res.data)
  })

  const plotData: Data[] = useMemo(() => {
    return [
      {
        ...data,
        name: '3D data viewer',
        mode: 'markers',
        type: 'scatter3d',
        marker: {
          size: 12,
          line: {
            color: 'rgba(217, 217, 217, 0.14)',
            width: 0.5,
          },

          opacity: 0.8,
        },
      },
    ]
  }, [data])

  const layout = {
    margin: {
      l: 0,
      r: 0,
      b: 0,
      t: 0,
    },
  }

  if (isLoading)
    return (
      <Card>
        <Card.Header>
          <Card.Title>3D Scatter</Card.Title>
        </Card.Header>
        <Card.Body>
          <Card.LoadingDiv />
        </Card.Body>
      </Card>
    )

  return (
    <Card>
      <Card.Header>
        <Card.Title>3D Scatter</Card.Title>
      </Card.Header>
      <Card.Body>
        <Plot data={plotData} layout={layout} />
      </Card.Body>
    </Card>
  )
}

export default PlotWidget