Range sliders specs

@mdtusz @alexcjohnson @jackparmer @chriddyp

Range sliders à la Highcharts are coming to plotly.js.

I’m thinking that the most intuitive way to plug them into our attribute schema would be as part of the layout.xaxis object (and the layout.yaxis object down the road).

Range sliders would be an axis component similar to axis titles. They would be drawn below their corresponding axes, and in the bottom margin if necessary.

Here’s a tentative version of the specs:

layout: {
  xaxis: {
    rangeslider: {
      visible: true,  // or xaxis.showrangeslider ?

      range: [0, 2],  // range of the highlighted region (in data coordinates)

      // some attribute combination to determine what to show in the slider box e.g.
      mode: 'traces',   // or 'array' or maybe 'mean' 
      showtraces: [0],  // would show the first trace (this is the Highcharts default)
      array: []  // would show custom data in the slider box 

      len: 0.1,    // length in the vertical in normalized coordinates 
                   // (N.B. len is a colorbar attribute)

      // some border options e.g.
      borderwidth: 1,
      bordercolor: '#fff',

     // maybe later
     side: 'bottom'   // 'top'
    }
  }
}

Some re-factoring in axes.js may be required to ensure that slider changes don’t have to go through Plotly.relayout on every update.

[etpinard]

We’d set up our main graph as is and then additionally we’d down-sample somehow and produce a second set of traces that are shown on the range slider (which could be some or all of what we plot on our normal graph).

Exactly.

Getting the API right will be tricky, but I’m thinking something like:

var trace0 = {
  type: 'scatter',
  name: 'trace on main plot'
  x: [1,2,3],
  y: [2,1,2]
}

var trace1 = {
  type: 'scatter',
  name: 'trace in range slider plot',
  visible: 'rangeslideronly',  // similar to `visible: 'legendonly'`
  x: [1,2,3],
  y: [1.5]
}

Plotly.plot('graph', [trace0, trace1])

[adamjosephjensen]

Hi Guys,

My company adopted Plot.ly js partially because we were excited about the range slider. However, in development we noticed that the range slider renders the whole graph again and it doubles rendering time. Our customers are used to viewing a lot of data all at once. We decided the performance hit wasn’t acceptable so we’re shipping without it.

What do you think about providing a more basic skin for the range slider behavior that doesn’t introduce 100% more rendering cost? Something like:

from: http://codepen.io/davidchin/full/GpNvqw/