D3.js Chart with Gradient Color

Sota Hatakeyama — Sat, 09 Feb 2019 07:53:47 +0000

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 ☺️

Bar Chart with rounded corner by D3.js

Sota Hatakeyama — Sat, 22 Dec 2018 11:45:25 +0000

I love D3.js and Data Viz. Recently I was wondering how to draw a rounded-corner bar chart. I found there are already some nice answer in StackOverflow.

In brief, you can use <path> instead of <rect> when you want it to be rounded-corner. I wrote my CodePen sample as the replication.

<path>'s d attribute is like follow.

`
 M${x(item.name)},${y(item.value) + ry}
 a${rx},${ry} 0 0 1 ${rx},${-ry}
 h${x.bandwidth() - 2 * rx}
 a${rx},${ry} 0 0 1 ${rx},${ry}
 v${height - y(item.value) - ry}
 h${-x.bandwidth()}Z
`

rx and ry are the radii of the ellipse and you can change it as you like.

I've also created some examples using D3.js and React 😎
https://github.com/chooblarin/react-d3-example

DEV Community: Sota Hatakeyama

D3.js Chart with Gradient Color

Bar Chart with rounded corner by D3.js