Kernel Density Estimation with Science.js

This is a copy of work done by Jason Davies that demonstrates use of science.js. It is posted here simply so it can be studied. The original example code can be found at science.js/examples/kde. Slight modifications were made so it displays well on bl.ocks.org.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>LOESS</title>
    <script src="science.v1.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <style>

body {
        font: 10px sans-serif;
      }

path {
        stroke: #000;
        stroke-width: 1.5px;
        fill: none;
      }

</style>
  </head>
  <body>
    <div id="vis">
    </div>
    <script>
      // Based on https://bl.ocks.org/900762 by John Firebaugh
      d3.json("faithful.json", function(faithful) {
        data = faithful;
        var w = 952,
            h = 476,
            x = d3.scale.linear().domain([30, 110]).range([0, w]),
            bins = d3.layout.histogram().frequency(false).bins(x.ticks(60))(data),
            max = d3.max(bins, function(d) { return d.y; }),
            y = d3.scale.linear().domain([0, .1]).range([0, h]),
            kde = science.stats.kde().sample(data);

var vis = d3.select("body")
          .append("svg")
            .attr("width", w)
            .attr("height", h);

var bars = vis.selectAll("g.bar")
            .data(bins)
          .enter().append("g")
            .attr("class", "bar")
            .attr("transform", function(d, i) {
              return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")";
            });

bars.append("rect")
            .attr("fill", "steelblue")
            .attr("width", function(d) { return x(d.dx + 30) - 1; })
            .attr("height", function(d) { return y(d.y); });

var line = d3.svg.line()
            .x(function(d) { return x(d[0]); })
            .y(function(d) { return h - y(d[1]); });

vis.selectAll("path")
            .data(d3.values(science.stats.bandwidth))
          .enter().append("path")
            .attr("d", function(h) {
              return line(kde.bandwidth(h)(d3.range(30, 110, .1)));
            });
      });
    </script>
  </body>
</html>

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