New Visualization – Stacked Wedge
In doing client specific work, especially for business info-graphics, I often get client requests asking “can we see this in a pie chart?” For 90% of the use cases there is usually always a more effective way to visualize data than using a pie chart. As you may know, this is due to the fact that it is much harder to distinguish value differences in a polar layout than in more straightforward linear layouts (bar/column, etc.)
On a recent project the client was pretty adamant about needing to see a specific set of measures in a pie chart, because that is what they felt would resonate most strongly with their target user group. In this particular case they also were going to be showing hierarchal data with a requirement for some type of drill-down mechanism.
Rendering a simple pie chart just seemed so contrary to any best practices and not something I was particularly interested in implementing, so I started to explore some alternative displays that would still be recognizable with the user base, but at least leverage SOME data visualization best practices. What I came up with is a Stacked Wedge Graph. Doing a little googling I was surprised I did not find other similar examples of polar charting using this technique (although I am sure many people have created something similar to this.)
What is a bit unique about this approach is that in representing hierarchal data it takes advantage of the radial nature of the chart. By placing the more granular data at the perimeter of the visualization it gives more fidelity to that data. So as you drill down into the data hierarchy (and move to the outside of the circle) each smaller slice of data get proportionately more surface area. This is traditionally what makes pie charts hard to read (judging relative surface area of particular wedges.) In this case we take advantage of the fact that as you move outward radially the surface area grows exponentially in relationship to the radius. By keeping each level of the hierarchy as a ring within the whole circle we minimize the exponential radial distortion and allow for more accurate comparative analysis between relative hierarchal slices (rings.)
The advantage over a more straightforward approach, such as using a stacked column chart is that as the data gets more granular you get higher resolution for comparative analysis within a specific level. The disadvantage (at least one of them) is that you do not get a common linear reference point to relative values across the whole data set (such as a grid line in a column chart.)
Now for the really interesting part of this post. This visualization was created in Axiis, a new MXML based data visualization framework I have been working on with Michael VanDaniker for the past couple of months. The whole visualization was built purely in MXML (less than 100 lines for the core visual and under 200 lines for the whole application!) The MXML includes a description of the complete layout algorithm, drawing geometries, styling, and parsing/aggregating of data. I plan on writing up a post shortly that describes what we are trying to accomplish with Axiis, and some of the basic precepts we are following in building out this framework. More to come…
1. April 2009 at 02:15
That is so cool. I can’t wait to check out and work with Axiis. Great job!
2. April 2009 at 08:29
Wow this is awesome! I’m excited to see more of your examples (the Olympic medals one looks sharp) and I can’t wait to start playing with Axiis. Great job guys!
2. April 2009 at 09:50
[...] Gonzalez has written an excellent post on how he’s come up with a new visualization method he’s calling Stacked Wedge Graph. [...]
2. April 2009 at 11:02
Nice job, the graphic looks great. You are right, it has been done before. See http://neoformix.com/2006/MultiLevelPieChart.html for example or http://www.cc.gatech.edu/gvu/ii/sunburst/ . I called them ‘multi-level pie charts’ or ‘radial treemaps’. Best of luck with Axiis.
2. April 2009 at 11:15
@Jeff Clark,
In this instance I was also using it as a test case for how difficult/easy it would be to describe within Axiis using just a couple elements of our core library.
2. April 2009 at 15:00
Yeah, I’ve done a similar thing too:
http://benjismith.net/index.php/2008/06/13/analytics-gui-mockup/
But I never had any idea what other people called them. Personally, I’ve referred to them as “hierarchical pie charts”.
3. April 2009 at 05:42
I’ve seen these charts years ago for family trees in genealogy.
9. April 2009 at 04:43
[...] Représentation de la répartition des médailles olympiques par pays : Raisonnement détaillé sur le blog de TWGonzales [...]
12. April 2009 at 04:22
Hi. I implemented similar concept for search results clustering one year ago. I added some nice interface to it though. You can expand/collapse subgroups and focus/zoom on them so deeper levels are more readable (we had up to four of them). This made it not only visualization but also exploration tool.
Check it out here : http://vorg.pl/projects/2008/02/01/carrot2
13. April 2009 at 06:57
@Marcin, that is a GREAT visualization. I encourage others to go check it out. http://vorg.pl/projects/2008/02/01/carrot2.
We will be adding those types of capabilities (states and transitions/interactivity) to Axiis to make adding those features to something like the Stacked Wedge very easy.
2. July 2009 at 18:14
Hi
I was getting nuts trying to find a chart like that. I need to plot some data (it’s a microbiology data) and that chart is exactly what I am looking for. How can I create one of this? Can I buy the program or something like that?
Thank you,
Adriana
ps.: Sorry for my lack of knowledge about the programs.
2. July 2009 at 18:19
@Adriana, This chart is now available within the Axiis project http://www.axiis.org But, it requires that you are familiar with building applications in Adobe Flex.
3. July 2009 at 07:33
Tom,
We have the Adobe Flex here installed and I already did some small charts (easy ones) on it. I will take a look and see what I get!
Thank you,
Adriana
3. July 2009 at 07:40
@Adriana,
If you run the examples from the Axiis downloads that is a great start. If you run into any issues, please post your questions on http://groups.google.com/group/axiis so I can help answer them
30. July 2009 at 06:06
Hi..this staked wedge is awsome..i’m trying to use it.but is there any way to implement a click event on each wedge?
30. July 2009 at 09:17
@janu,
Yes all the infrastructure code is in there to support click events (and other mouse events as well) in the next few weeks we will update the development branch of Axiis and these will be publicly exposed events you can consume at either the DataCanvas or Layout level (or both)
- Tom
16. September 2009 at 15:52
Hi Tom,
This wedge is awesome.I am trying to learn this new technology of flex.And am very much interested to know about this axis also.can you tell me what all other shapes can be made with axis.
15. January 2010 at 00:47
Great articles and it’s so helpful. I want to add your blog into my rrs reader but i can’t find the rrs address. Would you please send your address to my email? Thanks a lot!
15. January 2010 at 08:20
The RSS feed is http://www.twgonzalez.com/blog/?feed=rss2
Cheers,
Tom