Experimenting with Kernel Density Estimation and 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.

forked from curran's block: Kernel Density Estimation with Science.js

forked from anonymous's block: Experimenting with Kernel Density Estimation and Science.js

<!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;
  			shape-rendering: crispEdges;
      }
      
      path.path1 {
        stroke: #ff0000;
      }
      
      path.path2 {
        stroke: #fffff;
      }

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

var vis = d3.select("body")
            .append("svg")
              .attr("width", w)
              .attr("height", h + 150);
          
          var xAxis = d3.svg.axis()
                  .scale(x)
				          .ticks(500)
                  .orient("bottom");

var bars1 = vis.selectAll("g.bar")
              .data(bins1)
            .enter().append("g")
              .attr("class", "bar1")
              .attr("transform", function(d, i) {
                return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")";
              });
          var bars2 = vis.selectAll("g.bar")
              .data(bins2)
            .enter().append("g")
              .attr("class", "bar2")
              .attr("transform", function(d, i) {
                return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")";
              });

bars1.append("rect")
              .attr("fill", "rgba(253,205,172,0.3)")
              .attr("width", function(d) { return x(d.dx + 30) - 1; })
              .attr("height", function(d) { return y(d.y); });
          
         	bars2.append("rect")
              .attr("fill", "rgba(203,213,232,0.3)")
              .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.path1")
              .data(d3.values(science.stats.bandwidth))
            .enter()
              .append("path")
              .attr("class", "path1")
              .attr("d", function(h) {
                return line(kde1.bandwidth(h)(d3.range(30, 110, .1)));
              });
          vis.selectAll("path.path2")
              .data(d3.values(science.stats.bandwidth))
            .enter()
              .append("path")
              .attr("class", "path2")
              .attr("d", function(h) {
                return line(kde2.bandwidth(h)(d3.range(30, 110, .1)));
              });
          
          vis.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + h + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Co-occurrencies of votes");
        });
       });
    </script>
  </body>
</html>

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