D3 Examples - Recreate Color Hue

xxxxxxxxxx
 
<!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>
​
<body>
<div id="color"></div>
​
<script>
        
    var color = d3.scaleOrdinal()
      .domain(["yellow", "orange", "mint", "blue"])
      .range(["#F1C414", "#D45728", "#18B899", "#2481BB"]);
​
    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>
​
    