Joyplot Doc

[Kully]

for Issue: #1018

[Kully]

Not having luck with violin plots...I am going to try building from scratch. Could be a fun FF.

[nicolaskruchten]

what's not working with violin plots? Groups as 'y', orientation='h', make them half...

[nicolaskruchten]

[Kully]

Groups as 'y', orientation='h', make them half...

I'm having trouble allowing them to overlap. violingap doesn't do the trick.

[nicolaskruchten]

Right, they won't overlap... We could just generalize violin to allow it, rather than wrap a whole subplot-based infrastructure onto it... @etpinard ?

[Kully]

We could just generalize violin to allow it

I'd like to take a first stab at adding that feature if we decide to go that route

[Kully]

Continuing off @nicolaskruchten 's point, the violins will not be able to overlap because violingap is only allowed in the closed interval [0, 1].

---

If we place violins at y=0, 0.2, and 0.6 and violingap=0

Nudging the 0.6 violin very close to 0.2 (0.21) violingap=0 still, we get:

---

If we allowed negative numbers for violingap this solves the problem.

Setting violingap=-1 (actually setting groupFraction to 2 in the src code: see this line)and returning the 3rd violin to its original y values we get:

---

There is an issue of the violins getting cut off by the frame, but we can fix this.

CODE FOR EXAMPLE:

var data = [
{
  type: 'violin',
  x: [0, 5, 7, 8],
  points: 'none',
  box: {
    visible: false
  },
  boxpoints: false,
  line: {
    color: 'black'
  },
  fillcolor: '#8dd3c7',
  opacity: 0.6,
  meanline: {
    visible: false
  },
  y0: 0
},
{
  type: 'violin',
  x: [0, 4, 7, 8],
  points: 'none',
  box: {
    visible: false
  },
  boxpoints: false,
  line: {
    color: 'black'
  },
  fillcolor: '#d3c78d',
  opacity: 0.6,
  meanline: {
    visible: false
  },
  y0: 0.2
},
{
  type: 'violin',
  x: [0, 4, 7, 8],
  points: 'none',
  box: {
    visible: false
  },
  boxpoints: false,
  line: {
    color: 'black'
  },
  fillcolor: '#c78dd3',
  opacity: 0.6,
  meanline: {
    visible: false
  },
  y0: 0.21
}
];

var layout = {
  title: "Basic Horizontal Violin Plot",
  xaxis: {
    zeroline: false
  },
  violingap: 0
};

Plotly.newPlot('graph', data, layout);

@etpinard WDYT of this approach?

[etpinard]

Ok, and what's wrong again with something like: https://codepen.io/etpinard/pen/VGOQad?editors=1010

[Kully]

Ok, and what's wrong again with something like

I should have made them half violins to demonstrate the point more clearly. In the example you shared, I want to take the top blue one for example and shift it down a few pixels so that its middle line is somewhere between 1 and 2, while leaving the rest looking the same.

[etpinard]

or example and shift it down a few pixels so that its middle line is somewhere between 1 and 2, while leaving the rest looking the same.

tweaking the y coordinates should do the trick, no?

[Kully]

tweaking the y coordinates should do the trick, no?

I swapped all the y values of orange violin at 2 to 1.8 and get this: https://codepen.io/plotly/pen/yRXjPe

Can you see how the violins are now all thinner and I was not able to just shove that one violin down by a certain number of pixels?

[etpinard]

Thanks for codePen @Kully !

Would something like https://codepen.io/etpinard/pen/yRogaq be ok?

If not, we could add a width attribute for violin (and box) traces that would essentially override the internal dPos parameter. This new attribute would be similar to width in bar traces.

Allowing violingap and violingroupgap to be negative would work, as these attributes affect the violins' width, but I don't see how we can justify making a "gap" value negative. The "real" parameter we want to override here is the violin width, not the gaps between them.

[Kully]

f not, we could add a width attribute for violin (and box) traces that would essentially override the internal dPos parameter.

I like this idea.

[nicolaskruchten]

vote to close... will be covered in the v4 docs