D3 Examples - Joyplot Update Pattern

xxxxxxxxxx
 
<!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 drawChart(data){
      bmds.map(function(bmd){
        
          var area_data = data.map(function(d){ return {
                chem: d.Chemical,
                value: d[bmd],
                bmd: bmd,
              };}),
              density_data = density(area_data);
//         draw kde plot
                    svg.append("path")
                .datum(density_data)
                .attr("fill", "steelblue")
                .attr("stroke", "#FFF")
                  .attr("stroke-width", 1.5)
                .attr("stroke-linejoin", "round")
                .attr("d",  d3.area()
                  .curve(d3.curveCatmullRom.alpha(0.5))
              .x(function(d) { return x(d[0]); })
                  .y1(function(d) { return y(d[1] * 1.8); })
              .y0(y(0)))
           .attr("transform", function(d) {return "translate(0, " + y_wrapper(bmd) + ")"; });
        
//          draw rugplot
                    svg.selectAll('line.' + bmd)
            .data(area_data)
            .enter()
            .append('line')
            .attr('class', bmd)
            .attr('stroke', 'orange')
            .attr('stroke-width', 2.5)
            .attr('opacity', 0.3)
              .attr('x1', function(d){return x(d.value)})
                  .attr('x2', function(d){return x(d.value)})
            .attr('y1', y_wrapper(bmd) + y(0) - rug_buffer)
            .attr('y2', y_wrapper(bmd) + y(0));
      })
  }
});
​
function kernelDensityEstimator(kernel, X) {
  return function(V) {
    return X.map(function(x) {
      return [x, d3.mean(V, function(v) { 
        return kernel(x - v.value); })];
    });
  };
}
​
function kernelEpanechnikov(k) {
  return function(v) {
    return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
  };
}
​
  </script>
​
</body>
</html>
​
    