Choropleth Scales

This choropleth encodes unemployment rates from 2008 with a quantize scale ranging from 0 to 15%. A threshold scale is a useful alternative for coloring arbitrary ranges.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Avenir", sans-serif;
}
  
form {
  position: absolute;
  right: 10px;
  top: 10px;
}

.counties {
  fill: none;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

rect.colorLegend_swatch,
rect.linearLegend {
  stroke: #000;
  stroke-width: 0.5px;
}
  
</style>
<body>
<form>
  <label><input type="radio" name="mode" value="blues" checked> Blue</label>
  <label><input type="radio" name="mode" value="rainbow"> Rainbow</label>
  <br/>
  <label><input type="radio" name="scale" value="quantize" checked> Quantize</label>
  <label><input type="radio" name="scale" value="linear"> Linear</label>
</form>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js"></script>
<script src="colorbrewer.js"></script>
<script>
console.clear()

var width = 960,
    height = 600,
    valMin = 0,
    valMax = 0.15,
    steps = 9,
    breaks = d3.range(0, steps).map(function(d){ return d / (steps - 1); })

var rateById = d3.map();

var blues = colorbrewer.Blues[9],
    rainbow = ["#dd2e97", "#6b3b8f", "#2979b9",
               "#02B9ed", "#13ae52", "#c9d841",
               "#fad635", "#f0a03d", "#892725"];
  
var quantize = d3.scale.quantize()
    .domain([valMin, valMax])
		.range(blues);

console.log(d3.zip(breaks, blues)); 
  
  console.log(breaks);
  
var linear = d3.scale.linear()
    .domain(breaks)
		.range(blues);
  
var legendQuantize = d3.legend.color()
  	.title("Unemployment")  
  	.classPrefix("colorLegend_")
    .labelFormat(d3.format(".2f"))
  	.shape("rect")
    .shapePadding(10)
    .scale(quantize);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
var gradient = svg.append("defs")
  .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "0%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

gradient.selectAll("stop") 
    .data(d3.zip(breaks, blues))                  
    .enter().append("stop")
    .attr("offset", function(d) { return d[0]; })   
    .attr("stop-color", function(d) { return d[1]; });

svg.append("rect")
		.attr("class", "linearLegend")
    .attr("transform", "translate(800,328)")
    .attr("width", 15)
    .attr("height", 215)
    .style("fill", "url(#gradient)");
  
var legendLinear = d3.legend.color()
  	.title("Unemployment")  
  	.classPrefix("colorLegend_")
    .labelFormat(d3.format(".2f"))
  	.shape("rect")
    .shapePadding(10)
    .scale(linear);
  
var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, us) {
  
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("fill", function(d) { return quantize(rateById.get(d.id)); })
      .attr("d", path);

svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
  
  svg.append("g")
    .attr("class", "legendQuantize")
    .attr("transform", "translate(820,300)");

svg.select(".legendQuantize")
    .call(legendQuantize);
}

d3.select(self.frameElement).style("height", height + "px");

d3.selectAll("input").on("change", function change() {
    if(this.value === "blues"){
      quantize.range(blues);
    } else {
      quantize.range(rainbow);
    };
  
  	svg.selectAll("g.counties path")
      	.attr("fill", function(d) { return quantize(rateById.get(d.id)); })
    
    svg.select(".legendQuantize")
    		.call(legendQuantize);
  }
);

</script>

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

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js