Change the color of the line plot based on the data (red for the upper threshold, say 0, and blue for below 0)
I am working on the problem of relaying a graph based on object temperature. The goal is to show the parts of the line graph in red where the object's temperature is above 0 and blue when it is below 0
The graph is very similar to what is available here. http://bl.ocks.org/pranitar/01305d9ad0eba73dbf80
I can change the color, but I cannot limit it to part of the line above or below the threshold. Instead, the entire graph changes to red or blue when values are entered in real time. Note that the graph is a dynamic graph, which means that the data is sent to the graph in real time and the graph will change over time to show a line graph.
Any help would be appreciated.
All I use is JS and CSS. No further suggestions for the basics, please.
source to share
Well after many hours (almost 4 hours) with d3, I figured out a solution to this situation. All I need to add is a gradient to the line and define the colors and x / y values at which the gradient would change the line colors.
Here is an example of what I got after this change.
Here is some sample code for it.
add to css:
.graph .group {
fill: none;
stroke: url(#line-gradient);
stroke-width: 1.5;
}
add to schedule:
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 full view of the graph in action: https://github.com/jasmeetsinghbhatia/Roll-A-Ball-3D/blob/master/Assets/StreamingAssets/Tests/speed-ball-graph.html
source to share