syntagmatic/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Comparison of quantile, quantize, and threshold scales with a Cubehelix color range.
Scale legends made with d3 Legend.

  
## cubehelix.min.js
!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}();

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
No results found