timelyportfolio/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Working on a d3v3 project where a density plot might be helpful.  There are other examples out there. I wanted to try with the fantastic simple-statistics.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/simple-statistics@5.2.1/dist/simple-statistics.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = 960, height = 500
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    	.append("g")
    		.attr("transform", "translate(100,0)")

    // from http://bl.ocks.org/mbostock/4349187
    // Sample from a normal distribution with mean 0, stddev 1.
    function normal() {
      var x = 0,
          y = 0,
          rds, c;
      do {
        x = Math.random() * 2 - 1;
        y = Math.random() * 2 - 1;
        rds = x * x + y * y;
      } while (rds == 0 || rds > 1);
      c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
      return x * c; // throw away extra sample y * c
    }

    var data = []
    for(var i = 0; i < 10000; i++) {
      data.push(normal())
    }

    var kde = ss.kernelDensityEstimation(data)

    var breaks = ss.equalIntervalBreaks(data, 100)

    var sc_x = d3.scale.linear()
    	.range([0, width - 100])
    var sc_y = d3.scale.linear()
    	.range([0, height])
    	.domain(d3.extent(breaks))

    var path = svg.append("path")
    	.attr("d", d3.svg.line().interpolate("basis")(
        breaks.map(function(d) {
          return [sc_x(kde(d)), sc_y(d)]
        })
      ))
    	.style("fill", "none")
    	.style("stroke", "black")

    svg.append("g")
      .call(d3.svg.axis().orient("left").scale(sc_y))
    	.selectAll("line,path")
    	.style("fill", "none")
    	.style("stroke", "black")
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://unpkg.com/simple-statistics@5.2.1/dist/simple-statistics.min.js"></script>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var width = 960, height = 500
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(100,0)")

	// from http://bl.ocks.org/mbostock/4349187
	// Sample from a normal distribution with mean 0, stddev 1.
	function normal() {
	var x = 0,
	y = 0,
	rds, c;
	do {
	x = Math.random() * 2 - 1;
	y = Math.random() * 2 - 1;
	rds = x * x + y * y;
	} while (rds == 0 \|\| rds > 1);
	c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
	return x * c; // throw away extra sample y * c
	}

	var data = []
	for(var i = 0; i < 10000; i++) {
	data.push(normal())
	}

	var kde = ss.kernelDensityEstimation(data)

	var breaks = ss.equalIntervalBreaks(data, 100)

	var sc_x = d3.scale.linear()
	.range([0, width - 100])
	var sc_y = d3.scale.linear()
	.range([0, height])
	.domain(d3.extent(breaks))

	var path = svg.append("path")
	.attr("d", d3.svg.line().interpolate("basis")(
	breaks.map(function(d) {
	return [sc_x(kde(d)), sc_y(d)]
	})
	))
	.style("fill", "none")
	.style("stroke", "black")

	svg.append("g")
	.call(d3.svg.axis().orient("left").scale(sc_y))
	.selectAll("line,path")
	.style("fill", "none")
	.style("stroke", "black")
	</script>
	</body>