function plot () {
     return Plotly.plot(gd, [
         {y: [2,1,2]},
         {y: [3,2,1], xaxis: 'x2'}
     ], {
         xaxis: {domain: [0, 0.5]},
         xaxis2: {domain: [0.5, 1]},
     });
 }
  plot: function (gd) {
    this.debug = debug();
    this.lorenz = lorenz().initialize({n: 300});

    this.gd = gd;

    Plotly.plot(gd, [
      {
        x: this.lorenz.x,
        y: this.lorenz.z,
        mode: 'markers',
      }
    ], {
      xaxis: {
        range: [-30, 30],
        autorange: false,
      },
      yaxis: {
        range: [0, 40],
        autorange: false,
      },
      dragmode: 'pan'
    }, {
      scrollZoom: true,
    });

    /*gd.on('plotly_animating', function () {
        console.log('plotly_animating');
      }).on('plotly_animated', function() {
        console.log('plotly_animated');
      });*/

    this.timer = timer()
      .onframe(function (frame, dt) {
        this.lorenz.compute();

        Plotly.animate(this.gd, {
          data: [{x: this.lorenz.x, y: this.lorenz.z}],
          traces: [0]
        }, {
          transition: {
            duration: 0,
          },
          frame: {
            duration: 0,
            redraw: false,
          }
        });

        this.debug.tick();
      }.bind(this))
      .start();

    this.createControls();
  },
  plot: function (gd) {
    this.initializeX();
    this.randomizeData(this.y1)
    this.randomizeData(this.y2)

    Plotly.plot(gd, [
      {
        x: this.x1, y: this.y1,
        mode: 'markers+lines',
      }, {
        x: this.x2, y: this.y2,
        mode: 'markers+lines',
      }
    ], {}, {scrollZoom: true});

  },
Example #4
0
  plot: function (gd) {
    this.initializeX();
    this.randomizeData(this.r1)
    this.randomizeData(this.r2)

    Plotly.plot(gd, [
      {
        r: this.r1,
        t: this.t1,
        mode: 'markers',
      }, {
        r: this.r2,
        t: this.t2,
        mode: 'markers',
      }
    ], {}, {scrollZoom: true});
 },
Example #5
0
  plot: function (gd) {
    this.randomizeData(0, this.x, this.y, 2)
    this.randomizeData(1, this.x, this.y, 3.5)
    this.randomizeData(2, this.x, this.y, 5)

    Plotly.plot(gd, [
      {
        x: this.x[0],
        y: this.y[0],
        type: 'scatter',
        mode: 'markers+lines',
        name: 'with tozero',
        fill: 'tozeroy',
        line: {simplify: false},
      },
      {
        x: this.x[1],
        y: this.y[1],
        type: 'scatter',
        mode: 'markers+lines',
        fill: 'tonexty',
        name: '1st tonext',
        line: {simplify: false},
      },
      {
        x: this.x[2],
        y: this.y[2],
        type: 'scatter',
        mode: 'markers+lines',
        fill: 'tonexty',
        name: '2nd tonext',
        line: {simplify: false},
      }
    ], {
      yaxis: {
        range: [0, 8]
      },
      margin: {
        t: 80,
        r: 30,
        b: 30,
        l: 30
      }
    }, {scrollZoom: true});
 },
  plot: function (gd) {
    this.range = [
      {x: [0, this.n / 1], y: [0, this.n / 1]},
      {x: [0, this.n / 2], y: [0, this.n / 2]},
      {x: [0, this.n], y: [0, this.n]},
    ];
    var range = this.range[0];
    this.initializeX();
    this.randomizeData(this.y1)
    this.randomizeData(this.y2)

    this.x1[0] = 0;
    this.y1[0] = 0;
    this.y2[0] = 0;

    Plotly.plot(gd, [
      {
        x: this.x1,
        y: this.y1,
        mode: 'markers',
      },
      {
        x: this.x1,
        y: this.y1,
        mode: 'markers',
        xaxis: 'x',
        yaxis: 'y2',
      },
    ], {
      dragmode: 'pan',
      xaxis: {
        range: range.x.slice(0)
      },
      yaxis: {
        domain: [0, 0.45],
        range: range.y.slice(0)
      },
      yaxis2: {
        anchor: 'x',
        domain: [0.55, 1],
        range: [0, this.n],
      }
    }, {scrollZoom: true});
 },
  plot: function (gd) {
    this.createDates();
    this.createSpeeds();
    this.createError();

    Plotly.plot(gd, [{
      x: this.x,
      y: this.y,
      line: {
        width: 1,
        simplify: false,
      },
      error_y: {
        width: 0,
        array: this.dy,
        thickness: 0.5
      }
    }], this.layout);
  },
