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.

forked from tomshanley's block: Area segment fill using gradient to pre-calculate each coordinate on each path, so that the interaction is smoother.

Built with blockbuilder.org

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
  	<link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            margin: 50px;
          	font-family: 'Cutive Mono', monospace;
        }

path {
            fill: none;
            stroke-width: 3px
        }

circle {
            fill: white;
            stroke-width: 3px
        }

.area-line {
            stroke: black;
            stroke-width: 3px
        }
    </style>
</head>

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

const colour1 = "#4169E1"
        const colour2 = "#DC143C"
        const grey = "#C0C0C0"

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 xAxis = d3.axisBottom(xScale)
        let yAxis = d3.axisLeft(yScale)

let curve = d3.curveCatmullRom.alpha(0.5) //check out different curves
        //let curve = d3.curveMonotoneX
        //let curve = d3.curveStep
        //let curve = d3.curveLinear

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(curve);

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

let line2 = d3.line()
            .x(function (d, i) { return xScale(i) })
            .y(function (d) { return yScale(d.data2) })
            .curve(curve);

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 gradient = g.append("defs").append("linearGradient")
            .attr("id", "area-gradient")
            .attr("x1", "0%")
            .attr("y1", "0%")
            .attr("x2", "100%")
            .attr("y2", "0%");

let stopsData = [
            { "offset": 0, "stopColour": "#FFFFFF" },
            { "offset": 0, "stopColour": "#FFFFFF" },
            { "offset": 0, "stopColour": grey },
            { "offset": 0, "stopColour": grey },
            { "offset": 0, "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)

g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)

g.append("g").call(yAxis)

let areaLine1 = g.append("line")
            .attr("class", "area-line")
            .style("opacity", 0)

let areaLine2 = g.append("line")
            .attr("class", "area-line")
            .style("opacity", 0)

let path1 = g.append("path")
            .datum(combinedData)
            .style("stroke", colour1)
            .attr("d", line1)

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

let path1Node = path1.node()
        let path2Node = path2.node()
        let path1NodeLength = path1Node.getTotalLength()
        let path2NodeLength = path2Node.getTotalLength()

//for every x coordinate, get the y coordinates for each line
        //and store for use later on
        let allCoordinates = []
        let x = 0;

for (x; x < width; x++) {
            let obj = {}
            obj.y1 = findY(path1Node, path1NodeLength, x, width)
            obj.y2 = findY(path2Node, path2NodeLength, x, width)
            allCoordinates.push(obj)
        }

let dots = g.selectAll(".dot")
            .data([1, 1, 1, 1])
            .enter()
            .append("g")
            .style("opacity", 0)

dots.append("circle")
            .attr("r", 8)

dotsBgdText = dots.append("text")
            .style("text-anchor", "middle")
            .attr("x", 0)
            .style("stroke", "white")
            .style("stroke-width", 3)
            .style("fill", "white")

dotsText = dots.append("text")
            .style("text-anchor", "middle")
            .attr("x", 0)
            .style("stroke", "none")
				
        //Add a rect to handle mouse events
        let rect = g.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("opacity", 0)
            .on("mouseover", showArea)
            .on("mouseout", hideArea)
            .on("mousemove", function (d) {

let middle = d3.mouse(this)[0] / width
                let offset = 0.1;

offset1 = (middle - offset) < 0 ? 0 : (middle - offset)
                offset2 = (middle + offset) > 1 ? 1 : (middle + offset)

let x1 = Math.floor(width * offset1) < 0 ? 0 : Math.floor(width * offset1)
                let x2 = Math.floor(width * offset2) > 499 ? 499 : Math.floor(width * offset2)

areaLine1.attr("x1", x1)
                    .attr("x2", x1)
                    .attr("y1", allCoordinates[x1].y1)
                    .attr("y2", allCoordinates[x1].y2)

areaLine2.attr("x1", x2)
                    .attr("x2", x2)
                    .attr("y1", allCoordinates[x2].y1)
                    .attr("y2", allCoordinates[x2].y2)

let dotsData = [
                    { "cx": x1, "cy": allCoordinates[x1].y1, "colour": colour1 },
                    { "cx": x1, "cy": allCoordinates[x1].y2, "colour": colour2 },
                    { "cx": x2, "cy": allCoordinates[x2].y1, "colour": colour1 },
                    { "cx": x2, "cy": allCoordinates[x2].y2, "colour": colour2 }
                ]

dots.data(dotsData)
                    .attr("transform", function (d) { return "translate(" + d.cx + "," + d.cy + ")" })
                    .style("stroke", function (d) { return d.colour })

dotsText.data(dotsData)
                    .text(function (d) {
                        return roundNumber(yScale.invert(d.cy));
                    })
                    .attr("y", function (d) {
                        let maxY = d3.max(dotsData, function (e) { return e.cx == d.cx ? e.cy : 0 })
                        return d.cy == maxY ? 27 : -15;
                    })
                    .style("fill", function (d) { return d.colour })

dotsBgdText.data(dotsData)
                    .text(function (d) {
                        return roundNumber(yScale.invert(d.cy));
                    })
                    .attr("y", function (d) {
                        let maxY = d3.max(dotsData, function (e) { return e.cx == d.cx ? e.cy : 0 })
                        return d.cy == maxY ? 27 : -15;
                    })

gradient.selectAll("stop")
                    .data([
                        { "offset": 0, "stopColour": "#FFFFFF" },
                        { "offset": offset1, "stopColour": "#FFFFFF" },
                        { "offset": offset1, "stopColour": grey },
                        { "offset": offset2, "stopColour": grey },
                        { "offset": offset2, "stopColour": "#FFFFFF" },
                        { "offset": 1, "stopColour": "#FFFFFF" }
                    ])
                    .attr("offset", function (d) { return d.offset })
                    .attr("stop-color", function (d) { return d.stopColour })

})

function showArea() {
            areaFill.style("opacity", 1)
            areaLine1.style("opacity", 1)
            areaLine2.style("opacity", 1)
            dots.style("opacity", 1)
        }

function roundNumber(n) {
            return Math.round(n * 100) / 100
        }

</script>
</body>

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