Violin Plot in JavaScript
How to make D3.js-based violin plots in Plotly.js.
Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.
d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var data = [{
type: 'violin',
y: unpack(rows, 'total_bill'),
points: 'none',
box: {
visible: true
},
boxpoints: false,
line: {
color: 'black'
},
fillcolor: '#8dd3c7',
opacity: 0.6,
meanline: {
visible: true
},
x0: "Total Bill"
}]
var layout = {
title: {
text: ""
},
yaxis: {
zeroline: false
}
}
Plotly.newPlot('myDiv', data, layout);
});
// need to fix data
d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var data = [{
type: 'violin',
x: unpack(rows, 'day'),
y: unpack(rows, 'total_bill'),
legendgroup: 'M',
scalegroup: 'M',
name: 'M',
box: {
visible: true
},
line: {
color: 'blue',
},
meanline: {
visible: true
}
}, {
type: 'violin',
x: unpack(rows, 'day'),
y: unpack(rows, 'total_bill'),
legendgroup: 'F',
scalegroup: 'F',
name: 'F',
box: {
visible: true
},
line: {
color: 'pink',
},
meanline: {
visible: true
}
}]
var layout = {
title: {
text: "Grouped Violin Plot"
},
yaxis: {
zeroline: false
},
violinmode: 'group'
}
Plotly.newPlot('myDiv', data, layout);
});
d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var data = [{
type: 'violin',
x: unpack(rows, 'total_bill'),
points: 'none',
box: {
visible: true
},
boxpoints: false,
line: {
color: 'black'
},
fillcolor: '#8dd3c7',
opacity: 0.6,
meanline: {
visible: true
},
y0: "Total Bill"
}]
var layout = {
title: {
text: "Basic Horizontal Violin Plot"
},
xaxis: {
zeroline: false
}
}
Plotly.newPlot('myDiv', data, layout);
});
d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var data = [{
type: 'violin',
x: unpack(rows, 'day'),
y: unpack(rows, 'total_bill'),
legendgroup: 'Yes',
scalegroup: 'Yes',
name: 'Yes',
side: 'negative',
box: {
visible: true
},
line: {
color: 'blue',
width: 2
},
meanline: {
visible: true
}
}, {
type: 'violin',
x: unpack(rows, 'day'),
y: unpack(rows, 'total_bill'),
legendgroup: 'No',
scalegroup: 'No',
name: 'No',
side: 'positive',
box: {
visible: true
},
line: {
color: 'green',
width: 2
},
meanline: {
visible: true
}
}]
var layout = {
title: {
text: "Split Violin Plot"
},
yaxis: {
zeroline: false
},
violingap: 0,
violingroupgap: 0,
violinmode: "overlay",
}
Plotly.newPlot('myDiv', data, layout);
});
var trace1 = {
text: "sample length: 32",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 1,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: false,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Thursday",
x: [
10.07,
34.83,
10.65,
12.43,
24.08,
13.42,
12.48,
29.8,
14.52,
11.38,
20.27,
11.17,
12.26,
18.26,
8.51,
10.33,
14.15,
13.16,
17.47,
27.05,
16.43,
8.35,
18.64,
11.87,
19.81,
43.11,
13.0,
12.74,
13.0,
16.4,
16.47,
18.78
],
orientation: "h"
}
var trace2 = {
text: "sample length: 30",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -0.6,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: false,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Thursday",
x: [
27.2,
22.76,
17.29,
19.44,
16.66,
32.68,
15.98,
13.03,
18.28,
24.71,
21.16,
11.69,
14.26,
15.95,
8.52,
22.82,
19.08,
16.0,
34.3,
41.19,
9.78,
7.51,
28.44,
15.48,
16.58,
7.56,
10.34,
13.51,
18.71,
20.53
],
orientation: "h"
}
var trace3 = {
text: "sample length: 9",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 0.4,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: false,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Friday",
x: [
5.75,
16.32,
22.75,
11.35,
15.38,
13.42,
15.98,
16.27,
10.09
],
orientation: "h"
}
var trace4= {
text: "sample length: 10",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -0.3,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: false,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Friday",
x: [
28.97,
22.49,
40.17,
27.28,
12.03,
21.01,
12.46,
12.16,
8.58,
13.42
],
orientation: "h"
}
var trace5 = {
text: "sample length: 28",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 0.55,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: true,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Saturday",
x: [
20.29,
15.77,
19.65,
15.06,
20.69,
16.93,
26.41,
16.45,
3.07,
17.07,
26.86,
25.28,
14.73,
44.3,
22.42,
20.92,
14.31,
7.25,
10.59,
10.63,
12.76,
13.27,
28.17,
12.9,
30.14,
22.12,
35.83,
27.18
],
orientation: "h"
}
var trace4 = {
text: "sample length: 59",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -1.1,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: true,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Saturday",
x: [
20.65,
17.92,
39.42,
19.82,
17.81,
13.37,
12.69,
21.7,
9.55,
18.35,
17.78,
24.06,
16.31,
18.69,
31.27,
16.04,
38.01,
11.24,
48.27,
20.29,
13.81,
11.02,
18.29,
17.59,
20.08,
20.23,
15.01,
12.02,
10.51,
17.92,
15.36,
20.49,
25.21,
18.24,
14.0,
50.81,
15.81,
26.59,
38.73,
24.27,
30.06,
25.89,
48.33,
28.15,
11.59,
7.74,
20.45,
13.28,
24.01,
15.69,
11.61,
10.77,
15.53,
10.07,
12.6,
32.83,
29.03,
22.67,
17.82
],
orientation: "h"
}
var trace6 = {
text: "sample length: 18",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 0.45,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: false,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Sunday",
x: [
16.99,
24.59,
35.26,
14.83,
10.33,
16.97,
10.29,
34.81,
25.71,
17.31,
29.85,
25.0,
13.39,
16.21,
17.51,
9.6,
20.9,
18.15
],
orientation: "h"
}
var trace7 = {
text: "sample length: 58",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -0.9,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: false,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Sunday",
x: [
10.34,
21.01,
23.68,
25.29,
8.77,
26.88,
15.04,
14.78,
10.27,
15.42,
18.43,
21.58,
16.29,
17.46,
13.94,
9.68,
30.4,
18.29,
22.23,
32.4,
28.55,
18.04,
12.54,
9.94,
25.56,
19.49,
38.07,
23.95,
29.93,
14.07,
13.13,
17.26,
24.55,
19.77,
48.17,
16.49,
21.5,
12.66,
13.81,
24.52,
20.76,
31.71,
7.25,
31.85,
16.82,
32.9,
17.89,
14.48,
34.63,
34.65,
23.33,
45.35,
23.17,
40.55,
20.69,
30.46,
23.1,
15.69
],
orientation: "h"
}
var data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]
var layout = {
hovermode: "closest",
width: 400,
yaxis: {
showgrid: true
},
title: {
text: "Total bill distribution<br><i>scaled by number of bills per gender"
},
legend: {
tracegroupgap: 0
},
violingap: 0,
violingroupgap: 0,
violinmode: "overlay",
height: 700
}
Plotly.newPlot("myDiv", data, layout)
