Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Lewis Cowles
Lewis Cowles
74,902 Points

JS Pie-Chart Displays Lea Verou

So In the UK our capital city just had their elections for Mayor. They showed an infographic on our national broadcasting corporation Link and I liked the look. To be honest I've made something similar before, but it was using the canvas tag had no animation, and saved as an image, so I've never put it on a live-site.

I took a look at the source code and it seemed a mess, full of objects that looked like there was too much markup for my liking. I wanted to use the feature, I didn't mind the inspector getting extra DOM, but I wanted the raw source to be lean.

Later on Twitter someone posted that it was inspired by the work of Lea Verou, who I've read work by before, so I went searching on google and found this. https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

I read the article and had a bash at modifying it to fit how I think it's best used. To be honest I'm not ecstatic about the end-result but for an hour or two of playing around I'm quite happy.

http://jsfiddle.net/LewisCowles1986/9jostar8/

I Have mixed some code from the example given with a modified animation and SCSS syntax using from rather than to (so the progress grows rather than shrinks). I've never seen $$ before, so I just made bits that didn't work accept jQuery, and made some helper methods, although I could make them smaller using jQuery, I didn't want to deviate too much.

It seems to work well on edge, firefox, chrome and opera for my windows 10 and linux ubuntu boxes so I'm quite happy with it and wanted to share it with all the lovely people at treehouse

1 Answer