O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding the index line and area gradients

We'll look at the first couple of functions we called in the update function: the addGradients, addArea, and addGradients function. When you run the code with just these functions, you'll see the following:

In this figure, you can see that we've got a colored gradient between the lines, and the lines themselves are also colored. To get these colors, we need to define two gradients, which we can later add as the stroke for the line and the fill for the area. These gradients are SVG gradients (a topic for a book in itself), on which you can find more information here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required