Violin Plot in JavaScript

How to make D3.js-based violin plots in Plotly.js.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

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: "",
  yaxis: {
    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'),
  points: 'none',
  box: {
    visible: true
  },
  line: {
    color: 'green',
  },
  meanline: {
    visible: true
  },
  transforms: [{
  	 type: 'groupby',
	 groups: unpack(rows, 'day'),
	 styles: [
		{target: 'Sun', value: {line: {color: 'blue'}}},
		{target: 'Sat', value: {line: {color: 'orange'}}},
		{target: 'Thur', value: {line: {color: 'green'}}},
		{target: 'Fri', value: {line: {color: 'red'}}}
	 ]
	}]
}]

var layout = {
  title: "Multiple Traces Violin Plot",
  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: "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: "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: "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: "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)