Line gradient

by Igor Cuckovic

HTML

<body>
    
  </body>

CSS

.line {                         
    fill: none;                 
    stroke: url(#line-gradient);    
    stroke-width: 5px;  
    stroke-linejoin: round;
    stroke-dasharray: 600, 5, 5, 5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5;
}

JavaScript

// tutorial 11

var width = 900,
    height = 941;

var svg = d3.select("body").append("svg")
        .attr({
            "width": width,
            "height": height
        });


var group = svg.append("g");

// height = 505

var line = "m 264.43936,799.3798 39.14884,-50.2287 -36.93287,-52.44468 34.7169,-73.12708 56.87662,-26.59167 45.0581,-48.01273 -26.59167,-24.3757 -3.69328,-27.33032 -2.21598,-17.72778 -28.06898,-31.02361 14.03449,-31.02361 41.36482,-19.2051 14.03449,-19.20509 -33.23958,-33.97824 -8.86389,-48.01273";

        group
        .append("path")
        .attr("class", "line")
        .attr("d", line)
        .attr("fill", "none")
        .attr("stroke", "#000")
        .attr("stroke-width", 1);

svg.append("linearGradient")                
        .attr("id", "line-gradient")            
        .attr("gradientUnits", "userSpaceOnUse")    
        .attr("x1", 0).attr("y1", 799)         
        .attr("x2", 0).attr("y2", 294)      
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "#A43824"},
            {offset: "10%", color: "#A43824"},
            {offset: "10%", color: "#E35726"},
            {offset: "20%", color: "#E35726"},
            {offset: "20%", color: "#F68D35"},
            {offset: "30%", color: "#F68D35"},
            {offset: "30%", color: "#FBAD57"},
            {offset: "40%", color: "#FBAD57"},  
            {offset: "40%", color: "#FCCF84"},  
            {offset: "50%", color: "#FCCF84"}, 
            {offset: "50%", color: "#BDDB92"}, 
            {offset: "60%", color: "#BDDB92"}, 
            {offset: "60%", color: "#A1CF72"},  
            {offset: "70%", color: "#A1CF72"},  
            {offset: "70%", color: "#80C25D"},    
            {offset: "80%", color: "#80C25D"},  
            {offset: "80%", color: "#549E44"},  
            {offset: "90%", color: "#549E44"},  
            {offset: "90%", color: "#357C3C"},              
            {offset:...