Plotly.js: Range sliders specs

[etpinard]

@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.

[mdtusz]

Could you elaborate on showTraces vs array?

I'd also vote for visible over showrangeslider.

[etpinard]

Right. I just realized that the array behaviour would in fact require two custom data arrays: one for x coordinates and one for y coordinates - which is probably not worth implementing in the first iteration.

[mdtusz]

For the slider component itself, we need to decide on a few things that are highly opinion based, so I figure we should all toss in our $0.02.

1. Appearance: Lots of options here, but I personally prefer a minimal approach - I think most users are clever enough to see a slidey-range box and know it's slidable (but I'm no designer!) We also should decide whether we want the overlay inclusive or exclusive of the selected range.
   
   
   
   • Highcharts
   
   
   • Chrome Devtools
   
   
2. Behaviour: For this, we have a few comparison points so I'll let you all comment before I let you know my opinion (some are harder to implement than others codewise :stuck_out_tongue:). There's 4 main things to decide on.
3. [x] Allow resizing on handles (obviously, yes)
4. [x] Allow dragging between handles to shift the range
5. [x] Allow dragging handles past each other (á la the D3 demo)
6. [x] Allow click + drag to create a new range
   
   
   
   • Highcharts
   
   
   • Chrome Devtools (open your console, go to timeline, then refresh)
   
   
   • D3 demo
   
   

@jackparmer @chriddyp @etpinard @bpostlethwaite

[bpostlethwaite]

I like the d3 demo and Chromes. Chrome inverting what is greyed out is really interesting. I think I prefer that to the D3 example. Not a big fan of the big highchart paddles

[cldougl]

oh man @bpostlethwaite I was just going to say I liked the highchart paddles.
Not to devalue style but (in the nicest way possible) idk how much we can assume about users' cleverness. Recently, I've had to explain how this slider: https://plot.ly/python/2d-density-plots/#2d-histogram-contour-plot-with-slider-control works ~once a week (and I thought it was pretty self explanatory...)

[mdtusz]

There's parts of highcharts I don't really like and think go against the grain of what you would expect - mainly the inability to click&create a range, and to slide bounds past each other.

We can match it - it's more just a question of _what's the best interface_?

[alexcjohnson]

We already have precedent within plotlyjs with the zoombox, specifically the 1D zoom variant - which has handles (a little more subtle than highcharts), greys out the unselected area (ala chrome @bpostlethwaite), and lets you slide bounds past each other (@mdtusz)... the only real difference is it's not persistent. Seems to me we should mimic that, and then later if we want to tweak the style we tweak them both.

[alexcjohnson]

For clarity, here's the 1D zoom effect we have now:

And @mdtusz to your behavior checklist, my vote is all of the above. Drag the handles anywhere (including past each other), click & drag between the handles to move the region, click and drag outside to start a new region.

[mdtusz]

Matching decently so far.

[cpsievert]

It'd be pretty cool if colorbars could accept a rangeslider object as well!

[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/

[etpinard]

@toothlessdragon thanks for the comment.

I'm thinking that we should support range-slider-only traces that, as the name same suggests, would only appear in the range slider. For example, you could plot a 1e3 point scatter traces in the regular plot and plot a 100-pt aggregation in the range slider.

Do you think that would solve your issues?

[adamjosephjensen]

Let me check whether I'm understanding you correctly:

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).
If I am understanding you correctly then I think that could meet our needs.

I wonder whether that would also enable us to show the range slider as-is with a white background and no traces? That might also meet our needs.

[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])

[chrisgervang]

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

So by default, the trace wouldn't be rendered on the rangeslider? That is fine with me, but I want to clarify with you.

[adamjosephjensen]

@etpinard can you give me a rough idea of where this is on your list of priorities?

[etpinard]

can you give me a rough idea of where this is on your list of priorities?

By _this_ you mean that visible: 'rangeslideronly' feature? If so, it's a very low priority I'm afraid.

[adamjosephjensen]

Ah, thank you for the information.

On Thu, Feb 9, 2017 at 11:11 AM Étienne Tétreault-Pinard <
[email protected]> wrote:

can you give me a rough idea of where this is on your list of priorities?

By this you mean that visible: 'rangeslideronly' feature? If so, it's a
very low priority I'm afraid.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/plotly/plotly.js/issues/279#issuecomment-278741583,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQF4oIYEArrgVsYtK2fNBUUa0Sbr_qpYks5ra2TUgaJpZM4Hhx9u
.

[r1z1a]

Is there any news regarding y-axis slider.
Since this can be used to do some threshold for displaying.
Say you have a bar chart with 100's of bars with y values 0-1. And you want to see only bars that are 0.5 -1.
Using slider on y-axis it would make it very simple to adjust the displayed bars.

[jackparmer]

@r1z1a Have you tried using Plotly.js sliders for this (not range sliders)?
https://plot.ly/javascript/sliders/

[r1z1a]

@jackparmer Hi i looked at the normal sliders but it seems they are discrete, as in you can't have a smooth slider. Or at least the documentation makes it seem that way.
EDIT:
So i have tried to implement the slide, but you cant adjust it from both sides like with range slider - as in if i want to see only things that are between 20% and 60%, unless there is 2 custom sliders

Also with sliders you cant just adjust the range for y axis since the plot data don't have the yMin and yMax. Its not possible to get the range from the graph itself.