How and why custom SVG shapes in charts

[shreshthmohan]

For this chart I used a custom shape instead of just mashing together a <circle> and a <rect>

Why

1. Interactions: I had a hover interaction to show a border. With the compound shape, a border shows up on both the rect and the circle, revealing the contained shapes. And it doesn't look that good.
2. Opacity: If I give an opacity to the compound shapes, it looks weird because of the overlap between the contained shapes.

How

Explain the geometry and trigonometric calculations. Though done current with the help of D3, there's a better approach to do it without d3, with less code and with fewer points on the shape.