D3 Examples - d3 now (d3 without transitions)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}
</style>
</head>
<body>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3now.js"></script>
<script>
​
var randomColors = [], numberOfColors = 20;
for (var i = 0; i < 20; i++) {
  randomColors.push(['rgb(' +
    ~~(Math.random() * 255),
    ~~(Math.random() * 255),
    ~~(Math.random() * 255)].join(',') + ')');
}
​
function draw() {
  d3.select(document.body)
    .now('input', function(element) {
      element
        .attr('type', 'range')
        .attr('min', 0)
        .attr('max', 20)
        .on('input', function() {
            numberOfColors = parseInt(this.value);
            draw();
        });
    })
    .now('div', randomColors.slice(0, numberOfColors), function(element, color) {
      return element
        .style('background', color)
        .now('div', function(element) {
            element.text(color);
        });
    });
}
​
draw();
​
</script>
</body>
​
    