JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<svg></svg>

CSS

.line {                         
    fill: none;                 
    stroke: url(#line-gradient);    
    stroke-width: 2px;          
}

JavaScript

var width = 500,
    height= 350;

var svg = d3.select("svg").attr("width", width)
    .attr("height", height);

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

svg.append("linearGradient")                
        .attr("id", "line-gradient")            
        .attr("gradientUnits", "userSpaceOnUse")    
        .attr("x1", 0).attr("y1", 200)         
        .attr("x2", 0).attr("y2", 300)      
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "red"},       
            {offset: "40%", color: "red"},  
            {offset: "40%", color: "black"},        
            {offset: "62%", color: "black"},        
            {offset: "62%", color: "lawngreen"},    
            {offset: "100%", color: "lawngreen"}    
        ])                  
    .enter().append("stop")         
        .attr("offset", function(d) { return d.offset; })   
        .attr("stop-color", function(d) { return d.color; });