KDE to Violin plot

This block shows how to produce the contour of a Violin viz using a Kernel Density Estimation.

forked from mbostock's block: Kernel Density Estimation
see also /jfirebaugh/900762
and /z-m-k/5014368

==original README==

Kernel density estimation is a method of estimating the probability distribution of a random variable based on a random sample. In contrast to a histogram, kernel density estimation produces a smooth estimate. The smoothness can be tuned via the kernel’s bandwidth parameter. With the correct choice of bandwidth, important features of the distribution can be seen, while an incorrect choice results in undersmoothing or oversmoothing and obscured features.

This example shows a histogram and a kernel density estimation for times between eruptions of Old Faithful Geyser in Yellowstone National Park, taken from R’s faithful dataset. The data follow a bimodal distribution; short eruptions are followed by a wait time averaging about 55 minutes, and long eruptions by a wait time averaging about 80 minutes. In recent years, wait times have been increasing, possibly due to the effects of earthquakes on the geyser’s geohydrology.

This example is based on a Protovis version by John Firebaugh.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Kernel Density Estimation to Violin Plot</title>
<style>

body {
    font: 10px sans-serif;
  }
  
  #original-chart {
    font-size: 80px;
    fill: #eee;
  }

.bar {
    fill: #bbb;
    shape-rendering: crispEdges;
  }

.line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .violin {
    fill: grey;
    stroke: black;
  }
  
  #violin-text {
    font-size: 20px;
    fill: white;
  }

.axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

.y.axis path {
    display: none;
  }

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom
		duration = 1000;

var x = d3.scale.linear()
    .domain([30, 110])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, .1])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format("%"));

var histogram = d3.layout.histogram()
    .frequency(false)
    .bins(x.ticks(40));

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 + ")");

svg.append("text")
		.attr("id", "original-chart")
    .attr("dx", width/4)
    .attr("dy", 50)
    .text("Original chart")
    .attr("text-anchor", "center");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  .append("text")
    .attr("class", "label")
    .attr("x", width)
    .attr("y", -6)
    .style("text-anchor", "end")
    .text("Time between Eruptions (min.)");

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

d3.json("faithful.json", function(error, faithful) {
  if (error) throw error;

svg.append("path")
      .datum(kdeVerteces)
      .attr("class", "line")
      .attr("d", line);
  
  svg.append("path")
      .datum(kdeVerteces)
      .attr("class", "violin")
      .attr("d", violinAsLine);
  
  svg.append("text")
  		.attr("id", "violin-text")
  		.attr("dx", x(47))
  		.attr("dy", y(-0.0065))
  		.text("Here is the Violin");
  
  (function run () {
    d3.select("body")
      .transition()
        .delay(2000)
        .duration(duration)
        .each(function() {
          svg.transition()
            .duration(duration)
            .attr("transform", "translate("+[margin.left,-height/2]+")");
          d3.selectAll(".bars").transition()
            .style("opacity", 0);
          d3.select(".y.axis").transition()
            .style("opacity", 0);
        })
      .transition()
        .duration(duration)
        .each(function() {
          d3.select(".violin").transition()
            .attr("d", violinTooLarge);
        })
      .transition()
        .duration(4*duration)
        .each(function() {
          d3.select(".violin").transition()
        		.duration(duration)
            .attr("d", violin)
      			.each("end", function () {
              d3.select("#violin-text")
              	.text("Here is the Violin .................. with adequate area");
            });
          d3.select(".line").transition()
        		.duration(duration)
            .style("opacity", 0);
        })
      .transition()
        .duration(duration)
        .each(function() {
      		d3.select("#violin-text")
           	.text("Here is the Violin");
          d3.select(".violin").transition()
            .attr("d", violinTooLarge);
          d3.select(".line").transition()
            .style("opacity", 1);
        })
      .transition()
        .duration(duration)
        .each(function() {
          d3.select(".violin").transition()
            .attr("d", violinAsLine);
        })
      .transition()
        .duration(duration)
        .each(function() {
          svg.transition()
            .duration(duration)
            .attr("transform", "translate("+[margin.left, margin.top]+")");
          d3.selectAll(".bars").transition()
            .style("opacity", 1);
          d3.select(".y.axis").transition()
            .style("opacity", 1);
        })
    		.each("end", run);
  })();
});

function kernelDensityEstimator(kernel, x) {
  return function(sample) {
    return x.map(function(x) {
      return [x, d3.mean(sample, function(v) { return kernel(x - v); })];
    });
  };
}

function epanechnikovKernel(scale) {
  return function(u) {
    return Math.abs(u /= scale) <= 1 ? .75 * (1 - u * u) / scale : 0;
  };
}

</script>

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