Example #8
0
  plot: function (gd) {
    document.getElementById('plot').style.paddingTop = '50px';
    var n = 100;

    var frames = [
      {name: 'sine', data: [{x: [], y: []}]},
      {name: 'cosine', data: [{x: [], y: []}]},
      {name: 'circle', data: [{x: [], y: []}]},
    ];

    for (var i = 0; i < n; i++) {
      var t = i / (n - 1) * 2 - 1;

      // A sine wave:
      frames[0].data[0].x[i] = t;
      frames[0].data[0].y[i] = Math.sin(t * Math.PI * 2);

      frames[1].data[0].x[i] = t;
      frames[1].data[0].y[i] = Math.cos(t * Math.PI * 2);

      // A circle:
      frames[2].data[0].x[i] = Math.sin(t * Math.PI);
      frames[2].data[0].y[i] = Math.cos(t * Math.PI);
    }

    Plotly.plot(gd, [{
      x: frames[0].data[0].x,
      y: frames[0].data[0].y,
      line: {simplify: false},
    }], {
      updatemenus: [{
        buttons: [
          {method: 'animate', args: [['sine']], label: 'sine'},
          {method: 'animate', args: [['cosine']], label: 'cosine'},
          {method: 'animate', args: [['circle']], label: 'circle'}
        ]
      }]
    }).then(function() {
      Plotly.addFrames(gd, frames);
    });
  }
  plot: function (gd) {
    var z = [];
    for(var x = 0; x < 1000; x++) {
      z.push(new Array(1000));
      for (var y = 0; y < 1000; y++) {
        z[x][y] = ((x+y) % 10 > 0) ? null : 100 + Math.sin(x*y) * 50;
      }
    }

    var data = [
      {
        z: z,
        type: 'heatmap',
        zsmooth: 'best',
      }
    ];

    var layout = {
      width: 500,
      height: 500
    }

    Plotly.plot(gd, data, layout, { scrollZoom: true });
 },
