d3v4 - Gradient Color Line Chart

▶︎ What's this?: Line chart with a gradient to change the color of a line based on its value

▶︎ Reference: https://observablehq.com/@d3/gradient-encoding

[Gist] https://gist.github.com/Hirosaji/e34f1e2d45297193964e742c45fec027/

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        var margin = 10,
            width = 940 - margin,
            height = 480 - margin;

var colorRange = ['red', 'gray', 'steelblue'];

var color = d3.scaleLinear().range(colorRange).domain([1, 2, 3, 4, 5]);

d3.csv("https://gist.githubusercontent.com/mbostock/eaaa1a380ba789930e5c0acb5a49deba/raw/ec254371f1559f6d5bd4594e1cd6cf6bbb0be1fb/temperature.csv", function (csvData) {

var data = csvData.map(function(d, i){
                return { "x": i, "y": parseFloat(d.temperature) };
            });

var x = d3.scaleLinear().range([0, width]);
            var y = d3.scaleLinear().range([height, 0]);

x.domain(d3.extent(data, function (d) { return d.x; })).nice;
            y.domain(d3.extent(data, function (d) { return d.y; })).nice;

var line = d3.line()
                .x(function (d) { return x(d.x); })
                .y(function (d) { return y(d.y); })
                .curve(d3.curveStep);

var svg = d3.select('#chart')
                .append('svg')
                .attr("width", width + (margin * 2))
                .attr("height", height + (margin * 2))
                .append("g")
                .attr("transform", "translate(" + (margin) + "," + (margin) + ")");

var linearGradient = svg.append("defs")
                .append("linearGradient")
                .attr("id", "linear-gradient")
                .attr("gradientTransform", "rotate(90)");

linearGradient.append("stop")
                .attr("offset", "0%")
                .attr("stop-color", color(1));

linearGradient.append("stop")
                .attr("offset", "50%")
                .attr("stop-color", color(2));

linearGradient.append("stop")
                .attr("offset", "100%")
                .attr("stop-color", color(3));

svg.append("path")
                .attr("d", line(data))
                .attr("stroke-width", 2)
                .attr("stroke", "url(#linear-gradient)")
                .attr("fill", "none");

});
    </script>
</body>
</html>

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