example.html

<html>
<head>
  <title>Histogram</title>
  <style>
    body {
      padding: 100px;
      background: #2f2c2b;
      font: 100 14px Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: white;
    }

    .histogram {
      margin: 5px 0;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="histogram.css">
</head>
<body>
  <h1>Histogram</h1>
  <script src="build/build.js"></script>
  <script>
    var Histogram = require('histogram');

    var h = new Histogram;
    h.bins(150);
    h.size(650, 160);
    h.add(rand(10, 1), { color: '#6abb8a' });
    h.add(rand(20, 2), { color: '#f7e7a0' });
    h.add(rand(5, .5), { color: '#81e7da' });
    document.body.appendChild(h.render());

    function rand(a, b) {
      var d = [];
      var n = 1000;
      while (n--) {
        d.push(a + Math.random() * (15 * b));
      }
      return d;
    }
  </script>
</body>
</html>