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:

• 1. For now, it only works in Chrome. In fact, having -webkit-filter: drop-shadow(1px -3px 3px gray) causes Safari to completely omit the SVG. To fix this, we also inclue filter: none
• 2. The drop-shadow filter can only be applied to an entire SVG element, so we must draw each of our areas in its own SVG element and align them.

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