D3 Examples - Quantile, Quantize, Threshold Scales

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font-family: "Montserrat", Avenir Next, Arial, Helvetica, sans-serif;;
  font-size: 15px;
  margin: 60px 0 0 60px;
  color: #444;
}
​
svg {
  height: 260px;
  width: 280px;
  font-size: 13px;
}
​
.column {
  float: left;
}
​
.output {
  margin: 0 0 8px 20px;
  font-weight: bold;
}
​
.output strong {
  display: inline-block;
  width: 70px;
  margin-right: 6px;
  color: #111;
  text-align: right;
}
​
.output span {
  display: inline-block;
  padding: 1px 3px;
  margin: 0 5px;
  background: #f0f0f0;
  border-radius: 2px;
}
​
.column h4 {
  color: #111;
  margin: 24px 0 -12px 20px;
}
​
.space {
  position: absolute;
}
​
.space canvas {
  float: left;
}
​
.space div {
  position: absolute;
  top: 0;
  left: 20px;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3-legend.susielu.com/d3-legend.min.js"></script>
<script>
var domain = [0, 1, 10, 100, 1000, 10000, 100000, 1000000];
​
var width = 600;
​
var generator = d3.scaleLinear()
  .domain([0,(domain.length-1)/2,domain.length-1])
  .range([
    d3.hsl(-100, 0.95, 0.52),
    d3.hsl(  80, 1.15, 0.62),
    d3.hsl( 0, 0.55, 0.52)]
  )
  .interpolate(d3.interpolateCubehelix)
​
var range = d3.range(domain.length).map(generator);
​
var output = d3.select("body").append("div")
  .attr("class", "output");
​
output.append("strong")
  .text("Domain ");
​
output
  .selectAll("span")
  .data(domain)
  .enter().append("span")
  .text(String);
​
var output2 = d3.select("body").append("div")
  .attr("class", "output");
​
output2.append("strong")
  .html("Range ");
​
output2
  .selectAll("span")
  .data(range)
  .enter().append("span")
  .style("color", String)
  .text(String);
​
var quantize = d3.scaleQuantize()
  .domain(domain)
  .range(range);
​
var quantile = d3.scaleQuantile()
  .domain(domain)
  .range(range);
​
var threshold = d3.scaleThreshold()
  .domain(domain)
  .range(range);
​
column("d3.scaleQuantile", quantile);
column("d3.scaleQuantize", quantize);
column("d3.scaleThreshold", threshold);
​
function column(title, scale) {
  var legend = d3.legendColor()
    .labelFormat(d3.format(",.0f"))
    .cells(10)
    .scale(scale);
​
  var div = d3.select("body").append("div")
    .attr("class", "column");
​
  div.append("h4").text(title);
    
  var svg = div.append("svg");
​
  svg.append("g")
    .attr("class", "legendQuant")
    .attr("transform", "translate(20,20)");
​
  svg.select(".legendQuant")
    .call(legend);
};
</script>
​
    