Robot Painter

forked from curran's block: Histogram Smoothing

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    * {
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }
  </style>
</head>

<body>
  <canvas id="rainbow" width="960" height="500"></canvas>
  <canvas id="foreground" width="960" height="500"></canvas>
  <script>
    const numRandomPoints = 300;
    const numHistogramBins = 500;
        
    const width = 960;
    const height = 500;
    
    const randomPoints = d3.range(numRandomPoints).map(d3.randomNormal());
    const histogram = d3.histogram()
      .domain([-3, 3])
      .thresholds(numHistogramBins);
    let data = histogram(randomPoints)
      .map(d => Object.assign({}, d, { density: d.length}));
    const yValue = d => d.density;
    const xValue = d => (d.x0 + d.x1) / 2;
    
    const xScale = d3.scaleLinear()
    	.domain(d3.extent(data, xValue))
      .range([0, width]);
    
    const yScale = d3.scaleLinear()
    	.domain([0, 2])
      .range([height, 0]);
    
    const rainbow = d3.select("#rainbow").node().getContext("2d");
    const foreground = d3.select("#foreground").node().getContext("2d");

</script>
</body>

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