Color luminance & saturation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <title>Color luminance and saturation</title>
  <style>
    body { 
    	margin: 0;
    	position: fixed;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0; 
    }

rect:first-child {
    	stroke-width: 0.5;
    	stroke: black;
    }

</style>
</head>

const orange = d3.scaleSequential()
    	.domain([0, 4])
    	.interpolator(d3.interpolateOranges);

const svg_greyRect = d3.select("#grey").append("svg")
      .attr("width", 960)
      .attr("height", 90)

const svg_orangeRect = d3.select("#orange").append("svg")
      .attr("x", 30)
      .attr("y", 80)
      .attr("width", 960)
      .attr("height", 90)

svg_greyRect.selectAll("rect")
    	.data(d3.range(4))
    	.enter()
    	.append("rect")
    	.attr("x", d3.scaleLinear().domain([0, 4]).range([20, 260]))
    	.attr("y", 20)
    	.attr("width", 40)
    	.attr("height", 40)
    	.attr("fill", function(d, i) { return grey(i); });

svg_orangeRect.selectAll("rect")
    	.data(d3.range(4))
    	.enter()
    	.append("rect")
    	.attr("x", d3.scaleLinear().domain([0, 4]).range([20, 260]))
    	.attr("y", 20)
    	.attr("width", 40)
    	.attr("height", 40)
    	.attr("fill", function(d, i) { return orange(i); });

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js