Learning the trigonometry trio — sin cos and tan — is right near the top of my reverso bucket list (things I hope to die before I have to do). They are followed closely by setting up a network printer and running for a bus.

Whatever was I to do? I wanted a pie chart in my app, but I didn’t want to learn trigonometry. Could I make a pie, without π?

☑ Dumb play on words.

Have you heard of my app know-it-all? I have talked about it non-stop for the last month or so.

For those late to the party, the idea is this: I provide you with a list of everything that there is to know about web development. For each item, you record how well you know it. At the end, you will have a list of things that you don’t know about web development.

If you don’t understand why this is great, there is a reddit thread somewhere discussing how I could possibly be so stupid — you may wish to pile on.

Since there are 10,000 things to know, you will probably not do it in a single sitting. So I figured a little pie for each row would help you visualise where you’re up to.

No fancy hover effect, no tooltips, no animation, and just my two favorite dimensions.

Why not use a charting library to do this?

I feel the need to add that D3 is 74 KB of pure brilliance, and that the creator Mike Bostock is one of the great unicorn developers of our time.

Side note: yes, this is supposed to be a vanilla JS app and I am using localforage . But browser storage is just such a mess (thanks to SafarIE) that I acquiesced in my no-library rule.

I don’t mind though. Because I got to use the word acquiesced.

Prior art

Never one to shy away from intellectual theft, I googled “Pie chart SVG” as my first step. There were a few things that involved hacking CSS, but that strikes me as The Wrong Way To Do It. Especially when the reason is to avoid maths (or ‘math’, as you may call it in your weird country).

There was a post on CSS-Tricks. I read it for 12 seconds, then the whole header of the site moved and distracted me. I had to view the source to see what was going on. I never went back to finish the article. (If I was forced to offer an opinion, I would say this is what bad design looks like. Then I would wonder if Chris Coyer would ever read this. Then and I would feel mean and stutter something about great content. Then I would run from the room, tears streaming down my face.)

There were some articles that described using SVG (the correct way), but they quickly devolved into symbols and talk of hypotenuses and that cult-leader Pythagoras (never trust a man that’s afraid of beans).

The more I think about that stuff the more confused and troubled I get. Like the other day when I was in the lift and a bald guy got in that smelled like shampoo.

So I vowed that when my pie was finished, I would write a blog post about it that probably almost no people will be interested in because who makes pie charts without a library anyway?

Seriously, what are you even doing here? Unless you’re future David and you forgot how to do this. Hi there future David, sorry about the you-know-what.

I do not like self-indulgent intros on technical blog posts, but try as I might, I can’t seem to avoid them. At least this one is over now. If, by some miracle, you actually want to know how to do a pie chart in SVG, let the games … start.

The anatomy of a slice

There are three parts to drawing a slice of a pie.

This isn’t a complete slice, clearly. But SVG don’t care. SVG be all like yo dawg, I got this:

That’s the basics. Now, to put it into action we must know:

How to work out the x/y coordinates of those points How to write the syntax that instructs SVG to draw the lines between those points.

#1 Working out where the points are

For this I googled “work out where a point is on a circle”. I found a lot of answers from people assuming I am significantly more cleverer than I actually am. While this is flattering, it isn’t helpful.

This is what the answers looked like to me:

Having spent some time translating professor into Mary Ann, I would like to tell you how to do it, and I will do you the favor of assuming you’re an idiot.