Old school D3 from simpler times

All examples By author By category About

clhenrick

Full window Github gist

Colorspaces

Color Spaces & D3.JS

Forked from Kai Chang

Examples

API References

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);

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<canvas id="myCanvas" width=960 height=500>
  
<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>

xxxxxxxxxx
 
<!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>
​
    

https://d3js.org/d3.v4.0.0-alpha.45.js

https://d3js.org/d3-hsv.v0.0.js

https://d3js.org/d3-scale-chromatic.v0.3.js