Plotly js 3D Scatter Chart with colorscale

Question

I am trying a 3D Scatter plot with plotly js. is there any way I can add a color scale to the widget as in the below screenshot

When I tried to create I am only able to render 3D chart with some colors. I am not able to achieve a color scale and the legend as in attached screenshot

https://codepen.io/rudi8292/pen/RRxBrQ

        <head>
<!-- Plotly.js -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        </head>
        <body>
        <!-- Plotly chart will be drawn inside this DIV -->
        <div id="myDiv" style="width:100%;height:100%"></div>
      <button type="button" class="button" id="this_button">Click here for update</button>
        <script>
        /* JAVASCRIPT CODE GOES HERE */
        </script>
        </body>
var trace1 = {
  x : [3],
  y: [4],
  z : [6],
  mode: 'markers',
  marker: {
    size: 12,
    line: {
      color: 'rgba(217, 217, 217, 0.14)',
      width: 0.5
    },
    opacity: 0.8
  },
  type: 'scatter3d'
};

var trace5 = {
  x : [2],
  y: [5],
  z : [6],
  mode: 'markers',
  marker: {
    size: 11,
    line: {
      color: 'rgba(217, 217, 217, 0.14)',
      width: 0.5
    },
    opacity: 0.8
  },
  type: 'scatter3d'
};

var trace4 = {
  x : [1],
  y: [3],
  z : [4],
  mode: 'markers',
  marker: {
    size: 8,
    line: {
      color: 'rgba(217, 217, 217, 0.14)',
      width: 0.5
    },
     mode : 'markers',
    opacity: 0.8
  },
  type: 'scatter3d'
};

var trace2 = {
  x : [2],
  y: [2],
  z : [2],
  mode: 'markers',
  marker: {
    size: 15,
    line: {
      color: 'rgba(217, 217, 217, 0.14)',
      width: 0.5
    },
    opacity: 0.8
  },
  type: 'scatter3d'
};

var trace3 = {
  x : [1],
  y: [1],
  z : [1],
  mode: 'markers',
  marker: {
    size: 12,
    line: {
      color: 'rgba(217, 217, 217, 0.14)',
      width: 0.5
    },
    opacity: 0.8
  },
  type: 'scatter3d'
};

var data = [trace1, trace2,trace3,trace4,trace5];
var layout = {
    margin: {
    l: 0,
    r: 0,
    b: 0,
    t: 0
  },
  xaxis : {
    title : "This",
  },
  yaxis : {
    title : "That"
  },
  zaxis : {
    title : "where"
  }};     
Plotly.newPlot('myDiv', data, layout);

$("#this_button").click(function(){
  console.log("clicked");
  var update = {
          x : [[1,2,3,4,5]],
          y : [[1,2,3,4,5]],
          z : [[1,2,3,4,5]],
          size :[[12,13,14,15,16]],
          'marker.color' : [["#001","#005","#0f0","#f00","#00f"]],
           text : "size"
      }
      
       Plotly.restyle('myDiv', update,[0,1,2,3,4]);
});

score 0 · Answer 1 · answered Feb 17 '22 at 05:20

I have found a similar sammple https://codepen.io/etpinard/pen/mWQNrq

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>
Plotly.plot('graph', {
    data:[{
    marker: {
        showscale: true,
        colorbar: {
            x: 0
        },
        size: [28.666666666666668, 20.666666666666668, 15.333333333333334,      17.666666666666668, 19.0, 17.666666666666668, 26.0, 21.0, 21.666666666666668, 27.0, 21.666666666666668, 16.666666666666668, 27.0, 14.0, 29.666666666666668, 22.0, 16.0, 28.0, 27.0, 25.333333333333332],
       cmax: 14, 
    cmin: 20,
        color: [28.666666666666668, 20.666666666666668, 15.333333333333334,         17.666666666666668, 19.0, 17.666666666666668, 26.0, 21.0, 21.666666666666668, 27.0, 21.666666666666668, 16.666666666666668, 27.0, 14.0, 29.666666666666668, 22.0, 16.0, 28.0, 27.0, 25.333333333333332],
        colorscale: 'Viridis'
    },
    mode: "markers",
    x: [630, 310, 260, 566, 566, 400, 515, 630, 151, 400, 515, 176, 230, 260, 151, 648, 648, 176, 230, 310], 
    y: [200, 100, 200, 100, 200, 100, 100, 100, 200, 200, 200, 200.1234, 200, 100, 100, 200, 100, 100, 100, 200], 
    z: [495, 18, 104, 33, 33, 615, 10, 495, 420, 615, 10, 232, 515, 104, 420, 327, 327, 232, 515, 18],
    text: [
        "vav-01-01",
        "vav-01-02",
        "vav-01-03",
        "vav-01-04",
        "vav-01-05",
        "vav-01-06",
        "vav-01-07",
        "vav-01-08",
        "vav-01-09",
        "vav-01-10",
        "vav-02-01",
        "vav-02-02",
        "vav-02-03",
        "vav-02-04",
        "vav-02-05",
        "vav-02-06",
        "vav-02-07",
        "vav-02-08",
        "vav-02-09",
        "vav-02-10",
    ],
    hoverinfo: "name+text",
    type: "scatter3d",
    name: "Floor 1",
    showlegend: true,
    showscale: true
}],
    layout: {
        showlegend: false,
        showscale: true
    }
});

Plotly js 3D Scatter Chart with colorscale

1 Answers1