KDE Joyplot w/ rugplot x axis

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/vaclab/d3-tip/d3-tip.js"></script>
  <script src="https://underscorejs.org/underscore-min.js"></script>
  <script>
var bmds = ['BmdA', 'BmdB', 'BmdC'];
    
var margin = { top: 30, right: 10, bottom: 30, left: 30 },
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom,
    rug_buffer = 10;

var svg = d3.select('body').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
    		.append('g')
        	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

d3.csv('data.csv', function(data){
  
  var values = bmds.map(function(bmd){return _.pluck(data, bmd)})
  								 .reduce(function(a, b){ return a.concat(b)})
  	
  var y_wrapper = d3.scaleBand()
      .rangeRound([0, height])
      .domain(bmds);

var y = d3.scaleLinear()
      .rangeRound([y_wrapper.bandwidth(), 0])
      .domain([0, 0.1]);

var x = d3.scaleLinear()
      .range([0, width])
      .domain([0, d3.max(values)]);
 
  var density = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(40));

drawChart(data);

function kernelEpanechnikov(k) {
    return function(v) {
      return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
    };
  }

</script>

</body>
</html>

Updated missing url https://rawgit.com/VACLab/d3-tip/master/d3-tip.js to https://cdn.jsdelivr.net/gh/vaclab/d3-tip/d3-tip.js

Modified http://underscorejs.org/underscore-min.js to a secure url

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

https://rawgit.com/VACLab/d3-tip/master/d3-tip.js

https://underscorejs.org/underscore-min.js