Skip to main content
100%

13 - Colour gradient on a graph line

✓ Published0🌍 Public
Aadry34160
Last edited Nov 1, 2016
Created on Oct 31, 2016

This example shows a line chart of stock closing prices over time, where the line is colored by value using an SVG linear gradient. The gradient maps price levels to colors: low values appear red, middle values black, and high values lawngreen. A light gray line and axis frame the chart, while the data is loaded from a CSV with dates and closing prices. Although tooltip and scatterplot code are present, they are commented out, so the visualization displays only the gradient-colored line without animation. The gradient is defined vertically over the y-axis range, creating a smooth color transition that highlights the price thresholds directly on the line.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/4e6492eba6a7a5f5958579103b11aeba'>10 - Simple d3.js tooltip</a>

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/5d7fe0af1c6ca50c28aaeb4905bfaba9'>11 - Filtering in d3.js</a>

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/975b03fd11b013f435b81db37c68ecce'>12 - If selection in d3.js</a>

gnuplot Licensed

Similar vizzes