D3.js Chart with Gradient Color

Gradient color is not only just looks colorful but also informative depending on how you use it. But how should I use it?

Look at the following bar chart.

This shows IMDb 2018 Movie Rankings' votes. Let's use gradient color on it.

First, you might think just specifying like "fill=url(#gradient)" in bar rect. It would result as follows.

That's not bad. But there is another option. You may want the color to change as the Y-value increases. Look at the following.

Perfect! This uses a technique of <clipPath> element.

The technique actually works for other charts (e.g. time series chart like follows).

Thank you for reading. Happy coding ☺️