Violin Chart D3.js &Angular
Welcome to the D3.js Angular graph gallery: a collection of simple charts made with d3.js & angular created by LAAKISSI Achraf. D3.js is a JavaScript library for manipulating documents based on data. This gallery of a few graphics, always providing reproducible and editable source code. If you are new to creating graphics with Angular & D3.js, this is probably the place to start.
This post describes how to build a violin chart using angular & d3.js.A violin plot is an alternative to the more usual boxplot, especially interesting with a large dataset where boxplot could hide a part of the information. Here is a simple implementation in d3.js & angular using the d3.histogram() function, keeping only the core code to understand the fundamental concept.
We’ve built a component you just need to add to your project, passing the input data, specifying other options and you get your chart easily. you can find the code on our website or in stackblitz.
A Violin Plot is used to visualize the distribution of the data and its probability density. It is similar to a box plot, with the addition of a rotated kernel density plot on each side. Learn more.
Note that 2 approaches exist to build them in d3.js, the first computing a kernel density estimate, the second building a high-resolution histogram.
It is essential to understand that this violin plot is made using the d3.histogram() function, not using a kernel density estimate.
It takes the values of a group and split them into several bins. The number of values observed in each bin is represented, and a curve is used for smoothing.
The size of each bin is controlled by the thresholds argument of the d3.histogram() function. It is advised to try different bin size.
Here, the highest number of item per bin is computed. This value will as wide as 100% of the bandwidth. So you just have to play with the padding argument of the x axis to control space between violin.
Note: With this method, a group with less values than another will have a smaller width.
Input dataset provides the Sepal_Length, Sepal_Width, Petal_Length, Petal_Width and Species
Component inputs :
- data: It is an array of object contained the Sepal_Length, Sepal_Width, Petal_Length, Petal_Width and Species
- groupeLabales: It is an array of object contained the name of xlabales, color.
https://stackblitz.com/edit/angular-violin-chart-d3-js
Click here to check out some other awesome charts. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message on Twitter / Linkedin, or send an email.
