How to add gradient colors in Plotly

Question

How to add gradient colors in Plotly

1.4k Views Asked by Rohit Chakraborty At 13 February 2023 at 03:30

I am trying to add gradient colors in edges of a force directed graph made in Plotly.js. I have taken the input through Json file and have also used 'color_continuous_scale' to add the colors. But the desired result is not coming.

Full code:

<html>
  <head>
    <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
    <style>
      .graph-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .main-panel {
        width: 70%;
        float: left;
      }

      .side-panel {
        width: 30%;
        background-color: lightgray;
        min-height: 300px;
        overflow: auto;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="graph-container">
      <div id="myDiv" class="main-panel"></div>
      <div id="lineGraph" class="side-panel"></div>
    </div>
    <script>

      fetch('data.json')
        .then(response => response.json())
        .then(data => {
          var nodes = data.nodes;
          var edges = data.edges;
        
          
        
    
      var x = [];
      var y = [];
      var z = [];

      for (var i = 0; i < nodes.length; i++) {
        x.push(nodes[i].x);
        y.push(nodes[i].y);
        z.push(nodes[i].z);


      }

  const edge_x  = [];
  const edge_y  = [];
  const edge_z  = [];

  for (var i = 0; i < edges.length; i++) {
    const a = nodes[data.edges[i].source];
    const b = nodes[data.edges[i].target];
    edge_x.push(a.x, b.x, null);
    edge_y.push(a.y, b.y, null);
    edge_z.push(a.z, b.z, null);
  }

  const traceEdges = {
    x: edge_x,
    y: edge_y,
    z: edge_z,
    type: 'scatter3d',
    mode: 'lines',
    line: { color: 'traceEdges', color_continuous_scale: 'Inferno', width: 10},
    opacity: 0.8
  };

     
      var traceNodes = {
        x: x, y: y, z: z,
        mode: 'markers',
        marker: { size: 12, color: 'red' },
        type: 'scatter3d',
        text: [0, 1, 2, 3, 4],
        hoverinfo: 'text',
        hoverlabel: {
          bgcolor: 'white'
        },
        customdata: nodes.map(function(node) {
            if (node.value !== undefined)
               return node.value;
        }),
        type: 'scatter3d'
      };  

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

      Plotly.newPlot('myDiv',[traceEdges, traceNodes], layout);

      // max y value for the line plot
      const ymax = Math.max(...nodes.map(n => n.value).flat());

      document.getElementById('myDiv').on('plotly_click', function(data){
      var nodeIndex = data.points[0].pointNumber;
      var values = nodes[nodeIndex].value;

      Plotly.newPlot('lineGraph', [{
          type: 'scatter',
          mode: 'lines',
          x: [0, 1, 2],
          y: values
      }], {
          margin: { t: 0 },
          yaxis: {autorange: false, range: [0, ymax + 1]}
      }
          );
      }); 

    })
    
    </script>
   </body>
</html>

As you can see in the above image that the plot is showing only one color in the edges. I want to change this attribute to gradient coloring. Any changes in the code will be welcomed.

Original Q&A

There are 1 best solutions below

**EricLavault** · Answer 1 · 2023-02-13T17:00:19.337000

You need to specify a color array so that values from that array can be mapped to a colorscale :

color - Sets the line color. It accepts either a specific color or an array of numbers that are mapped to the colorscale relative to the max and min values of the array or relative to line.cmin and line.cmax if set.

colorscale - Sets the colorscale. Has an effect only if in line.color is set to a numerical array. The colorscale must be an array containing arrays mapping a normalized value to an rgb, rgba, hex, hsl, hsv, or named color string [...]. Alternatively, colorscale may be a palette name string [...].

For example by setting color: edge_y, edges are colored according to their positioning on the y axis (y coordinates of the source and target nodes) :

const traceEdges = {
  x: edge_x,
  y: edge_y,
  z: edge_z,
  type: 'scatter3d',
  mode: 'lines',
  line: {
    autocolorscale: false,
    colorscale: 'Cividis',
    color: edge_y,
    width: 10
  },
  opacity: 0.8,
};

Nb. color_continuous_scale is specific to plotly.express (python), and the 'Inferno' color scale as well. You can't use it with plotly.js.

How to add gradient colors in Plotly

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PLOTLY

Related Questions in PLOTLY.JS

Related Questions in FORCE-DIRECTED-GRAPH

Trending Questions

Popular # Hahtags

Popular Questions