An implementation of a reusable responsive distribution chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.
See this live on bl.ocks.org here.
Features:
Updated in V3:
Previous version: Reusable Violin + Box Plot V2
forked from asielen‘s block: Violin Plot + Box Plot v3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="distrochart.css">
<script src="//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>Show: </p>
<button onclick="chart1.violinPlots.hide();chart1.boxPlots.show({reset:true});chart1.notchBoxes.hide();chart1.dataPlots.change({showPlot:false,showBeanLines:false})">Box Plot</button>
<button onclick="chart1.violinPlots.hide();chart1.notchBoxes.show({reset:true});chart1.boxPlots.show({reset:true, showBox:false,showOutliers:true,boxWidth:20,scatterOutliers:true});chart1.dataPlots.change({showPlot:false,showBeanLines:false})">Notched Box Plot</button>
<button onclick="chart1.violinPlots.show({reset:true,clamp:0});chart1.boxPlots.show({reset:true, showWhiskers:false,showOutliers:false,boxWidth:10,lineWidth:15,colors:['#555']});chart1.notchBoxes.hide();chart1.dataPlots.change({showPlot:false,showBeanLines:false})">Violin Plot Unbound</button>
<button onclick="chart1.violinPlots.show({reset:true,clamp:1});chart1.boxPlots.show({reset:true, showWhiskers:false,showOutliers:false,boxWidth:10,lineWidth:15,colors:['#555']});chart1.notchBoxes.hide();chart1.dataPlots.change({showPlot:false,showBeanLines:false})">Violin Plot Clamp to Data</button>
<button onclick="chart1.violinPlots.show({reset:true, width:75, clamp:0, resolution:30, bandwidth:50});chart1.dataPlots.show({showBeanLines:true,beanWidth:15,showPlot:false,colors:['#555']});chart1.boxPlots.hide();chart1.notchBoxes.hide()">Bean Plot</button>
<button onclick="chart1.violinPlots.hide();chart1.dataPlots.show({showPlot:true, plotType:'beeswarm',showBeanLines:false, colors:null});chart1.notchBoxes.hide();chart1.boxPlots.hide();">Beeswarm Plot</button>
<button onclick="chart1.violinPlots.hide();chart1.dataPlots.show({showPlot:true, plotType:40, showBeanLines:false,colors:null});chart1.notchBoxes.hide();chart1.boxPlots.hide();">Scatter Plot</button>
<button onclick="if(chart1.dataPlots.options.showLines){chart1.dataPlots.change({showLines:false});} else {chart1.dataPlots.change({showLines:['median','quartile1','quartile3']});}">Trend Lines</button>
</div>
<script src="distrochart.js" charset="utf-8"></script>
<script type="text/javascript">
var chart1;
d3.csv('data.csv', function(error, data) {
data.forEach(function (d) {d.value = +d.value;});
chart1 = makeDistroChart({
data:data,
xName:'date',
yName:'value',
axisLabels: {xAxis: null, yAxis: 'Values'},
selector:"#chart-distro1",
chartSize:{height:460, width:960},
constrainExtremes:true});
chart1.renderBoxPlot();
chart1.renderDataPlots();
chart1.renderNotchBoxes({showNotchBox:false});
chart1.renderViolinPlot({showViolinPlot:false});
});
</script>
</body>
</html>date,value
2000,208.4968974
2000,160.5328879
2002,292.3321976
1998,95.07969441
2001,251.6346499
1996,4.723143097
1997,221.3608926
2002,257.5135771
1999,256.6401961
1998,20.19655313
2000,280.5287882
2002,195.5122557
1998,177.9101782
1998,35.8381779
1997,157.4465176
1999,134.3793597
1997,150.604782
1996,-163.8499657
1997,137.4253423
2001,142.7192938
1999,180.7018929
1998,115.9725529
1999,209.3638088
1998,67.84781771
1996,175.231925
2002,51.47799284
1999,188.9962324
1996,-48.35468425
1997,169.423597
1998,-53.22055537
1997,292.1632604
2001,136.4384768
2002,321.5455618
1999,53.06249276
2002,340.8281495
2002,130.9466336
2002,286.8816131
2000,176.4176712
1998,191.6883802
2001,150.0037128
2000,197.7215175
2001,305.2651151
1999,210.168763
2001,115.5839981
1998,175.7373095
1999,116.9958817
1998,154.8568107
1996,14.6993532
2001,198.5466972
1999,74.15721631
1996,114.734763
1999,102.2094761
1998,177.7200953
2002,135.5771092
2002,262.2642028
2001,146.5137898
1998,157.1558524
2002,100.7217744
1999,215.9330216
1998,77.73977658
2002,307.4118429
2002,183.3339337
1999,197.9264315
1996,17.60508917
1996,210.2650095
1996,-61.72121173
1996,114.4151786
2002,137.0691326
1996,196.452651
1996,-93.70487623
1996,94.04043151
2002,243.9383793
1998,185.4923709
2001,86.83137214
1997,189.7194604
1999,107.6012989
1997,111.3635375
1996,-18.48801027
2001,284.114423
1998,25.03677561
2001,194.6109073
2002,222.8485575
2001,269.0836685
1997,42.56959913
2002,263.6498678
2002,141.9210707
1996,108.4558658
2000,136.6209948
1998,172.4753343
1999,147.918509
1998,153.3322857
2000,165.9668168
1999,177.2947913
2002,-74.31511032
2002,335.3878377
1999,87.78180299
2001,256.9765118
2000,156.3968699
1998,187.2355674
1996,26.95490135
1996,205.3224574
1996,-146.8977273
1997,111.4247665
1997,39.31960853
1998,165.4031941
2001,76.54635096
2000,211.4411524
2002,85.38760996
2002,258.6304837
1999,101.40771
2002,319.3656086
1999,48.89019215
1996,185.5018042
2002,44.27040391
1998,163.9139191
1999,64.91277185
1999,214.75898
2000,95.95428713
1997,152.1584732
2001,105.5137981
2000,204.940937
2002,168.8783255
1997,109.6414378
1996,8.294135496
1996,170.1018831
2001,133.4457303
1997,154.7432792
2001,115.9420248
1997,161.6765493
2001,318.3716388
2000,185.0529758
1996,-25.0084555
1998,179.3206217
2002,23.77085763
1996,109.5537878
2001,104.5309686
1998,188.4592993
1997,-42.71530849
1998,191.2920462
1999,133.7938658
1998,159.0451771
2002,178.4659497
1998,236.824034
2001,65.69920953
1997,176.8594544
2002,224.9232276
2001,353.1720826
1996,-42.54134484
2002,352.5103937
2002,100.4976596
2001,262.7544883
1998,78.31221195
1996,161.2249696
1998,77.25946692
2002,320.1315855
2000,147.2817322
2002,257.4599337
1997,69.08830619
1998,146.0831955
2002,113.8032144
1999,205.7691001
2001,117.1322359
1997,130.8596499
1996,1.95131609
2001,262.9490431
2001,34.79418313
1997,101.7745406
1999,49.77164944
2001,200.7904755
2002,161.5282583
2001,216.4782181
1996,-33.33688556
2001,235.903581
1998,77.52683993
1996,109.03816
1998,46.23212288
2002,334.8055355
2002,-28.40462897
2001,259.6404954
2000,146.3087239
2002,377.0370575
1997,26.75431767
2002,263.8179041
1998,-16.58595091
1999,225.6157298
2002,-42.35546988
2000,234.5228736
1996,-38.9393706
1999,211.1955424
1998,37.78872187
1998,186.3913279
2001,162.9298056
2001,326.0401303
2002,244.4557295
1996,121.3493094
1996,-4.908452899
2000,289.8393967
2002,231.050691
2000,185.6270916
2001,217.0400562
2000,233.1733188
1997,-108.585529
1997,132.1325814
2000,168.6266924
1997,192.0853546
1998,46.22287178
1999,192.0663673
1997,-76.42243079
1996,-166.2188619
1997,50.57489598
1997,161.6687837
1996,11.57283366
1996,176.3964678
2002,67.80298236
2002,225.2487353
2002,132.5723879
2000,276.3019917
1999,124.5530979
2001,301.9152608
2002,85.22160659
2002,291.9140151
2002,122.4231766
1997,213.9817405
2000,164.1858424
1996,110.8755204
2001,-12.51757909
2002,364.7130522
1997,25.74815884
2002,362.1798034
1997,19.35952907
1999,171.6071014
1999,124.2586256
2000,242.8487277
2001,149.2189275
1997,153.4503189
1997,30.03059153
1997,140.9275416
1996,-51.29477103
2000,250.9379606
2002,158.3533996
1998,130.182317
2001,138.7092058
2002,253.3304494
2002,144.9757234
1996,178.5478547
2000,72.20396078
1996,553.9499109
2002,219.5272559
1998,135.3017077
1996,2.750346155
1999,164.5810382
1996,29.28765195
1998,171.8155041
1996,-62.47847974
1997,151.5809857
2002,134.6323019
1999,212.9892487
2002,89.75102376
2000,283.2522823
1999,89.39028149
2001,278.4404473
1996,-109.3304066
1999,229.1511074
1999,62.34497978
2000,85.230187
1999,100.4950058
1997,200.2309017
1999,76.72850604
2000,229.9301867
1998,72.15344724
1998,195.0161825
1999,94.87059541
1997,157.0910643
2001,65.01399632
2001,297.1591558
1998,20.07084747
1999,233.4660872
2001,216.3095206
1997,170.52204
1999,78.50367791
2000,239.9552241
1997,2.147629172
2002,379.3151119
1998,51.57920743
2000,261.4090462
1998,43.44942227
1997,132.7226702
2000,175.8934445
2000,277.2232739
2002,184.9889427
1996,120.8580358
1997,191.6720426
2001,187.6245982
2002,179.1492148
1999,157.2360451
2001,80.04527985
1997,212.3687904
1998,24.00284469
1996,114.4805217
1997,-4.064305421
1997,226.8353268
2002,227.1109639
2000,279.0223834
1996,21.41081879
1997,143.8646094
2001,158.1113357
1998,184.2694171
1998,59.4411768
1996,150.9424472
2002,227.4581954
2001,293.3287564
2000,155.2869436
1996,181.2817844
1999,118.3508146
2002,290.9272223
1998,-25.95669287
2000,261.577609
2001,137.9238059
1996,104.2415804
2001,110.8406592
1998,214.1830759
2000,182.1599734
1997,-80.82039329
1999,80.93972737
2000,233.3097023
1996,-148.9825013
1996,102.8203318
1996,17.94859818
2000,232.4654949
1999,127.3053161
1998,189.5161067
1997,52.03000927
2000,266.2037164
2001,19.61896068
2002,310.2054732
1998,95.51888317
2002,565.7785986
1997,49.75458286
1997,165.5522385
1997,46.2049385
1998,178.0625039
1996,17.27953926
1997,261.8950031
2001,143.8183958
2000,250.1691319
1996,25.95785178
2000,179.6837376
1996,-43.26549148
1998,151.4800229
1996,-111.4736412
2001,233.9101271
2001,164.7412837
1996,208.0000028
1996,20.66494709
1997,235.1549474
1998,35.52670759
2000,228.8558584
1999,67.91927028
1996,514.1211521
2002,137.5345718
1997,137.2434424
1998,18.38698421
2001,188.2074573
1998,-27.98708345
1996,196.0813888
2000,156.5011947
1999,164.2303054
2001,155.72949
1996,188.3434843
2001,172.8608446
1996,108.7538702
2002,158.4953604
1997,295.1204317
2000,202.7568375
1999,192.4999169
1998,70.87167826
2002,434.4384007
2002,14.89312532
2000,282.049065
1997,33.9431407
1999,226.8977153
1997,26.20327452
1996,118.5680419
2002,116.6038789
2002,701.1076239
1998,18.20232892
1996,97.88270558
1997,-57.92522621
2000,255.764516
2000,54.52055825
1999,206.9950256
2002,222.5568434
1999,209.7686251
1996,10.84328606
1998,170.9119633
2001,178.7836109
2001,404.1838318
2000,75.59836591
2002,335.7867388
2000,188.021937
1998,35.05881498
1997,60.93804001
1996,105.3636852
1998,45.08619354
1999,182.6039742
1998,41.82386356
1996,126.2237861
2000,106.6725667
1996,167.2021452
2002,88.59645944
2002,334.4911434
1998,124.9516826
2002,308.8227928
2001,98.87445255
1998,127.9427486
2002,139.3041594
1997,144.5111193
1998,146.7772939
1996,111.0311866
2000,143.0060368
1997,266.3802546
1996,-56.52883643
1997,165.2809079
1999,76.76795913
2002,357.0434218
2000,39.42975856
2001,200.3437131
1996,-7.375059038
2002,402.6828173
1999,138.1697845
1997,133.987686
1999,133.9946493
2001,419.2625726
1996,-54.20342289
1997,177.5902054
1996,-5.268905046
1996,110.6727969
2001,76.98892296
2000,220.6703596
2000,84.80589751
2002,-133.7878417
2001,159.1013487
1996,101.4781021
2002,221.1297277
1997,160.6555138
1999,100.9936022
1997,126.2748973
2000,66.52701701
1996,110.6464315
2002,36.15946532
1999,226.3014108
1997,21.72055667
2000,167.935579
1998,20.81132199
1999,227.8543829
1996,25.76979155
1997,244.1586111
2000,177.1136973
1999,221.050831
1999,110.4931264
2000,223.5116122
1999,122.060817
1997,148.775981
2001,135.7563109
1997,208.8947212
2001,131.5311888
1998,179.4150518
1997,27.32787774
1997,231.3493247
1997,37.53502314
1996,118.1465839
2000,31.11532162
2002,267.8910308
2001,102.2021658
1997,193.4957639
1999,63.44883985
2000,261.3125672
2000,33.74883377
1999,195.3846233
2001,83.74423595
2002,484.2443322
1996,-38.29618771
1997,147.840383
1996,1.485343235
1998,165.556157
1999,144.0741205
2001,403.9901334
1996,2.132530501
2001,350.3402704
1997,-25.94177964
2000,240.3780517
1998,41.14205171
2002,35.363135
2002,113.1600897
2000,168.8637489
1996,-25.96838117
1997,125.7448262
1996,-133.4504018
1999,165.2567402
1997,39.80787742/*Primary Chart*/
/*Nested divs for responsiveness*/
.chart-wrapper {
max-width: 800px; /*Overwritten by the JS*/
min-width: 304px;
margin-bottom: 8px;
background-color: #FAF7F7;
}
.chart-wrapper .inner-wrapper {
position: relative;
padding-bottom: 50%; /*Overwritten by the JS*/
width: 100%;
}
.chart-wrapper .outer-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.chart-wrapper .inner-box {
width: 100%;
height: 100%;
}
.chart-wrapper text {
font-family: sans-serif;
font-size: 13px;
}
.chart-wrapper .axis path,
.chart-wrapper .axis line {
fill: none;
stroke: #888;
stroke-width: 2px;
shape-rendering: crispEdges;
}
.chart-wrapper .y.axis .tick line {
stroke: lightgrey;
opacity: 0.6;
stroke-dasharray: 2,1;
stroke-width: 1;
shape-rendering: crispEdges;
}
.chart-wrapper .x.axis .domain {
display: none;
}
.chart-wrapper div.tooltip {
position: absolute;
text-align: left;
padding: 3px;
font: 12px sans-serif;
background: lightcyan;
border: 0px;
border-radius: 1px;
pointer-events: none;
opacity: 0.7;
}
/*Box Plot*/
.chart-wrapper .box-plot .box {
fill-opacity: 0.4;
stroke-width: 2;
}
.chart-wrapper .box-plot line {
stroke-width: 2px;
}
.chart-wrapper .box-plot circle {
fill: white;
stroke: black;
}
.chart-wrapper .box-plot .median {
stroke: black;
}
.chart-wrapper .box-plot circle.median {
/*the script makes the circles the same color as the box, you can override this in the js*/
fill: white !important;
}
.chart-wrapper .box-plot .mean {
stroke: white;
stroke-dasharray: 2,1;
stroke-width: 1px;
}
@media (max-width:500px){
.chart-wrapper .box-plot circle {display: none;}
}
/*Violin Plot*/
.chart-wrapper .violin-plot .area {
shape-rendering: geometricPrecision;
opacity: 0.4;
}
.chart-wrapper .violin-plot .line {
fill: none;
stroke-width: 2px;
shape-rendering: geometricPrecision;
}
/*Notch Plot*/
.chart-wrapper .notch-plot .notch {
fill-opacity: 0.4;
stroke-width: 2;
}
/* Point Plots*/
.chart-wrapper .points-plot .point {
stroke: black;
stroke-width: 1px;
}
.chart-wrapper .metrics-lines {
stroke-width: 4px;
}
/* Non-Chart Styles for demo*/
.chart-options {
min-width: 200px;
font-size: 13px;
font-family: sans-serif;
}
.chart-options button {
margin: 3px;
padding: 3px;
font-size: 12px;
}
.chart-options p {
display: inline;
}
@media (max-width:500px){
.chart-options p {display: block;}
}