javascript - D3のバイオリン図

Question

d3を使用してバイオリン図を作成することからどこから始めればよいかについてのアイデアはありますか？すでに存在しますか？

私は周りを見回して、ggplot2を使用してそれを行う方法を理解し、私が学ぶことができるがまだ見つけていない既製の例があることを望んでいました。

さまざまなサイズのバーを重ねたり、ディストリビューションを作成して回転させたり、ミラーリングしたりするという、非常に面倒なプロセスを実行できると思います。しかし、確かにもっと良い方法があります。

Answer 1

私はそれを自分で必要としていたので、ここにあります：バイオリン図

Answer 2

私の知る限り、これまで誰もこれを行ったことがありませんが、それほど難しいことではありません。バイオリンの半分の折れ線グラフ（または線の代わりにボックス）を作成しているかのように開始します。つまり、適切なxおよびyスケールを作成し、データを追加します。この結果、回転して正しい位置に移動します。次に、同じことをもう一度行い、それをミラーリングして、バイオリンの残りの半分を取得します。

これは複雑に聞こえるかもしれませんが、SVGにはこれらの操作（回転とミラーリング）のサポートが組み込まれています。その上に2〜3の簡単な操作で分布の線グラフを描くのとほとんど同じように、これにアプローチできるはずです。すべてを関数でラップすると、バイオリンを作成するために呼び出すことができるものが得られます。

もちろん、プロットを作成するためのデータがどのような形式であるかにも依存します。データポイントが少なすぎるため、折れ線グラフは実行できない可能性がありますが、代わりにバーを簡単に使用できます。