random distributions

Trying out each distribution in d3-random, visualized with the new d3.histogram from d3-array.

forked from enjalot's block: random distributions

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://d3js.org/d3-random.v0.2.min.js"></script>
  <script src="https://d3js.org/d3-array.v0.6.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    text { font-family: Courier;}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
    var histogram = d3_array.histogram()
    
    var n = 1000;
    
    var normal = d3.range(n).map(function(d) {
      return d3_random.randomNormal()()
    })
    var normalHisto = histogram(normal)
    var normalG = svg.append("g")
      .attr("transform", "translate(" + [0,0] + ")")
    renderHisto(normalG, normalHisto);
    normalG.append("text").text("Normal").attr("transform", "translate(50,165)")
    
    var lognormal = d3.range(n).map(function(d) {
      return d3_random.randomLogNormal()()
    })
    var lognormalHisto = histogram(lognormal)
    var lognormalG = svg.append("g")
      .attr("transform", "translate(" + [450,0] + ")")
    renderHisto(lognormalG, lognormalHisto);
    lognormalG.append("text").text("Log Normal").attr("transform", "translate(50,165)")
    
    var uniform = d3.range(n).map(function(d) {
      return d3_random.randomUniform()()
    })
    var uniformHisto = histogram(uniform)
    var uniformG = svg.append("g")
      .attr("transform", "translate(" + [0,150] + ")")
    renderHisto(uniformG, uniformHisto);
    uniformG.append("text").text("Uniform").attr("transform", "translate(50,165)")
    
    var exp = d3.range(n).map(function(d) {
      return d3_random.randomExponential(10)()
    })
    var expHisto = histogram(exp)
    var expG = svg.append("g")
      .attr("transform", "translate(" + [450,150] + ")")
    renderHisto(expG, expHisto);
    expG.append("text").text("Exponential").attr("transform", "translate(50,165)")
    
    var bates = d3.range(n).map(function(d) {
      return d3_random.randomBates(2000)()
    })
    var batesHisto = histogram(bates)
    var batesG = svg.append("g")
      .attr("transform", "translate(" + [0,300] + ")")
    renderHisto(batesG, batesHisto);
    batesG.append("text").text("Bates").attr("transform", "translate(50,165)")
    
    var irwinhall = d3.range(n).map(function(d) {
      return d3_random.randomIrwinHall(2000)()
    })
    var irwinhallHisto = histogram(irwinhall)
    var irwinhallG = svg.append("g")
      .attr("transform", "translate(" + [450,300] + ")")
    renderHisto(irwinhallG, irwinhallHisto);
    irwinhallG.append("text").text("Irwin-Hall").attr("transform", "translate(50,165)")    
    
    function renderHisto(g, data) {
      var yscale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) {
          return d.length
        })])
        .range([0, 100])
    
      g.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr({
          x: function(d,i) { return 50 + i * 25},
          y: function(d,i) { return 50 + 100 - yscale(d.length)},
          width: 20,
          height: function(d,i) { return yscale(d.length)}
        })
    }
    
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://d3js.org/d3-random.v0.2.min.js

https://d3js.org/d3-array.v0.6.min.js