M3js Demo (Violin + Box)

<!DOCTYPE html>
<html>
<head>
  <title>Please help </title>
   <link rel="stylesheet" type="text/css" href="a3.css">
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
  <script type="text/javascript" src="a3.v1.0.2.js"></script>

</head>
<body>

<div class="chart-wrapper" id="chart-distro1"></div>
<div class="chart-wrapper" id="chart-distro2"></div>
<script type="text/javascript">
    var chart1;
    d3.tsv(/*'https://raw.githubusercontent.com/asielen/D3_Reusable_Charts/master/distro_chart/data.csv'*/ 'https://dimplejs.org/data/example_data.tsv' /*train.csv"*/, function(error, data) {
        data.forEach(function (d) {d["Price"] = +d["Price"];});
        var data2 = data.filter(function(d){return d["Sales"] < 2000});
        var data2 = data2.filter(function(d){return d["Store"] < 20});
        console.log(data);
        chart1 = a3.plot.setUp({
            data:data,
            xName:'Owner',
            yName:'Price',
            //axisLabels: {xAxis: 'Datesssyyyggg', yAxis: 'Valuessss'},
            selector:"#chart-distro1",
            chartSize:{height:460, width:960},
            constrainExtremes:false});
    //    chart1.renderDataPlots();
    //    chart1.renderNotchBoxes({showNotchBox:false});
        chart1.renderViolinPlot({showViolinPlot:true, bandWidth:10, clamp:0 });
        chart1.renderBoxPlot({showOutliers:false, boxWidth: 10, colors:['#555'], lineWidth:15, showWhiskers: false});
    });
            var chart2;
    d3.tsv(/*'https://raw.githubusercontent.com/asielen/D3_Reusable_Charts/master/distro_chart/data.csv'*/ 'https://dimplejs.org/data/example_data.tsv' /*train.csv"*/, function(error, data) {
        data.forEach(function (d) {d["Price"] = +d["Price"];});
        var data2 = data.filter(function(d){return d["Sales"] < 2000});
        var data2 = data2.filter(function(d){return d["Store"] < 20});
        chart2 = a3.plot.setUp({
            data:data,
            xName:'Owner',
            yName:'Price',
            //axisLabels: {xAxis: 'Datesssyyyggg', yAxis: 'Valuessss'},
            selector:"#chart-distro2",
            chartSize:{height:460, width:960},
            constrainExtremes:false});
        chart2.renderBoxPlot();
    //    chart1.renderDataPlots();
    //    chart1.renderNotchBoxes({showNotchBox:false});
    //     chart2.renderViolinPlot({showViolinPlot:true, bandWidth:20, clamp:0 });
    //    chart2.renderBubblePlot();
    });
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js