polygon gradient color

by Rushan Sakhibgareev

HTML

<script>

var depths = 
       [
        3100.049993,
        3100.099993,
        3100.149993,
        3100.199993,
        3100.249993,
        3100.299993,
        3100.349993,
        3100.399993,
        3100.449993,
        3100.499993,
        3100.549993,
        3100.599993,
        3100.649993,
        3100.699993,
        3100.749993,
        3100.799993,
        3100.849993,
        3100.899993,
        3100.949993,
        3100.999993,
        3101.049993,
        3101.099993,
        3101.149993,
        3101.199993,
        3101.249993,
        3101.299993,
        3101.349993,
        3101.399993,
        3101.449993,
        3101.499993,
        3101.549993,
        3101.599993,
        3101.649992,
        3101.699992,
        3101.749992,
        3101.799992,
        3101.849992,
        3101.899992,
        3101.949992,
        3101.999992,
        3102.049992,
        3102.099992,
        3102.149992,
        3102.199992,
        3102.249992,
        3102.299992,
        3102.349992,
        3102.399992,
        3102.449992,
        3102.499992,
        3102.549992,
        3102.599992,
        3102.649992,
        3102.699992,
        3102.749992,
        3102.799992,
        3102.849992,
        3102.899992,
        3102.949992,
        3102.999992,
        3103.049992,
        3103.099992,
        3103.149992,
        3103.199992,
        3103.249992,
        3103.299991,
        3103.349991,
        3103.399991,
        3103.449991,
        3103.499991,
        3103.549991,
        3103.599991,
        3103.649991,
        3103.699991,
        3103.749991,
        3103.799991,
        3103.849991,
        3103.899991,
        3103.949991,
        3103.999991,
        3104.049991,
        3104.099991,
        3104.149991,
        3104.199991,
        3104.249991,
        3104.299991,
        3104.349991,
        3104.399991,
        3104.449991,
        3104.499991,
        3104.549991,
        3104.599991,
        3104.649991,
       ...

JavaScript

var vis = d3.select("body").append("svg")
         .attr("width", 700)
         .attr("height", 700)

var len = depths.length,
    logVals = [],
    maxMins = [
      [depths[0],depths[len-1]],
      [Math.min(...densities),Math.max(...densities)],
      [Math.min(...porosities),Math.max(...porosities)]
    ];
    
    
    
scaleDepth = d3.scale.linear()
               .domain([maxMins[0][0],maxMins[0][1]])
               .range([0,600]);

scaleDens = d3.scale.linear()
              .domain([maxMins[1][0],maxMins[1][1]])
              .range([30,60]);
              
scalePoro = d3.scale.linear()
              .domain([maxMins[2][0],maxMins[2][1]])
              .range([30,60]);

for (var i=0;i<len;i++)
    logVals.push([depths[i],densities[i],porosities[i]]);


var polygon = [];

for (var i=0; i<len;i++){
    if (scaleDens(densities[i])>scalePoro(porosities[i])){
        polygon.push({
           "y": scaleDepth(depths[i]),
           "x": scaleDens(densities[i]) 
           });
        }
};

for (var i=len-1; i>=0;i--){
    if (scaleDens(densities[i])>scalePoro(porosities[i])){
        polygon.push({
           "y": scaleDepth(depths[i]),
           "x": scalePoro(porosities[i]) 
           });
        };
};

var linearGradient = vis.append("defs")
            .append("linearGradient")
            .attr("id", "linear-gradient")
            .attr("x1", "0%")
            .attr("x2", "0%")          
            .attr("y1", "0%")
            .attr("y2", "100%");
            
    
var color = d3.scale.linear()
      .domain([maxMins[1][0],
               maxMins[1][0]+(maxMins[1][1]-maxMins[1][0])/2,
               maxMins[1][1]])
      .interpolate(d3.interpolateHcl)
      .range(["lime","goldenrod", "yellow"]);        


for (var i=0; i<len;i++){
    var depthFrac = ((depths[i]-depths[0])/
                     (depths[len-1]-depths[0]));

    linearGradient.append('stop')
            .attr("offset", depthFrac*100+"%")
            .attr("stop-color",...