(function(){

  var domain = [1, 2, 4, 5, 12, 43, 52, 123, 234, 1244];
  var range = ['#E5D6EA', '#C798D3', '#9E58AF', '#7F3391', '#581F66', '#30003A'];

  document.querySelectorAll('.scale').forEach(function(element) {
    var scaleType = element.dataset.scaleType;
    var scale;
    if (scaleType === 'quantile') {
      scale = d3.scaleQuantile().domain(domain).range(range);
    } else if (scaleType === 'quantize') {
      scale = d3.scaleQuantize().domain(d3.extent(domain)).range(range);
    } else {
      scale = d3.scaleCluster().domain(domain).range(range);
    }

    var colors = {}, color;
    for (var i = 0; i < domain.length; i++) {
      color = scale(domain[i]);
      if (!colors[color]) {
        colors[color] = [];
      }
      colors[color].push(domain[i]);
    }

    element.querySelector('.legend').innerHTML = range.map(function(color){
      var extent = colors[color] ? colors[color].join(', ') : '&nbsp;';
      return '<span class="values" style="border-color:' + color + '">' + extent + '</span>';
    }).join('');
  });

})();