Example #10
0
  plot: function (gd) {
    var frames = [];
    var sliders = [{
      steps: [],
      y: 0,
      currentvalue: {
        visible: true,
        prefix: 'Emotion: ',
      },
      yanchor: 'top',
      pad: {t: 20}
    }];

    var labels = [
      'Afraid',
      'Afraid',
      'Afraid',
      'Maybe a little curious',
      'Happy',
      'Happy',
      'Happy',
      'Happy',
      'Happy',
      'Happy',
      'Happy',
      'Happy',
    ];

    for (var i = 0; i < 11; i++) {
      var name = 'frame' + i;
      frames.push({
        name: name,
        layout: {
          'images[0].source': 'https://s3.amazonaws.com/images.rickyreusser.com/cat2/cat-' + i + '.jpg',
        }
      });

      sliders[0].steps.push({
        label: labels[i],
        method: 'animate',
        args: [[name], {mode: 'immediate', frame: {redraw: true, duration: 0}, transition: {duration: 0}}]
      })
    }

    Plotly.plot(gd,
      [{
        x: [0],
        line: {
          simplify: false
        }
      }],
      {
        margin: {
          t: 20,
          l: 30,
          r: 20,
        },
        images: [
          {
            x: 0,
            y: 0,
            xref: 'xaxis',
            yref: 'yaxis',
            xanchor: 'left',
            yanchor: 'bottom',
            sizex: 1,
            sizey: 1,
            source: 'https://s3.amazonaws.com/images.rickyreusser.com/cat2/cat-0.jpg',
          },
        ],
        sliders: sliders,
        xaxis: {range: [0, 4]},
        yaxis: {range: [0, 4]}
      }
    ).then(function() {
      return Plotly.addFrames(gd, frames);
    });
 },
    config: React.PropTypes.object,
    onClick: React.PropTypes.func,
    onBeforeHover: React.PropTypes.func,
    onHover: React.PropTypes.func,
    onUnHover: React.PropTypes.func,
    onSelected: React.PropTypes.func
  },

  shouldComponentUpdate(nextProps) {
    //TODO logic for detecting change in props
    return true;
  },

  componentDidMount() {
    let {data, layout, config} = this.props;
    Plotly.plot(this.container, data, layout, config);
    if (this.props.onClick)
      this.container.on('plotly_click', this.props.onClick);
    if (this.props.onBeforeHover)
      this.container.on('plotly_beforehover', this.props.onBeforeHover);
    if (this.props.onHover)
      this.container.on('plotly_hover', this.props.onHover);
    if (this.props.onUnHover)
      this.container.on('plotly_unhover', this.props.onUnHover);
    if (this.props.onSelected)
      this.container.on('plotly_selected', this.props.onSelected);
  },

  componentDidUpdate() {
    //TODO use minimal update for given changes
    this.container.data = this.props.data;
  plot: function (gd) {
    this.traces = [this.trace1, this.trace2, this.trace3];

    Plotly.plot(gd, this.traces, this.layout);
  },
 d3.json('data/gapminder-with-frames.json', function(err, d) {
   Plotly.plot(gd, d)
 });
 plot: function (gd) {
   Plotly.plot(gd, [{
     x: [1, 2, 3],
     y: [1, 2, 4],
     ids: ['a', 'a', 'b'],
     transforms: [{
       type: 'filter',
       filtersrc: 'ids',
       operation: '{}',
       value: ['a']
     }]
   }], {
     sliders: [{
       x: 0,
       y: 0,
       yanchor: 'top',
       xanchor: 'left',
       pad: {t: 20},
       steps: [{
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['a']}]}],
         label: 'a'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['b']}]}],
         label: 'b'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['c']}]}],
         label: 'c'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['d']}]}],
         label: 'd'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['e']}]}],
         label: 'e'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['f']}]}],
         label: 'f'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['g']}]}],
         label: 'g'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['h']}]}],
         label: 'h'
       }, {
         method: 'animate',
         args: [{data: [{'transforms[0].value': ['i']}]}],
         label: 'i'
       }]
     }],
     xaxis: {
       range: [0, 4],
       autorange: false
     },
     yaxis: {
       range: [0, 5],
       autorange: false
     }
   });
 },
 plot: function (gd) {
     Plotly.plot(gd, {
         "data":[{
             "name":"Asia",
             "mode":"markers",
             "x":[
                 30.332, 53.832, 39.348, 41.366, 50.54896,
                 31.997, 56.923, 41.216, 43.415, 44.50136,
                 34.02, 59.923, 43.453, 45.415,
                 36.088, 63.3, 45.252, 40.317, 63.11888
             ],
             "y":[
                 820.8530296, 11635.79945, 661.6374577, 434.0383364, 575.9870009,
                 853.10071, 12753.27514, 686.3415538, 496.9136476, 487.6740183,
                 836.1971382, 14804.6727, 721.1860862, 523.4323142,
                 739.9811058, 18268.65839, 630.2336265, 421.6240257, 676.9000921
             ],
             "ids":[
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China",
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China",
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia",
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China"
             ],
             "text":[
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China",
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China",
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia",
                 "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China"
             ],
             "marker":{
                 "sizemode":"area",
                 "sizeref":200000,
                 "size":[
                     9240934, 138655, 51365468, 5322536, 637408000,
                     10267083, 171863, 56839289, 6083619, 665770000,
                     11537966, 202182, 62821884, 6960067,
                     13079460, 230800, 70759295, 7450606, 862030000
                 ]
             },
             "transforms": [{
                 "type": "populate-slider",
                 "sliderindex": 0,
                 "framegroup": "frames-by-year",
                 "animationopts": {
                     "mode": "immediate",
                     "frame": {"redraw": false},
                     "transition": {"duration": 400}
                 }
             }, {
                 "type": "filter",
                 "target": [
                     "1957", "1957", "1957", "1957", "1957",
                     "1962", "1962", "1962", "1962", "1962",
                     "1967", "1967", "1967", "1967",
                     "1972", "1972", "1972", "1972", "1972"
                 ],
                 "operation": "{}",
                 "value": ["1952"]
             }]
         },
         {
             "name":"Europe",
             "mode":"markers",
             "x":[
                 55.23, 66.8, 68, 53.82, 59.6,
                 59.28, 67.48, 69.24, 58.45, 66.61,
                 66.22, 70.14, 70.94, 70.42,
                 67.69, 70.63, 71.44, 67.45, 70.9
             ],
             "y":[
                 1601.056136, 6137.076492, 8343.105127, 973.5331948, 2444.286648,
                 1942.284244, 8842.59803, 9714.960623, 1353.989176, 3008.670727,
                 2760.196931, 12834.6024, 13149.04119, 5577.0028,
                 3313.422188, 16661.6256, 16672.14356, 2860.16975, 6597.494398
             ],
             "ids":[
                 "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria",
                 "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria",
                 "Albania", "Austria", "Belgium", "Bulgaria",
                 "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria"
             ],
             "text":[
                 "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria",
                 "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria",
                 "Albania", "Austria", "Belgium", "Bulgaria",
                 "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria"
             ],
             "marker":{
                 "sizemode":"area",
                 "sizeref":200000,
                 "size":[
                     1282697, 6927772, 8730405, 2791000, 7274900,
                     1476505, 6965860, 8989111, 3076000, 7651254,
                     1984060, 7376998, 9556500, 8310226,
                     2263554, 7544201, 9709100, 3819000, 8576200
                 ]
             },
             "transforms": [{
                 "type": "populate-slider",
                 "sliderindex": 0,
                 "framegroup": "frames-by-year",
                 "animationopts": {
                     "mode": "immediate",
                     "frame": {"redraw": false},
                     "transition": {"duration": 400}
                 }
             }, {
                 "type": "filter",
                 "target": [
                     "1952", "1952", "1952", "1952", "1952",
                     "1957", "1957", "1957", "1957", "1957",
                     "1967", "1967", "1967", "1967",
                     "1972", "1972", "1972", "1972", "1972"
                 ],
                 "operation": "{}",
                 "value": ["1952"]
             }]
         }],
         "layout":{
             "width": window.innerWidth,
             "height": window.innerHeight,
             "title": "Life Expectancy vs. GDP Per Capita",
             "xaxis":{
                 "autorange": false,
                 "range": [20, 80]
             },
             "yaxis":{
                 "type":"log",
                 "autorange": false,
                 "range": [2, 5]
             },
             "updatemenus": [{
                 "type": "buttons",
                 "showactive": false,
                 "yanchor": "top",
                 "xanchor": "right",
                 "y": 0,
                 "x": -0.02,
                 "pad": {"t": 50},
                 "buttons": [{
                     "label": "Play",
                     "method": "animate",
                     "args": ["frames-by-year", {
                         "mode": "immediate",
                         "frame": {"duration": 500, "redraw": false},
                         "transition": {"duration": 500}
                     }]
                 }]
             }],
             "sliders": [{
                 "yanchor": "top",
                 "y": 0,
                 "pad": {"t": 20},
                 "transition": {"duration": 500},
             }]
         }
     });
 }
  plot: function (gd) {
    this.traces = [this.error, this.trace];

    Plotly.plot(gd, this.traces, this.layout);
  },
