clhenrick/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Color Spaces & D3.JS


Forked from Kai Chang
Examples


Every ColorBrewer Scale
Matplotlib Colormaps
ColorBrewer Spline
ColorBrewer Spline II
Cubehelix Color Picker
HSL Color Picker
HCL Color Picker
Lab Color Picker
RGB Color Picker
A Less-Angry Rainbow
Cubehelix II
Lab and HCL Color Spaces

API References


d3.interpolateViridis et al
d3 scale chromatic
d3.color
d3.rgb
d3.hsl
d3.lab
d3.hcl
d3.cubehelix
d3.hsv

Notes:

Using Lab || HCL color spaces to interpolate between two colors is better than using hsl, for example:
var color = d3.scale.linear()
    .range(["steelblue", "brown"])
    .domain([0, 10])
    .interpolate(d3.interpolateHcl);


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<canvas id="myCanvas" width=960 height=500>
  <!-- newest version of d3! -->
<script src="https://d3js.org/d3.v4.0.0-alpha.45.js"></script>
<script src="https://d3js.org/d3-hsv.v0.0.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v0.3.js"></script>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var width = canvas.width;
var height = canvas.height;

var myColor = d3.color('cornflowerblue');
var myHSL = d3.hsl(100, 0.5, 0.5);
var myHex = d3.color("#fdbf6f");
var myHex2 = d3.color("#fcebd6");

d3.range(0, width).forEach(function(x) {

  d3.range(0, height).forEach(function(y) {
    //  d3.hsv color example
    // var hsVcolor = d3.hsv(360 * x / width, 0.9, 0.7);

    // console.log(hsVcolor, color.toString());
    // ctx.fillStyle = color.toString();

    // ctx.fillStyle = myColor.brighter(0.001 * x);

    ctx.fillStyle = d3.hcl(d3.hsl(360 * x / width, 0.1 * y, 0.9));

    // console.log(ctx.fillStyle);

    ctx.fillRect(x, y, 1, 1);
  });
});
</script>

## screen-shot.png

      
    Raw
  

              screen-shot.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	</style>
	<body>
	<canvas id="myCanvas" width=960 height=500>
	<!-- newest version of d3! -->
	<script src="https://d3js.org/d3.v4.0.0-alpha.45.js"></script>
	<script src="https://d3js.org/d3-hsv.v0.0.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v0.3.js"></script>
	<script>
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");

	var width = canvas.width;
	var height = canvas.height;

	var myColor = d3.color('cornflowerblue');
	var myHSL = d3.hsl(100, 0.5, 0.5);
	var myHex = d3.color("#fdbf6f");
	var myHex2 = d3.color("#fcebd6");

	d3.range(0, width).forEach(function(x) {

	d3.range(0, height).forEach(function(y) {
	// d3.hsv color example
	// var hsVcolor = d3.hsv(360 * x / width, 0.9, 0.7);

	// console.log(hsVcolor, color.toString());
	// ctx.fillStyle = color.toString();

	// ctx.fillStyle = myColor.brighter(0.001 * x);

	ctx.fillStyle = d3.hcl(d3.hsl(360 * x / width, 0.1 * y, 0.9));

	// console.log(ctx.fillStyle);

	ctx.fillRect(x, y, 1, 1);
	});
	});
	</script>