Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Update x-axis or autoscale when using slider or button

I am new to plotly (and to js). I have adapted that code (https://plot.ly/javascript/gapminder-example/) to my data but I cannot make the x-axis automatically update or autoscale when new data are selected with the slider (or even the button). Any way of easily sorting that out ? Many thanks.


Plotly.d3.csv('myData.csv', function (err, data) {
  // Create a lookup table to sort and regroup the columns of data,
  // initial by CatOrder, then by CatConc:
  var lookup = {};
  function getData(CatOrder, CatConc) {
    var byCatOrder, trace;
    if (!(byCatOrder = lookup[CatOrder])) {;
      byCatOrder = lookup[CatOrder] = {};
    }
	 // If a container for this CatOrder + CatConc doesn't exist yet,
	 // then create one:
    if (!(trace = byCatOrder[CatConc])) {
      trace = byCatOrder[CatConc] = {
        x: [],
        y: [],
        id: [],
        text: [],
        marker: {size: []}
      };
    }
    return trace;
  }

  // Go through each row, get the right trace, and append the data:
  for (var i = 0; i < data.length; i++) {
    var datum = data[i];
    var trace = getData(datum.CatOrder, datum.CatConc);
    trace.x.push(datum.tCatOrder);
    trace.y.push(datum.SubConc);
    trace.marker.size.push(50);
  }

  // Get the group names:
  var CatOrders = Object.keys(lookup);
  // In this case, every CatOrder includes every CatConc, so we
  // can just infer the CatConcs from the *initial* CatOrder:
  var initialCatOrder = lookup[CatOrders[0]];
  var CatConcs = Object.keys(initialCatOrder);

  // Create the main traces, one for each CatConc:
  var traces = [];
  for (i = 0; i < CatConcs.length; i++) {
    var data = initialCatOrder[CatConcs[i]];
	 // One small note. We're creating a single trace here, to which
	 // the frames will pass data for the different CatOrders. It's
	 // subtle, but to avoid data reference problems, we'll slice
	 // the arrays to ensure we never write any new data into our
	 // lookup table:
    traces.push({
      name: CatConcs[i],
      x: data.x.slice(),
      y: data.y.slice(),
      id: data.id.slice(),
      text: data.text.slice(),
      mode: 'markers',
      marker: {
        size: data.marker.size.slice(),
        sizemode: 'area',
        sizeref: 0
      }
    });
  }

  // Create a frame for each CatOrder. Frames are effectively just
  // traces, except they don't need to contain the *full* trace
  // definition (for example, appearance). The frames just need
  // the parts the traces that change (here, the data).
  var frames = [];
  for (i = 0; i < CatOrders.length; i++) 
  {
    frames.push({
      name: CatOrders[i],
      data: CatConcs.map(function (CatConc) {
        return getData(CatOrders[i], CatConc);
      })
    })
  }

  // Now create slider steps, one for each frame. The slider
  // executes a plotly.js API command (here, Plotly.animate).
  // In this example, we'll animate to one of the named frames
  // created in the above loop.
  var sliderSteps = [];
  for (i = 0; i < CatOrders.length; i++) {
    sliderSteps.push({
      method: 'animate',
      label: CatOrders[i],
      args: [[CatOrders[i]], {
        mode: 'immediate',
        transition: {duration: 300},
        frame: {duration: 300, redraw: false},
      }]
    });
  }

  var layout = {
    xaxis: {
      //range: [0, 10000],
      autorange: true,
      title: 't.[A]^(catOrder)',
  	   },
    
   yaxis: {
      title: '[A]',
      range: [0, 1]
      
    },
    hovermode: 'closest',
	 // We'll use updatemenus (whose functionality includes menus as
	 // well as buttons) to create a play button and a pause button.
	 // The play button works by passing `null`, which indicates that
	 // Plotly should animate all frames. The pause button works by
	 // passing `[null]`, which indicates we'd like to interrupt any
	 // currently running animations with a new list of frames. Here
	 // The new list of frames is empty, so it halts the animation.
    updatemenus: [{
      x: 0,
      y: 0,
      yanchor: 'top',
      xanchor: 'left',
      showactive: false,
      direction: 'left',
      type: 'buttons',
      pad: {t: 87, r: 10},
      buttons: [{
        method: 'animate',
        args: [null, {
          mode: 'immediate',
          fromcurrent: true,
          transition: {duration: 300},
          frame: {duration: 500, redraw: false}
        }],
        label: 'Play'
      }, {
        method: 'animate',
        args: [[null], {
          mode: 'immediate',
          transition: {duration: 0},
          frame: {duration: 0, redraw: false}
        }],
        label: 'Pause'
      }]
    }],
	 // Finally, add the slider and use `pad` to position it
	 // nicely next to the buttons.
    sliders: [{
      pad: {l: 130, t: 55},
      currentvalue: {
        visible: true,
        prefix: 'Catalyst order:',
        xanchor: 'right',
        font: {size: 20, color: '#666'}
      },
      steps: sliderSteps
    }]
  };
  
 

  // Create the plot:
  Plotly.newPlot('myDiv', {
    data: traces,
    layout: layout,
    frames: frames,
  });
});