What is the best way to create pie graphs and other animated dynamic info graphics?
Should I look into js libs like paper.js or should I create my own using minimal js and css3?
Examples are really what I’d like to see. Thanks!
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
What is the best way to create pie graphs and other animated dynamic info graphics?
Should I look into js libs like paper.js or should I create my own using minimal js and css3?
Examples are really what I’d like to see. Thanks!
There are a number of javascript libraries out there which will do this for you. There certainly isn’t any need to be rolling your own code.
If you do want to write your own, be aware that to get the kind of effects available with some of the libraries will take a lot more than minimal js code. Sure you could write a very basic script that draws pie segments in a fairly small amount of code, it won’t have the animations or dynamic properties you’d get from using a library. And most libraries really aren’t that big considering how much they do.
My favourite library for this sort of thing is Raphael, along with it’s graphing sister library g.Raphael.
The beauty of Raphael is that it makes it very easy to produce quite complex graphics, including some very nice animated graphs. See the examples on the site above, which includes pie charts.
It’s all Javascript-based so you can update it on the fly.
In addition, Raphael scores over other similar libraries in that it works flawlessly even in older versions of IE (as far back as IE6!), as it uses SVG on modern browsers, and falls back to VML for old versions of IE.
Hope that helps.