Anybody seen or have any good ideas for some SVG chart animations?

[Guest Nickzilla]

I was playing around with a pie chart on Codepen using the svgMorph plugin. I know a lot of people seem to use the circle and stroke-dasharray technique, but that produces odd results in Firefox for me.

 

Does anyone have any other ideas or suggestions?

 

A few other questions from my Codepen:

• Is there a mathematically way of updating the paths to match a section percentage? (I just created two and pasted the path from a previous one to mimic the 50% to 75% tween).
• How can I modify the morph so it doesn't have the 3d effect? Where it seems to morph from the behind the point? If I just wanted a plain clockwise 2d morph, is that possible?

See the Pen BQVvqJ by nickmuth (@nickmuth) on CodePen

[PointC]

Hi Nickzilla 

 

I'm not sure morphSVG is the best choice for creating pie chart wedges. Using drawSVG (stroke-dasharray) makes it pretty easy to calculate sizes. 360 degrees in a circle so 3.6 degrees per percentage point of completion. That's why you'll see most people using the stroke technique. I have a couple pens in my collection that use this method.

 

Pie Chart Bakery

See the Pen yOELLJ by PointC (@PointC) on CodePen

 

Movie Countdown

See the Pen jqaKYL by PointC (@PointC) on CodePen

 

Others may jump in here with more advice or examples, but I'd say using the stroke of the path would be better than trying to morph into new pie wedges.

 

Hopefully that helps a bit.

 

Happy tweening.

[Guest Nickzilla]

Wow, the pie chart bakery is sweet. I'll have a play with it and see if I can make sense of it. Thanks Craig!