JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG">
</script>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div id="potato">
</div>

JavaScript

var data = [
  {
    x: [0.988297181984, 0.386492412478, 0.0335649877601, 0.897892554887, 0.153274207376, 0.785970066254, 0.0614793669282, 0.930558326967, 0.726536131272, 0.621801325089], 
    y: [0.57213482907, 0.523133659556, 0.636020535333, 0.0350602870336, 0.239776945031, 0.798913894615, 0.810444109874, 0.134243356972, 0.881063197495, 0.801548109145], 
    z: [0.170690612495, 0.615738917083, 0.857926210971, 0.885908214893, 0.88728411025, 0.850272123307, 0.412546857397, 0.203671652164, 0.121580254982, 0.782746100904], 
    marker: {
      line: {
        color: "rgba(217, 217, 217, 0.14)", 
        width: 0.5
      }, 
      opacity: 0.8, 
      size: 12
    }, 
    mode: "markers", 
    name: "$\\theta$", 
    type: "scatter3d"
  }
];
var layout = {
  margin: {
    r: 0, 
    t: 0, 
    b: 0, 
    l: 0
  }, 
  scene: {
    xaxis: {
      backgroundcolor: "rgb(230, 230,230)", 
      showbackground: true, 
      title: "$\\theta$"
    }, 
    yaxis: {
      backgroundcolor: "rgb(230, 230,230)", 
      showbackground: true, 
      title: "$Y$"
    }, 
    zaxis: {title: "z axis title"}
  }, 
  showlegend: true
};
Plotly.plot('potato', data, layout);