Example #17
0
    plot: function (gd) {
        mock.layout.width = window.innerWidth;
        mock.layout.height = window.innerHeight;

        Plotly.plot(gd, mock.data, mock.layout);
    },
Example #18
0
Plotly.plot(gd, [{
  x: x,
  y: y,
  z: z,
  type: 'contour',
  showscale: false,
  colorscale: 'Viridis',
  ncontours: 40,
  hoverinfo: 'none',
  contours: {
    showlines: false
  }
}, {
  x: [0],
  y: [0],
  mode: 'lines',
  hoverinfo: 'skip',
  showlegend: false,
  line: {
    color: 'white',
    simplify: false
  }
}, {
  x: [0],
  y: [0],
  mode: 'markers',
  hoverinfo: 'skip',
  showlegend: false,
  marker: {
    size: 20,
    color: 'rgba(0, 0, 0, 0)',
    line: {
      width: 3,
      color: 'red'
    }

  }
}], {
  xaxis: {
    scaleanchor: 'y',
    scaleratio: 1,
    range: xrange
  },
  yaxis: {
    scaleanchor: 'x',
    scaleratio: 1,
    range: yrange
  },
  margin: {t: 30, r: 30, b: 30, l: 30},
  dragmode: 'pan'
}, {
  displayModeBar: false,
  scrollZoom: true
});
  plot: function (gd) {
    this.gd = gd;

    Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 1, 3]}
    ], {
      updatemenus: [
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          x: 0.3,
          y: 1.0,
          yanchor: 'top',
          xanchor: 'left',
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          x: 0.3,
          y: 0.66,
          yanchor: 'top',
          xanchor: 'left',
          direction: 'right'
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          x: 0.3,
          y: 0.33,
          yanchor: 'top',
          xanchor: 'left',
          direction: 'left',
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          x: 0.3,
          y: 0.0,
          yanchor: 'top',
          xanchor: 'left',
          direction: 'up',
          pad: {
            t: 30,
            l: 10,
            r: 10,
            b: 10
          }
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          type: 'buttons',
          x: -0.12,
          y: 1.0,
          yanchor: 'top',
          xanchor: 'left',
          showactive: false,
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          type: 'buttons',
          x: -0.12,
          y: 1.01,
          yanchor: 'bottom',
          xanchor: 'left',
          direction: 'right',
          showactive: false,
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
          ],
          type: 'buttons',
          x: 1,
          y: 0.03,
          yanchor: 'bottom',
          xanchor: 'right',
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
          ],
          type: 'buttons',
          x: 1,
          y: 0.02,
          yanchor: 'top',
          xanchor: 'right',
          direction: 'right'
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          x: 0.6,
          y: 0.9,
          yanchor: 'top',
          xanchor: 'right',
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
            {label: 'green', method: 'restyle', args: ['marker.color', 'green']},
            {label: 'yellow', method: 'restyle', args: ['marker.color', 'yellow']},
            {label: 'orange', method: 'restyle', args: ['marker.color', 'orange']},
          ],
          x: 0.6,
          y: 0.9,
          yanchor: 'bottom',
          xanchor: 'left',
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
          ],
          x: 0.6,
          y: 0.4,
          type: 'buttons',
          yanchor: 'top',
          xanchor: 'right',
        },
        {
          buttons: [
            {label: 'red', method: 'restyle', args: ['marker.color', 'red']},
            {label: 'blue', method: 'restyle', args: ['marker.color', 'blue']},
          ],
          type: 'buttons',
          x: 0.6,
          y: 0.4,
          yanchor: 'bottom',
          xanchor: 'left',
        },
      ]
    });
  },
