3D Cone Plots in JavaScript

How to make 3D cone plots in javascript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Basic 3D Cone

var data = [{
  type: "cone",
  x: [1], y: [1], z: [1],
  u: [1], v: [1], w: [0]
}]

var layout = {
  "scene": {
    "camera": {
      "eye": {x: -0.76, y: 1.8, z: 0.92}
    }
  }
}

Plotly.newPlot('myDiv',data,layout)

Multiple 3D Cone

var data = [{
      type: "cone",
      x: [1, 2, 3],
      y: [1, 2, 3],
      z: [1, 2, 3],
      u: [1, 0, 0],
      v: [0, 3, 0],
      w: [0, 0, 2],
      sizemode: "absolute",
      sizeref: 2,
      anchor: "tip",
      colorbar: {
        x: 0,
        xanchor: "right",
        side: "left"
      }
}]

var layout = {
    scene: {
      domain: {x: [0, 1]},
      camera: {
        eye: {x: -1.57, y: 1.36, z: 0.58}
      }
    },
    width: 800
}

Plotly.newPlot('myDiv', data, layout)

3D Cone Lighting

var data = [{
    type: "cone",
    name: "base",
    x: [1, 1, 1],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false
  },
  {
    type: "cone",
    name: "opacity:0.3",
    x: [2, 2, 2],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    opacity: 0.3
  },
  {
    type: "cone",
    name: "lighting.ambient:0.3",
    x: [3, 3, 3],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    lighting: {ambient: 0.3}
  },
  {
    type: "cone",
    name: "lighting.diffuse:0.3",
    x: [4, 4, 4],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    lighting: {diffuse: 0.3}
  },
  {
    type: "cone",
    name: "lighting.specular:2",
    x: [5, 5, 5],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    lighting: {specular: 2}
  },
  {
    type: "cone",
    name: "lighting.roughness:1",
    x: [6, 6, 6],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    lighting: {roughness: 1}
  },
  {
    type: "cone",
    name: "lighting.fresnel:2",
    x: [7, 7, 7],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    lighting: {fresnel: 2}
  },
  {
    type: "cone",
    name: "lighting.position x:0,y:0,z:1e5",
    x: [8, 8, 8],
    y: [1, 2, 3],
    z: [1, 1, 1],
    u: [1, 2, 3],
    v: [1, 1, 2],
    w: [4, 4, 1],
    hoverinfo: "u+v+w+name",
    showscale: false,
    lightposition: {x: 0, y: 0, z: 1e5}
}]

var layout = {
  scene: {
    aspectmode: "data",
    camera: {
      eye: {x: 0.05, y: -2.6, z: 2}
    }
  },
  width: 500,
  height: 500,
  margin: {t: 0, b: 0, l: 0, r: 0}
}

Plotly.newPlot('myDiv',data,layout)

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var data = [{\n type: \"cone\",\n name: \"base\",\n x: [1, 1, 1],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false\n },\n {\n type: \"cone\",\n name: \"opacity:0.3\",\n x: [2, 2, 2],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n opacity: 0.3\n },\n {\n type: \"cone\",\n name: \"lighting.ambient:0.3\",\n x: [3, 3, 3],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n lighting: {ambient: 0.3}\n },\n {\n type: \"cone\",\n name: \"lighting.diffuse:0.3\",\n x: [4, 4, 4],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n lighting: {diffuse: 0.3}\n },\n {\n type: \"cone\",\n name: \"lighting.specular:2\",\n x: [5, 5, 5],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n lighting: {specular: 2}\n },\n {\n type: \"cone\",\n name: \"lighting.roughness:1\",\n x: [6, 6, 6],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n lighting: {roughness: 1}\n },\n {\n type: \"cone\",\n name: \"lighting.fresnel:2\",\n x: [7, 7, 7],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n lighting: {fresnel: 2}\n },\n {\n type: \"cone\",\n name: \"lighting.position x:0,y:0,z:1e5\",\n x: [8, 8, 8],\n y: [1, 2, 3],\n z: [1, 1, 1],\n u: [1, 2, 3],\n v: [1, 1, 2],\n w: [4, 4, 1],\n hoverinfo: \"u+v+w+name\",\n showscale: false,\n lightposition: {x: 0, y: 0, z: 1e5}\n}]\n\nvar layout = {\n scene: {\n aspectmode: \"data\",\n camera: {\n eye: {x: 0.05, y: -2.6, z: 2}\n }\n },\n width: 500,\n height: 500,\n margin: {t: 0, b: 0, l: 0, r: 0}\n}\n\nPlotly.newPlot('myDiv',data,layout) \n"}">