Quick thoughts on IT, fun projects, and the singularities I come across.

HTML5 Canvas and a Horace Dediu-esque Chart

A few months back, I came across this chart illustrating Apple’s segment revenues on Reddit:

This is a great chart because it has impact with just a glance, and yet yields more solid data the longer you examine it. Ever since I saw this chart I wanted to build my own for my department, for startups, and offer it up to anyone else who might want to build a similar chart.

Horace Dediu of Asymco.com¬†put this together using a chart-building iPad app called Perspective. Now, I should have just downloaded the damn app and made some similar charts and been happy. Instead I built my own from scratch using HTML5′s canvas tag. Check out the demo.

Demo

In case you didn’t notice it right away (I didn’t either), Horace Dediu’s chart uses the same colors to represent both a product’s revenues as well as their cost of goods sold, giving you an at-a-glance idea of what a product’s margin is. I replicated this feature in my tool as well.

Instead of a long-winded walk through of how I built the tool, I’m just going to share the source here and add some extra commenting for clarity.

It could still use some polish and¬†pizzazz, but overall I’m pretty pleased with the tool. I’ve also learned with some time, math skills, and trial and error, you can draw just about anything in HTML5′s canvas tag. If you are looking to build something using canvas, I’d highly recommend checking out HTML5 Canvas Tutorials. With almost zero knowledge of the canvas tag, I was able to knock out this project in just a few hours with the help of their tutorials.

As always, hope you enjoyed the post and let me know if you have any questions!

Social tagging: > > > >

Leave a Reply