Suggest an edit to this page

Violin Plot in JavaScript

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


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Basic Violin Plot 

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);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv(\"https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv\", function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar data = [{\n type: 'violin',\n y: unpack(rows, 'total_bill'),\n points: 'none',\n box: {\n visible: true\n },\n boxpoints: false,\n line: {\n color: 'black'\n },\n fillcolor: '#8dd3c7',\n opacity: 0.6,\n meanline: {\n visible: true\n },\n x0: \"Total Bill\"\n}]\n\nvar layout = {\n title: {\n text: \"\"\n },\n yaxis: {\n zeroline: false\n }\n}\n\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Grouped Violin Plot 

// 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);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"// need to fix data\n\nd3.csv(\"https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv\", function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar data = [{\n type: 'violin',\n x: unpack(rows, 'day'),\n y: unpack(rows, 'total_bill'),\n legendgroup: 'M',\n scalegroup: 'M',\n name: 'M',\n box: {\n visible: true\n },\n line: {\n color: 'blue',\n },\n meanline: {\n visible: true\n }\n}, {\n type: 'violin',\n x: unpack(rows, 'day'),\n y: unpack(rows, 'total_bill'),\n legendgroup: 'F',\n scalegroup: 'F',\n name: 'F',\n box: {\n visible: true\n },\n line: {\n color: 'pink',\n },\n meanline: {\n visible: true\n }\n}]\n\nvar layout = {\n title: {\n text: \"Grouped Violin Plot\"\n },\n yaxis: {\n zeroline: false\n },\n violinmode: 'group'\n}\n\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Horizontal Violin Plot 

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);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv(\"https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv\", function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar data = [{\n type: 'violin',\n x: unpack(rows, 'total_bill'),\n points: 'none',\n box: {\n visible: true\n },\n boxpoints: false,\n line: {\n color: 'black'\n },\n fillcolor: '#8dd3c7',\n opacity: 0.6,\n meanline: {\n visible: true\n },\n y0: \"Total Bill\"\n}]\n\nvar layout = {\n title: {\n text: \"Basic Horizontal Violin Plot\"\n },\n xaxis: {\n zeroline: false\n }\n}\n\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Split Violin Plot 

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);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv(\"https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv\", function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar data = [{\n type: 'violin',\n x: unpack(rows, 'day'),\n y: unpack(rows, 'total_bill'),\n legendgroup: 'Yes',\n scalegroup: 'Yes',\n name: 'Yes',\n side: 'negative',\n box: {\n visible: true\n },\n line: {\n color: 'blue',\n width: 2\n },\n meanline: {\n visible: true\n }\n}, {\n type: 'violin',\n x: unpack(rows, 'day'),\n y: unpack(rows, 'total_bill'),\n legendgroup: 'No',\n scalegroup: 'No',\n name: 'No',\n side: 'positive',\n box: {\n visible: true\n },\n line: {\n color: 'green',\n width: 2\n },\n meanline: {\n visible: true\n }\n}]\n\nvar layout = {\n title: {\n text: \"Split Violin Plot\"\n },\n yaxis: {\n zeroline: false\n },\n violingap: 0,\n violingroupgap: 0,\n violinmode: \"overlay\",\n}\n\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Advanced Violin Plot 

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)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n text: \"sample length: 32\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"F\",\n scalegroup: \"F\",\n points: \"all\",\n pointpos: 1,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#bebada\"\n },\n symbol: \"line-ns\"\n },\n showlegend: false,\n side: \"positive\",\n type: \"violin\",\n name: \"F\",\n span: [\n 0\n ],\n line: {\n color: \"#bebada\"\n },\n y0: \"Thursday\",\n x: [\n 10.07,\n 34.83,\n 10.65,\n 12.43,\n 24.08,\n 13.42,\n 12.48,\n 29.8,\n 14.52,\n 11.38,\n 20.27,\n 11.17,\n 12.26,\n 18.26,\n 8.51,\n 10.33,\n 14.15,\n 13.16,\n 17.47,\n 27.05,\n 16.43,\n 8.35,\n 18.64,\n 11.87,\n 19.81,\n 43.11,\n 13.0,\n 12.74,\n 13.0,\n 16.4,\n 16.47,\n 18.78\n ],\n orientation: \"h\"\n }\n\n\nvar trace2 = {\n text: \"sample length: 30\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"M\",\n scalegroup: \"M\",\n points: \"all\",\n pointpos: -0.6,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#8dd3c7\"\n },\n symbol: \"line-ns\"\n },\n showlegend: false,\n side: \"negative\",\n type: \"violin\",\n name: \"M\",\n span: [\n 0\n ],\n line: {\n color: \"#8dd3c7\"\n },\n y0: \"Thursday\",\n x: [\n 27.2,\n 22.76,\n 17.29,\n 19.44,\n 16.66,\n 32.68,\n 15.98,\n 13.03,\n 18.28,\n 24.71,\n 21.16,\n 11.69,\n 14.26,\n 15.95,\n 8.52,\n 22.82,\n 19.08,\n 16.0,\n 34.3,\n 41.19,\n 9.78,\n 7.51,\n 28.44,\n 15.48,\n 16.58,\n 7.56,\n 10.34,\n 13.51,\n 18.71,\n 20.53\n ],\n orientation: \"h\"\n }\n\nvar trace3 = {\n text: \"sample length: 9\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"F\",\n scalegroup: \"F\",\n points: \"all\",\n pointpos: 0.4,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#bebada\"\n },\n symbol: \"line-ns\"\n },\n showlegend: false,\n side: \"positive\",\n type: \"violin\",\n name: \"F\",\n span: [\n 0\n ],\n line: {\n color: \"#bebada\"\n },\n y0: \"Friday\",\n x: [\n 5.75,\n 16.32,\n 22.75,\n 11.35,\n 15.38,\n 13.42,\n 15.98,\n 16.27,\n 10.09\n ],\n orientation: \"h\"\n }\n\n\nvar trace4= {\n text: \"sample length: 10\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"M\",\n scalegroup: \"M\",\n points: \"all\",\n pointpos: -0.3,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#8dd3c7\"\n },\n symbol: \"line-ns\"\n },\n showlegend: false,\n side: \"negative\",\n type: \"violin\",\n name: \"M\",\n span: [\n 0\n ],\n line: {\n color: \"#8dd3c7\"\n },\n y0: \"Friday\",\n x: [\n 28.97,\n 22.49,\n 40.17,\n 27.28,\n 12.03,\n 21.01,\n 12.46,\n 12.16,\n 8.58,\n 13.42\n ],\n orientation: \"h\"\n }\n\nvar trace5 = {\n text: \"sample length: 28\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"F\",\n scalegroup: \"F\",\n points: \"all\",\n pointpos: 0.55,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#bebada\"\n },\n symbol: \"line-ns\"\n },\n showlegend: true,\n side: \"positive\",\n type: \"violin\",\n name: \"F\",\n span: [\n 0\n ],\n line: {\n color: \"#bebada\"\n },\n y0: \"Saturday\",\n x: [\n 20.29,\n 15.77,\n 19.65,\n 15.06,\n 20.69,\n 16.93,\n 26.41,\n 16.45,\n 3.07,\n 17.07,\n 26.86,\n 25.28,\n 14.73,\n 44.3,\n 22.42,\n 20.92,\n 14.31,\n 7.25,\n 10.59,\n 10.63,\n 12.76,\n 13.27,\n 28.17,\n 12.9,\n 30.14,\n 22.12,\n 35.83,\n 27.18\n ],\n orientation: \"h\"\n }\n\nvar trace4 = {\n text: \"sample length: 59\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"M\",\n scalegroup: \"M\",\n points: \"all\",\n pointpos: -1.1,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#8dd3c7\"\n },\n symbol: \"line-ns\"\n },\n showlegend: true,\n side: \"negative\",\n type: \"violin\",\n name: \"M\",\n span: [\n 0\n ],\n line: {\n color: \"#8dd3c7\"\n },\n y0: \"Saturday\",\n x: [\n 20.65,\n 17.92,\n 39.42,\n 19.82,\n 17.81,\n 13.37,\n 12.69,\n 21.7,\n 9.55,\n 18.35,\n 17.78,\n 24.06,\n 16.31,\n 18.69,\n 31.27,\n 16.04,\n 38.01,\n 11.24,\n 48.27,\n 20.29,\n 13.81,\n 11.02,\n 18.29,\n 17.59,\n 20.08,\n 20.23,\n 15.01,\n 12.02,\n 10.51,\n 17.92,\n 15.36,\n 20.49,\n 25.21,\n 18.24,\n 14.0,\n 50.81,\n 15.81,\n 26.59,\n 38.73,\n 24.27,\n 30.06,\n 25.89,\n 48.33,\n 28.15,\n 11.59,\n 7.74,\n 20.45,\n 13.28,\n 24.01,\n 15.69,\n 11.61,\n 10.77,\n 15.53,\n 10.07,\n 12.6,\n 32.83,\n 29.03,\n 22.67,\n 17.82\n ],\n orientation: \"h\"\n }\n\nvar trace6 = {\n text: \"sample length: 18\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"F\",\n scalegroup: \"F\",\n points: \"all\",\n pointpos: 0.45,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#bebada\"\n },\n symbol: \"line-ns\"\n },\n showlegend: false,\n side: \"positive\",\n type: \"violin\",\n name: \"F\",\n span: [\n 0\n ],\n line: {\n color: \"#bebada\"\n },\n y0: \"Sunday\",\n x: [\n 16.99,\n 24.59,\n 35.26,\n 14.83,\n 10.33,\n 16.97,\n 10.29,\n 34.81,\n 25.71,\n 17.31,\n 29.85,\n 25.0,\n 13.39,\n 16.21,\n 17.51,\n 9.6,\n 20.9,\n 18.15\n ],\n orientation: \"h\"\n }\n\nvar trace7 = {\n text: \"sample length: 58\",\n hoveron: \"points+kde\",\n meanline: {\n visible: true\n },\n legendgroup: \"M\",\n scalegroup: \"M\",\n points: \"all\",\n pointpos: -0.9,\n box: {\n visible: true\n },\n jitter: 0,\n scalemode: \"count\",\n marker: {\n line: {\n width: 2,\n color: \"#8dd3c7\"\n },\n symbol: \"line-ns\"\n },\n showlegend: false,\n side: \"negative\",\n type: \"violin\",\n name: \"M\",\n span: [\n 0\n ],\n line: {\n color: \"#8dd3c7\"\n },\n y0: \"Sunday\",\n x: [\n 10.34,\n 21.01,\n 23.68,\n 25.29,\n 8.77,\n 26.88,\n 15.04,\n 14.78,\n 10.27,\n 15.42,\n 18.43,\n 21.58,\n 16.29,\n 17.46,\n 13.94,\n 9.68,\n 30.4,\n 18.29,\n 22.23,\n 32.4,\n 28.55,\n 18.04,\n 12.54,\n 9.94,\n 25.56,\n 19.49,\n 38.07,\n 23.95,\n 29.93,\n 14.07,\n 13.13,\n 17.26,\n 24.55,\n 19.77,\n 48.17,\n 16.49,\n 21.5,\n 12.66,\n 13.81,\n 24.52,\n 20.76,\n 31.71,\n 7.25,\n 31.85,\n 16.82,\n 32.9,\n 17.89,\n 14.48,\n 34.63,\n 34.65,\n 23.33,\n 45.35,\n 23.17,\n 40.55,\n 20.69,\n 30.46,\n 23.1,\n 15.69\n ],\n orientation: \"h\"\n }\n\nvar data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]\n\nvar layout = {\n hovermode: \"closest\",\n width: 400,\n yaxis: {\n showgrid: true\n },\n title: {\n text: \"Total bill distribution<br><i>scaled by number of bills per gender\"\n },\n legend: {\n tracegroupgap: 0\n },\n violingap: 0,\n violingroupgap: 0,\n violinmode: \"overlay\",\n height: 700\n }\n\nPlotly.newPlot(\"myDiv\", data, layout)\n"}">