Old school D3 from simpler times

All examples By author By category About

tmcw

Full window Github gist

d3 now (d3 without transitions)

Remove transitions from d3 can make everything much simpler.

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

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