0

I'm back trying to construct another D3.js chart, this time, a type of Pie Chart with 3 slices. That's simple enough, but this chart has to have radial gradients on each piece. Again, maybe not too difficult. The hard part is that each "piece" has a different radius. Here's the basic gist of it:

enter image description here

I started a prototype on Codepen. Here's the gradient part:

var radialGradient = svg.append("defs")
  .append("radialGradient")
    .attr("id", "radial-gradient");

radialGradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#fff");

radialGradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "red");

If you can add another gradient on one of the two sides with a smaller radius, I think that I could take it from there.

Edit: This question is not far removed from my own. Just not sure how to apply it to my pie pieces.

Edit 2: Here's my 2nd prototype. Not bad if I say so myself. Any thoughts?

Rob Gravelle
  • 325
  • 5
  • 23
  • *"Feel free to mock something in Codepen or JSFiddle!"*. Well, that's quite some work. Why don't **you** create a basic pie chart? Then, we just need to tweak the arc generator, based on the logic for the radius (which you'll need to describe). – Gerardo Furtado Nov 22 '19 at 00:42
  • I added a prototype in Codepen now. – Rob Gravelle Nov 22 '19 at 13:48

0 Answers0