Area segment fill using gradient

A linearGradient is created and used as fill on the area between two lines. And then a rect with 0 opacity has mousemove event attached, which uses the mouse's position to update a linearGradient's offsets' proportions.

A new updated version is here: https://bl.ocks.org/tomshanley/373640a6bc6f89293507550ae5629488/

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
    path { stroke-width: 3px }
  </style>
</head>

<body>
  <script>
    
    const height = 500
    const width = 500
    const margin = {"top": 20, "bottom": 20, "left": 20, "right": 20}

const data1 = [2, 5, 6, 7, 3, 8, 3, 4]
    const data2 = [6, 2, 2, 2, 2, 2, 4, 9]

let combinedData = []
    
    for (var i = 0; i < data1.length; i++) {
        let o = {}
        o.data1 = data1[i]
        o.data2 = data2[i]
        combinedData.push(o)
    }

let xScale = d3.scaleLinear()
        .domain([0, combinedData.length-1])
        .range([0, width])

let yScale = d3.scaleLinear()
        .domain([0, 10])
        .range([height, 0])

let area = d3.area()
        .x(function (d, i) { return xScale(i) })
        .y0(function (d) { return yScale(d.data1) })
        .y1(function (d) { return yScale(d.data2) })
        .curve(d3.curveCatmullRom.alpha(0.5));

let line1 = d3.line()
        .x(function (d, i) { return xScale(i) })
        .y(function (d) { return yScale(d.data1) })
        .curve(d3.curveCatmullRom.alpha(0.5));

let line2 = d3.line()
        .x(function (d, i) { return xScale(i) })
        .y(function (d) { return yScale(d.data2) })
        .curve(d3.curveCatmullRom.alpha(0.5));
    
    
    let svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)

let g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var defs = g.append("defs");

var gradient = defs.append("linearGradient")
        .attr("id", "area-gradient")
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "0%");
    
    let offset1 = 0.2
    let offset2 = 0.4

let stopsData = [
        { "offset": 0, "stopColour": "#FFFFFF" },
        { "offset": offset1, "stopColour": "#FFFFFF" },
        { "offset": offset1, "stopColour": "#777777" },
        { "offset": offset2, "stopColour": "#777777" },
        { "offset": offset2, "stopColour": "#FFFFFF" },
        { "offset": 1, "stopColour": "#FFFFFF" }
    ]

gradient.selectAll("stop")
        .data(stopsData)
        .enter()
        .append("stop")
        .attr("offset", function(d){ return d.offset })
        .attr("stop-color", function(d){ return d.stopColour })
    
    let areaFill = g.append("path")
        .datum(combinedData)
        .style("fill", "url(#area-gradient)")
    		.style("opacity", 0)
        .attr("d", area)
    
    let offset1Line = g.append("line")
    	.attr("x1", width*offset1)
    	.attr("x2", width*offset1)
    	.attr("y1", 0)
    	.attr("y2", height)
    	.style("stroke", "black")
    	.style("opacity", 0)
    
    let offset2Line = g.append("line")
    	.attr("x1", width*offset2)
    	.attr("x2", width*offset2)
    	.attr("y1", 0)
    	.attr("y2", height)
    	.style("stroke", "black")
    	.style("opacity", 0)
  
    let path1 = g.append("path")
        .datum(combinedData)
        .style("stroke", "red")
        .style("fill", "none")
        .attr("d", line1)

let path2 = g.append("path")
        .datum(combinedData)
        .style("stroke", "blue")
        .style("fill", "none")
        .attr("d", line2)

let rect = g.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("opacity", 0)
    		.on("mouseover", function(){
          areaFill.style("opacity", 1)
          offset1Line.style("opacity", 1)
          offset2Line.style("opacity", 1)
        })
    		.on("mouseout", function(){
          areaFill.transition().style("opacity", 0)
          offset1Line.transition().style("opacity", 0)
          offset2Line.transition().style("opacity", 0)
          
        })
        .on("mousemove", function(d){
            let x = d3.mouse(this)[0]
            let middle = x/width
            
            let offset1 = (middle - 0.1) < 0 ? 0 : (middle - 0.1)
            let offset2 = (middle + 0.1) > 1 ? 1 : (middle + 0.1)
            
            let o1 = width * offset1
            let o2 = width * offset2
            
            
            offset1Line.attr("x1", o1).attr("x2", o1)
            offset2Line.attr("x1", o2).attr("x2", o2)

let stopsData = [
                { "offset": 0, "stopColour": "#FFFFFF" },
                { "offset": offset1, "stopColour": "#FFFFFF" },
                { "offset": offset1, "stopColour": "#777777" },
                { "offset": offset2, "stopColour": "#777777" },
                { "offset": offset2, "stopColour": "#FFFFFF" },
                { "offset": 1, "stopColour": "#FFFFFF" }
            ]

gradient.selectAll("stop")
                .data(stopsData)
                .attr("offset", function(d){ return d.offset })
                .attr("stop-color", function(d){ return d.stopColour })

})

</script>
</body>

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