Violin in D3

Question

Any ideas on where to even start by creating a treble clef using d3? Does he already exist?

I looked around and figured out how to do this using ggplot2, and hoped that there would be a ready-made example from which I could learn, but had not yet found it.

I suppose I could do a very painful process of creating different size bars on top of each other, or distribute it, rotate and flip it. But of course, the best way.

Answer 1

I needed it for me, and so: the violin

Answer 2

As far as I know, no one has done this before, but it should not be too complicated. I would start as if I were making a line chart (or in a box instead of lines) for one half of the violin. That is, create the appropriate x and y scales and add data. The result of this I would turn and translate into the correct position. Then repeat the same thing and flip it to get the second half of the violin.

This may seem complicated, but SVG has built-in support for these operations (rotation and mirroring). You should be able to get close to this in much the same way as drawing a linear distribution graph with 2-3 simple operations on it. Wrap everything in a function, and you have what you can call to create a violin.

This, of course, also depends on the form in which you have the data to make the plot. A line chart may not be possible due to too many data points, but then you can easily use bars.