Skip to main content
100%

Colour gradient on a graph line

✓ Published0🌍 Public
Dd3noob
Last edited Nov 30, 2019
Created on Jun 23, 2014

This example shows a line graph of stock closing prices over time, with the line colored by a red-to-black-to-green gradient that maps to the y-axis value. The graph uses D3.js (version 3.5.17) with SVG rendering, and applies the gradient via a `linearGradient` definition referenced by the line’s `stroke` attribute. Data is loaded from a CSV file using `d3.csv`, and axes are generated with `d3.svg.axis`. The gradient stops are explicitly defined in code to create color bands at 40% and 62% of the vertical range.

AI-generated description

This is a follow on from the simple d3.js graph used as an example in the book D3 Tips and Tricks.

It is aimed at demonstrating the application of a colour gradient to the line of a line graph using d3.js. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

mit Licensed

Similar vizzes