まずはこちらをご覧下さい。

See the Pen D3.js Bar Chart Example (IMdb data in 2018) by Sota Hatakeyama (@chooblarin) on CodePen.

このチャートはIMDb の 2018 映画ランキング の投票数です。


SVG ではlinearGradient 要素を使って図形をグラデーションで塗ることができます。

See the Pen SVG Gradient Triangle by Sota Hatakeyama (@chooblarin) on CodePen.


定義したグラデーションカラーを fill に指定するだけ。

<path ... fill="url('#gradient')" />

先ほどの棒グラフの rect をこれと同様に塗りつぶすと…


See the Pen D3.js Bar Chart with Gradient #1 (IMdb data in 2018) by Sota Hatakeyama (@chooblarin) on CodePen.

これはこれで悪く無いですが，投票数の大小とカラーグラデーションとを対応づけたくなります。

See the Pen D3.js Bar Chart with Gradient #2 (IMdb data in 2018) by Sota Hatakeyama (@chooblarin) on CodePen.

これは，グラフの背景にグラデーションカラーの rect の上に，<clipPath> を使ってグラフを描画しています。

この方法は棒グラフのみでなく，時系列グラフなどにも利用できます。

See the Pen D3.js Time Series Chart with Gradient Color by Sota Hatakeyama (@chooblarin) on CodePen.

以上，カラーグラデーションを効果的に使った美しいチャートを描く方法を紹介しました。

おまけ。d3-interpolate を使うと以下のようなグラフも簡単に描くことが出来ます。

See the Pen D3.js Bar Chart with Gradient #3 (IMdb data in 2018) by Sota Hatakeyama (@chooblarin) on CodePen.