Change Color Of Line Graph Based On Data (red For Above Threshold Of Say 0 , And Blue For Below 0)

I am working on a problem to relay a graph based on the temperature of an object. The goal is to show portions of line graph in red where object's temperature is above 0 and blue

Solution 1:

Ok after fiddling a lot (almost 4 hours) with d3, I figured out the solution to this situation. All I need to add was a gradient to the line and define colors and x/y values at which the gradient would change colors of the line.

Here is a sample of what I got after this change.

https://cdn.rawgit.com/jasmeetsinghbhatia/Roll-A-Ball-3D/2ce001fa/color%20graph%20for%20threshold%20speed%202.mov

Here is the sample code for same.

add to the css:

.graph.group {
          fill: none;
          stroke: url(#line-gradient);
          stroke-width: 1.5;
      }

add to the graph:

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

For a complete look at the graph in action: https://github.com/jasmeetsinghbhatia/Roll-A-Ball-3D/blob/master/Assets/StreamingAssets/Tests/speed-ball-graph.html