How to create a split violin chart?

[dheeraj-murali]

Hi all, I'm new to visx. I've been trying to figure out a way to to plot a split violin chart, something that looks like this

using @visx/stats <ViolinPlot /> and I'm not able to figure it out. It could be that I might be looking at the wrong place.
Any insight into this or ideas on how to plot a chart like this?

Thanks for all the work everyone has put into it. Visx is great to work with!

[williaster]

Hey @dheeraj-murali 👋 thanks for checking out visx, happy to hear you dig it so far 😎

To achieve something like this, I think you'd probably need to render two violin plots on top of each other, and then use clip-paths to only show half of them.

I forked the stats-plot demo and used @visx/clip-path to achieve this. Hopefully you could tweak that and land on something that works for you! It's a little extra complex because of the patterns, if you removed them it shouldn't be too complex; it also doesn't have an axis or grid but you can use @visx/axis + @visx/grid for that.

Here's the link.

[dheeraj-murali]

Thank you @williaster for the quick response, this one works wonderfully.

I do have one more question, how do I add the line that you see on the violin chart that represents the Quartile values.
I tried using @visx/marker but not able to figure out the coordinates to plot the line.