D3 2.10 adds threshold scales for arbitrary quantization. In this example, unemployment rates for counties are quantized into different shades of blue.
var color = d3.scale.threshold()
.domain([2, 4, 6, 8, 10])
.range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var color = d3.scale.threshold() | |
| .domain([2, 4, 6, 8, 10]) | |
| .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("unemployment.json", function(data) { | |
| d3.json("readme.json", function(collection) { | |
| svg.selectAll("path") | |
| .data(collection.features) | |
| .enter().append("path") | |
| .attr("d", d3.geo.path()) | |
| .style("fill", function(d) { return color(data[d.id]); }); | |
| }); | |
| }); | |
| </script> |
(Sorry about that, but we can’t show files that are this big right now.)