Interactive graphic cancer diagnosis

Interactive graphic: Cancer diagnosis and mortality rates

Since my site redesign, this graphic doesn’t quite fit on the page anymore; I’m exploring different options, in the meantime you can see it on a standalone page.

Cancer diagnosis and mortality ratesClick to view mortality rate after:Size of pie chart corresponds to number of cases diagnosed in the United States per yearRed slice corresponds to mortality rate, remainder matching organ color shows survival rate.5 years10 years15 years20 yearsThanks to Chris Kirk, interactives editor at for reposting this graphic and dramatically increasing my number of Twitter and Facebook followers! I’ll try not to let you down, new friends!

The idea for this graphic came from this homeschoolpromqueen tumblr post about how to visually categorize the data in this Edward Tufte blog post about how to present the data in this American Cancer Society publication about the number of cases of different types of cancer diagnosed in the United States every year. The 5- to 20-year mortality rates come from a 2002 study. It occurred to me that the visually most potent way to present such a large amount of data was to anchor it to something everyone knows intimately: our own anatomy.

Note that since 2002, the consensus of some of the the 5- and 10-year mortality rates have changed, but to my knowledge that study is the only one to present mortality rates for virtually all types of cancers up to 20 years. Rather than cherry-pick and include data from different data sets which could be misleading when compared, this one data set was used. I strongly encourage those interested to do some googling for more up-to-date numbers!

I learned a few things about cancer while doing this, things which may seem obvious in retrospect but nothing’s obvious if you don’t have the opportunity to think about it. For example, the more survivable cancers appear to be in organs you can remove, like the breast or prostate: that makes sense. I wonder why the most diagnoses are in some of these organs, too: knowing nothing about medicine, I wonder if any of this is because they’re easier to diagnose. And the pie chart for pancreatic cancer is revealing; there’s a huge five-year mortality rate, but it hardly increases at all after that; once you’ve gotten past a critical time period (which I’m guessing is much shorter than five years), your outlook vastly improves.

I started to learn Javascript last year, and most of the store of knowledge I’ve picked up has gone into this. Thank goodness for ready-made libraries like Raphael.js — I ended up swapping out much of the Raphael for the increased functionality of “pure” Javascript, but I couldn’t have gotten there without that intermediate step. Eventually, perhaps, I’ll graduate to D3.

I’m utterly gratified by the inquiries I’ve had from teachers and public speakers who want to use this graphic in their presentations; you all absolutely have my permission, I just ask that you stick the name of my blog next to it, as well as acknowledgements of the source data. You can save this standalone web page (you’ll need an active Internet connection for the Javascript library to work) or you can save this static standalone PNG graphic.

EDIT Tuesday, Feb 11, 7:46 EST: There were a few errors in the graphic that I have corrected; I humbly apologize, you should never proofread (or prooffread) your own work. The only error that was truly grievous was that I had lung cancer at about 2/3 the correct diameter. I believe (fingers crossed) everything is accurate now.

* Some users have reported when they view the main blog site at, the graphic appears twice in the top post and once in the bottom post; this appears to be a Google/Blogger idiosyncrasy (and probably my limited Javascript skills), when you view the individual posts they each contain the graphic.