hden/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Collision-resistant ids optimized for horizontal scaling and performance.</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/cuid/1.3.8/browser-cuid.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
  </head>
  <body>
    <div>How many cuids do you need?</div>
    <input id="number" type="number" min="1" max="100" value="5"></input>
    <button id="trigger">Click Me</button>
    <ul id="list"></ul>
    <script>
      /* global cuid, d3 */
      var render = compose(update(d3.select('#list')), generate, parseInput)

      // initial rendering
      render()
      d3.select('#trigger').on('click', render)

      function update (list) {
        return function (data) {
          var cuids = list.selectAll('li').data(data, identity)

          cuids.enter()
                .append('li')
              .merge(list)
                .text(identity)

          cuids.exit().remove()
        }
      }

      function generate (n) {
        return d3.range(n).map(cuid)
      }

      function parseInput () {
        return ~~d3.select('#number').property('value') || 1
      }

      function identity (d) { return d }

      function compose (x, y, z) {
        return function () {
          return x(y(z()))
        }
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Collision-resistant ids optimized for horizontal scaling and performance.</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/cuid/1.3.8/browser-cuid.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
	</head>
	<body>
	<div>How many cuids do you need?</div>
	<input id="number" type="number" min="1" max="100" value="5"></input>
	<button id="trigger">Click Me</button>
	<ul id="list"></ul>
	<script>
	/* global cuid, d3 */
	var render = compose(update(d3.select('#list')), generate, parseInput)

	// initial rendering
	render()
	d3.select('#trigger').on('click', render)

	function update (list) {
	return function (data) {
	var cuids = list.selectAll('li').data(data, identity)

	cuids.enter()
	.append('li')
	.merge(list)
	.text(identity)

	cuids.exit().remove()
	}
	}

	function generate (n) {
	return d3.range(n).map(cuid)
	}

	function parseInput () {
	return ~~d3.select('#number').property('value') \|\| 1
	}

	function identity (d) { return d }

	function compose (x, y, z) {
	return function () {
	return x(y(z()))
	}
	}
	</script>
	</body>
	</html>