Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
Forked from mbostock/.block
Last active April 11, 2019 14:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save syntagmatic/29bccce80df0f253c97e to your computer and use it in GitHub Desktop.
Save syntagmatic/29bccce80df0f253c97e to your computer and use it in GitHub Desktop.
Quantile, Quantize, Threshold Scales
!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment