Recreate Color Hue

This visualization is forked from curran's block: Responding to Resize.

The source of data is from Color hue.

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

var svg_colorRect = d3.select("#color").append("svg");

function redraw(svg_squares) {

var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
            height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight,
            side = Math.min(width / 6, height / 2) / 2;

console.log(height);
        console.log(side);

var svg_colorSquare = svg_colorRect.selectAll("rect").data(d3.range(4));
        svg_colorRect
            .attr("width", width)
            .attr("height", side * 2.3);

var svg_colorSquare = svg_colorRect.selectAll("rect").data(d3.range(4));

svg_colorSquare
            .enter()
            .append("rect")
            .merge(svg_colorSquare)
            .attr("x", d3.scaleLinear().domain([0, 4]).range([20, side * 6.5]))
            .attr("y", side / 2)
            .attr("width", side)
            .attr("height", side)
            .attr("fill", function (d, i) {
                return color(i);
            });

svg_colorRect.exit().remove();

}

redraw();
    window.addEventListener("resize", redraw);

</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