William Dickerson
New York, NY, USA
Computer Science, Engineering
& Other Adventures

Adding Shadow Effects to D3 Charts

August 8th, 2016 | by William Dickerson

Let's say you have an area chart that shows sales over time for some product:

There are two ways to interperet this chart. If it's a stacked area chart, then to find the number of desserts sold on 6/1, you subtract 21 from 80. This would make sense if a scone is not considered a dessert. However, if a scone is considered a dessert, it might be better to use a layered area chart. In this case, we would see that, on 6/1, 80 desserts were sold and 21 of them were scones.

One way to emphasize that we have a layered area chart is to add a shaddow effect to each area. This indicates that both areas begin at the x axis, and that one is drawn in front of the other.

To create the shadow effect, we use -webkit-filter: drop-shadow(1px -3px 3px gray) on the appropriate SVG element, but there are some caveats:

For more info on CSS filters, see this excellend article by Chris Coyier.