Comparison of quantile, quantize, and threshold scales with a Cubehelix color range.
Scale legends made with d3 Legend.
!function(){function t(t){return function(e,i){e=d3.hsl(e),i=d3.hsl(i);var r=(e.h+120)*a,h=(i.h+120)*a-r,s=e.s,l=i.s-s,o=e.l,u=i.l-o;return isNaN(l)&&(l=0,s=isNaN(s)?i.s:s),isNaN(h)&&(h=0,r=isNaN(r)?i.h:r),function(a){var e=r+h*a,i=Math.pow(o+u*a,t),c=(s+l*a)*i*(1-i);return"#"+n(i+c*(-.14861*Math.cos(e)+1.78277*Math.sin(e)))+n(i+c*(-.29227*Math.cos(e)-.90649*Math.sin(e)))+n(i+c*1.97294*Math.cos(e))}}}function n(t){var n=(t=0>=t?0:t>=1?255:0|255*t).toString(16);return 16>t?"0"+n:n}var a=Math.PI/180;d3.scale.cubehelix=function(){return d3.scale.linear().range([d3.hsl(300,.5,0),d3.hsl(-240,.5,1)]).interpolate(d3.interpolateCubehelix)},d3.interpolateCubehelix=t(1),d3.interpolateCubehelix.gamma=t}(); |
<!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="http://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> |