shreshthmohan / next-blog

next-blog-mu-three.vercel.app
2 stars 0 forks source link

How and why custom SVG shapes in charts #3

Open shreshthmohan opened 2 years ago

shreshthmohan commented 2 years ago

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.