Resize-color

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

The source of data is from 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>

var grey = d3.scaleSequential()
        .domain([0, 4])
        .interpolator(d3.interpolateGreys);

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

var svg_greyRect = d3.select("#grey").append("svg"),
        svg_orangeRect = d3.select("#orange").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_greySquare = svg_greyRect.selectAll("rect").data(d3.range(4)),
            svg_orangeSquare = svg_orangeRect.selectAll("rect").data(d3.range(4));

svg_greyRect
            .attr("width", width)
            .attr("height", side * 2.3);

svg_orangeRect
            .attr("width", width)
            .attr("height", side * 2.3);

var svg_greySquare = svg_greyRect.selectAll("rect").data(d3.range(4)),
            svg_orangeSquare = svg_orangeRect.selectAll("rect").data(d3.range(4));

svg_greySquare
            .enter()
            .append("rect")
            .merge(svg_greySquare)
            .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 grey(i);
            });

svg_orangeSquare
            .enter()
            .append("rect")
            .merge(svg_orangeSquare)
            .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 orange(i);
            });

svg_greyRect.exit().remove();
        svg_orangeRect.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