D3 Examples - Reusable Violin + Box Plot

Reusable Violin + Box Plot

An implementation of a reusable responsive violin chart.

Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts. Also based on Violin/Box plots

This script allows for an easy to implement and customize reusable box plot and violin plot. Play around with the options to see some of what is possible using this script.

Open in new window to see the responsive functionality.

See this example on bl.ocks.org here.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--https://stanford.edu/~mwaskom/software/seaborn/generated/seaborn.violinplot.html-->
    <link rel="stylesheet" type="text/css" href="distrochart.css">
    <!--<script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>-->
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div class="chart-wrapper" id="chart-distro1"></div>
​
<!--Sorry about all the inline JS. It is a quick way to show  what options are available-->
<div class="chart-options">
    <p>Box Options</p>
    <button onclick="if(chart1.boxPlots.chartOptions.showBox){chart1.boxPlots.change({showBox:false})}else{chart1.boxPlots.change({showBox:true})}">Toggle Box</button>
    <button onclick="if(chart1.boxPlots.chartOptions.boxWidth===30){chart1.boxPlots.change({boxWidth:10})}else{chart1.boxPlots.change({boxWidth:30})}">Change Box Width</button>
    <button onclick="if(currentColor=='dark'){chart1.boxPlots.change({colors:d3.scale.category10()});currentColor='color';}else{chart1.boxPlots.change({colors:['#555']});currentColor='dark';}">Change Box Colors</button>
    <button onclick="if(chart1.boxPlots.chartOptions.showMean){chart1.boxPlots.change({showMean:false})}else{chart1.boxPlots.change({showMean:true})}">Toggle Mean</button>
    <button onclick="if(chart1.boxPlots.chartOptions.showMedian){chart1.boxPlots.change({showMedian:false})}else{chart1.boxPlots.change({showMedian:true})}">Toggle Median</button>
    <button onclick="if(chart1.boxPlots.chartOptions.showWhiskers){chart1.boxPlots.change({showWhiskers:false})}else{chart1.boxPlots.change({showWhiskers:true})}">Toggle Whiskers</button>
    <button onclick="if(chart1.boxPlots.chartOptions.showOutliers){chart1.boxPlots.change({showOutliers:false})}else{chart1.boxPlots.change({showOutliers:true})}">Toggle Outliers</button>
</div>
​
<div class="chart-options">
    <p>Violin Options</p>
    <button onclick="if(chart1.violinPlots.violinOptions.showArea){chart1.violinPlots.change({showArea:false, showLine:false});}else{chart1.violinPlots.change({showArea:true, showLine:true})}">Toggle Violin</button>
    <button onclick="if(chart1.violinPlots.violinOptions.violinWidth===100){chart1.violinPlots.change({violinWidth:50})}else{chart1.violinPlots.change({violinWidth:100})}">Change Violin Width</button>
    <button onclick="if(currentViolinColor=='dark'){chart1.violinPlots.change({colors:d3.scale.category10()});currentViolinColor='color';}else{chart1.violinPlots.change({colors:['#555']});currentViolinColor='dark';}">Change Violin Colors</button>
    <button onclick="if(chart1.violinPlots.violinOptions.resolution===75){chart1.violinPlots.change({resolution:null})}else{chart1.violinPlots.change({resolution:75})}">Change Violin Resolution</button>
</div>
​
<script type="text/javascript">
    var currentColor = 'dark';
    var currentViolinColor = 'dark';
    var chart1;
    d3.csv('data.csv', function(error, data) {
        data.forEach(function (d) {
            d.value = +d.value;
        });
​
        chart1 = makeDistroChart(data, 'date', 'value');
        chart1.bind("#chart-distro1",{chartSize:{height:420, width:960}, constrainExtremes:false, axisLabels: {xAxis: 'Years', yAxis: 'Values'}});
        chart1.renderViolinPlot({violinWidth:90, colors:["#555"]});
        chart1.renderBoxPlot({boxWidth:20, showOutliers:false});
    });
​
​
</script>
<script src="distrochart.js" charset="utf-8"></script>
</body>
</html>
    