Example #20
0
  plot: function (gd) {
    Plotly.plot(gd, [
      {
        x: [1, 2, 3],
        y: [2, 1, 3],
        mode: 'markers+lines',
        marker: {
          color: 'red',
        },
        line: {
            simplify: false
        }
      }
    ], {
      legend: {
        xanchor: 'right',
        x: -0.2,
        y: -0.2,
        yanchor: 'top',
      },
      margin: {
        pad: 10,
      },
      updatemenus: [{
        active: 0, // 1,2,3 -> index of active step
        type: 'buttons',
        direction: 'right',
        buttons: [
          {method: 'restyle', args: ['marker.color', 'red', [0]], label: 'R'},
          {method: 'restyle', args: ['marker.color', 'orange', [0]], label: 'O'},
          {method: 'restyle', args: ['marker.color', 'yellow', [0]], label: 'Y'},
          {method: 'restyle', args: ['marker.color', 'green', [0]], label: 'G'},
          {method: 'restyle', args: ['marker.color', 'blue', [0]], label: 'B'},
          {method: 'restyle', args: ['marker.color', 'purple', [0]], label: 'V'},
        ],

        visible: true,  // or false
        x: 0,
        xanchor: 'left',
        y: 1,
        yanchor: 'top',

        xpad: 20,
        ypad: 30,

      }],
      sliders: [{
        active: 0, // 1,2,3 -> index of active step

        steps: [
          {method: 'restyle', args: ['marker.color', 'red', [0]], label: 'R'},
          {method: 'restyle', args: ['marker.color', 'orange', [0]], label: 'O'},
          {method: 'restyle', args: ['marker.color', 'yellow', [0]], label: 'Y'},
          {method: 'restyle', args: ['marker.color', 'green', [0]], label: 'G'},
          {method: 'restyle', args: ['marker.color', 'blue', [0]], label: 'B'},
          {method: 'restyle', args: ['marker.color', 'purple', [0]], label: 'V'},
        ],

        visible: true,  // or false
        x: 0,
        xanchor: 'left',
        y: -0.2,
        yanchor: 'top',

        xpad: 20,
        ypad: 30,

      }]
    });
  },