Over on Twitter, I came across this beautiful chart, aptly titled – Joyplot. It is the kind of chart that makes you all curious and awed. So I did what any Excel nerd would do. Recreated it in Excel of course. This post takes you thru the process.
Peak time for sports and leisure #dataviz. About time for a joyplot; might do a write-up on them. #rstats code at https://t.co/Q2AgW068Wa pic.twitter.com/SVT6pkB2hB
— Henrik Lindberg (@hnrklndbrg) July 8, 2017
First let me share the final outcome.
Joyplot in Excel – Peak time of the day for sports and leisure
Here is the final overlapped area chart with a bit of formatting thrown in. It is a pretty close imitation of Henrik’s original chart. Click on it to enlarge.
Creating Joyplot in Excel – Tutorial
As you can guess, the chart is a just an overlapped area chart (ie each area sits behind another, unlike stacked area chart where they are umm, well, stacked!)
Let’s start with a look at data. Henrik’s original data has 10,656 rows, each row containing activity name, time and p value – how much survey respondents enjoyed [@activity] at that time.
Here is a snapshot of first few rows.
Scrubbing and re-arranging the data
As you can see, while this format is excellent for storing, it is very tedious if we want to make one chart with all series. So let’s scrub.
- We need to figure out if an activity should be included or not. I am using the same criteria as Henrik’s. Exclude activities with p value less than 0.003 or activity title “Playing sports n.e.c. *” (not elsewhere classified)
- To do this, we first pivot the data on activity and max(p). Then filter this pivot two ways – max(p) >=0.003 and label not equal Playing sports n.e.c. *
Tip: You may need to enable multiple filters per field in the field settings of row labels. - We will end up with 28 activities.
- Then add a helper column to original table that looks up the pivot and tells if an activity should be included or not
- To do this, we first pivot the data on activity and max(p). Then filter this pivot two ways – max(p) >=0.003 and label not equal Playing sports n.e.c. *
- Add two more columns to original table to tell peak time and modified time. This will help us in rearranging and sorting the data. Modified time just moves time by 3 hours (Henrik’s chart is plotted from 3AM to 3AM). At this stage our data looks like this:
- Now, pivot the data once again. This time,
- exclude activities by using report filter on include? column.
- Set up peak and activity in row labels area, modified time in column labels area and p in values area.
- Arrange the report in tabular format, turn off sub-totals.
- We get this:
- Calculate normalized values by dividing each p value with maximum p value for that activity. We can use another range of 28×288 cells to do this. We get this:
- The next 2 steps may seem confusing. It will become clear once you look at the charts.
- Define an offset value. Start with 0.5. You can change this later. In a separate 28×288 cell range, calculate gaps by multiplying offset with position of an activity. Something like this:
- Now, finally calculate activity + gap values by adding up respective cells in each of the 28×288 ranges. We get this:
At this stage, our data is a shape ready for visualizing.
Creating and formatting overlapped area chart
The chart creation process has 5 steps.
- Select the 28×288 range of cells created in step 7 and insert an overlapped area chart.
- Now, copy the gaps range (created in step 6 above) and paste them on to area chart as new series (just ctrl+c your data and select the chart, press ctrl+v)
- Adjust the order of series so that each activity is sandwiched by appropriately named gap series
- Tip: adjusting 56 series is painful with the chart select data > move series up/down buttons. Instead, just select the series, look at formula bar. The SERIES formula has last parameter as order. Change this number. It is easy to figure out the number once you try a few.
- Change all gap series fill color to white. This instantly creates the floating area chart effect.
- Change the colors of activity series. Apply white / off-white border to these series. Your joyplot is ready.
Quick overview of the chart creation process:
Let’s examine the result of each those 5 steps with a smaller dataset so you can see how everything fits together. Here is the data for this example:
- Create an overlapped area chart with activity+gaps data. We get this:
- Add gaps as new series to chart. You get this:
- Move the gap series so that they sandwich activity series. Use Chart Data > Move series up/down buttons or SERIES formula
- Apply white color fill formatting for gap series. This creates floating area chart effect as below:
- Finally, format the chart by apply some colors and border formatting etc.
So there you go. The final outcome does look joyful.
Alternatives to Joyplot
While joyplot is awesome, it is not easy to make. Fortunately, there are a few simpler alternatives that we can whip up in Excel as soon as you have either the pivot or normalized values. Below I have shown two such examples. Read about sparklines or conditional formatting heatmaps for more.
Joyplot alternative – using sparklines:
Tip: to get axis on your sparkline, just type the times separated by a single space. Then go to format cell (ctrl+1) and set horizontal alignment to distributed. Viola, Excel will fill the cell by adjusting spaces.
Joyplot alternative – Conditional Formatting Heatmap
Download Joyplot Workbook
Click here to download Joyplot Excel workbook. Examine the data scrubbing formulas, pivot and chart settings to learn how this is created.
If you are familiar with R, then go thru Henrik’s R code. It is much shorter than the Excel gymnastics we did with circular pivot table referencing. That said, some of the data re-arrangement could be done with same ease in Power Query too.
Your thoughts on Joyplot?
The only step we missed in Excel implementation is moving average smoothing of the area charts. It can be easily added as a step between 3 and 4 in data stage.
How do you like Joyplot? Would you create something like this for your business / personal data? Share your stories and thoughts in the comments section.
More joy for you…
If you love this, you are going to enjoy these charts too.
37 Responses to “Pie of a Pie of a Pie chart [Good or Bad?]”
If I could have the same quality of graphics and illustration in Office Apps, I would certainly use it.
If I could have the same quality of graphics in Office Apps (Excel, PPT) I would certainly use it.
Chandoo,
First, let me say I love your blog. I like this post, and I think that technically (in terms of readability of data) your argument is correct. The bar of bars, and the table, are much better for readability and accuracy, and as you say would be much easier to produce.
But these points ignore the context of the chart. If the chart was part of a scientific paper, your solution would be a valid one. The context in this case is an illustrated atlas of wildlife. A companion graphic to go with written text. The importance of aesthetic goes up over readability and accuracy. Much of the data and points (I assume) will be covered in the text.
There's always a pure technical tufte-esque argument. But I sometimes think it ignores the value of aesthetics. (Which I admit are quite subjective)
Great post though. Thanks.
The Treemap makes the scope of the data much clearer! The 3D pie chart depiction is deceptive.
This reminds me of the videos ive seen on the internet where it compares the relative sizes of the earth with the larger planets, then the sun, then other stars in the galaxy. Eventually there is an image showing the largest star in the sky with a little pixel representing the sun.
My point is if you varied the size of the charts it would help convey the message. The first chart (salt vs fresh) would be the biggest and the rest would be arranged in descending order. I feel this would be more accurate.
It may be helpful to consider the advice of Steven Few and Edward Tufte regarding pie charts in general. To summarize, they are seldom the most useful way to present data. Here's Few's thoughtful piece on the subject.
http://www.perceptualedge.com/articles/08-21-07.pdf
Try putting the percentages on the bar charts instead of actual amounts. Lakewater would be .013 % instead of 52.
That is very good pie chart example.
Please send example file if it is possible.
It will work , even though colors may be confusing , it can be labeled well . Also it can be called as the drilled chart , as it drills in information further , like the first chart may show business in a region , second may drill into a particular region , thrid may further drill into wat products are there in that region . It works well for me , i would more vote for the 2 nd option .
Overall all this site is awesome ,
p.s : just like me
The risk with pie of a pie of a pie chart is that Jon may have a seizure by looking at it. Also, it isn't easy to read. 😉
I dunno. The only thing worse than a pie chart is a cascading series of pie charts. I don't even think they really lend themselves to this sort of thing. It just becomes a big hide-the-ball game with your viewer.
Those goofy connectors between the pies are pure chart junk. I can't really tell if the second chart has 2 series or 3 - because the connector is a different color than the 2 labeled slices. Despite that, even whereas the drill down kind of works, still the individual components suffer from the same old weaknesses that 3d pie charts have.
Use a large bar chart as your "cover story", and fill in the sub points with smaller bar charts - or even go grab the Fabrice SFE project for extra butter. Use page orientation, color, and some text styles to guide your audience through the drill downs.
FWIW, if you check out the guy's site, you can find several other truly mortifying charts:
http://www.andrewdavies.com.au/index.html
The methane emissions one is particularly heinous. Although, I'm kind of debating what I think about the 'Glacier Changes" chart. I'd kind of like to see the data on that to see how it would look in a more traditional horizon chart.
Thank you, that was scary. I don't understand the "Glacier changes" Chart at all...
Its a very nice way to represent the data, especially when we have sets and sub-sets within the data.
I like these!
Except for the fact that they aren't dynamic and hence must be setup manually each time
It would also be nice if they could be interrogated as in select a different segment and the new data falls out automagically, but then none of the standard Excel charts do that either.
I'd like it better if the bars were stacked. How about this idea (I hope I can convey it in words):
First bar is vertical and stacked.
Second bar is horizontal, stacked horizontally and the same proportion had it been on the first bar.
Third bar is vertical, stacked vertically and the same proportion had it been on the second bar.
Then it would really look like you are zooming on the chart, like the Powers of Ten video, or maybe like the golden ration spiral.
These looks shunting but setting up for each step makes kicks them out. However if these can be arranged automatically by native excel or by VBA, these will be the part of my "Archery"
I agree with Chandoo's Suggestion about the Bar Graph which represents data in a very appropriate manner. Even I prefer doing the same. I seldom use Pie Chart unless required.
That's a real nice example of a missleading infographic. But to be honest, I think chandoos suggestion is not much better!
Why are pie charts bad? I think because they don't show the real size-relations. The biggest pie in that example ist 300k big. The 2nd one has only the size of 10k, about 3% of the first one. Niether the pies nor the bars show the real sizes. I jnow, it's hard to show the sizes because the values of the second and the third pie are so small. But that's what visualization are about - showing relations to allow the reader to see the real sizes!
So how to show the real figures?
First possibility is o use a 1:1 scaling. Well then, you need a very big screen to show also after a 90° rotation, wihich I would prefer because it's a structural comparison and not a timeline. Maybe that solution is not the perfect way.
The other chance you have is to zoom in but to really show that you zoom in! http://www.pro-chart.de/images/Water_Fall.png maybe gives you a first impression what i mean. (i was a quick try, done in 10 minutes)
The next way is, maybe to fold the bars like in the financial report 2011 of the Post of Switzerland page 22. That chart is based on an excel chart. Maybe can explain you how to do it 😉
Financial Statement: http://www.post.ch/en/post-startseite/post-berichterstattung/post-berichterstattung-service/post-berichterstattung-downloads/post-gb-2011-finanzbericht.pdf
page 22: http://www.pro-chart.de/images/FS_Schweizer_Post.png
A way that is not so very common is to divide the bars in a lot of single datapoints. So maybe the 390k bar then consists of about 5,000 single datapoint. That's not possible - it is! Have a look:
http://www.pro-chart.de/images/Dotted_WF.png
It's pure excel!
Now one single point ist 0,2% of the whole (in the example above). Add more datapoints and you can visulize the very big and the very small numbers!
Wish you a lot of fun - visualizing with excel can be very powerful!
Joerg
...if you would like to know how these charts work, just send an email to J.Decker@pro-chart.de
Hey Joerg,
I don't dig so much the dotted waterfall thing. But this is kind of awesome:
http://www.pro-chart.de/images/FS_Schweizer_Post.png
Can you help me on the bar of bar graph? Would it be possible to create that from pivot table? Can you show me how to create the bar of bar graph?
do nothing but say "Awesome!"
You are a Rock star.....This seemed an answer as if someone was reading my mind and just had the solution to my questions on what I exactly was looking for .....What a Fab !!
can u explian me step by step
Can anyone please explain how to make this chart please.
Do you mean the pie of a pie chart or the folded bar chart?
Joery PIE OF PIE Chart please
Can someone please explain how to make PIE OF PIE Chart.
@Mandeep
The last line of the post is:
PS: If you want to know to create this pie of pie of pie chart in excel, see here.
Due to forum migration, link is now:
http://chandoo.org/forum/threads/multiple-pie-chart.7343/
Hi... i love these charts.... can any one show me how to draw these charts in excel 2010
@Vamshi
The very last line of the post refers you to:
PS: If you want to know to create this pie of pie of pie chart in excel, see here. http://chandoo.org/forums/topic/multiple-pie-cahrt
Where is the attachment....it used to be there...i have seen this before but now i am not able to find...
See this:
http://img.chandoo.org/playground/WaterDistribution-chandoo.xlsx
And this:
http://chandoo.org/forum/threads/how-do-you-create-this-chart.9743/
Normally I don't learn post on blogs, however I would like to
say that this write-up very compelled me to try and do so!
Your writing style has been amazed me. Thank you,
quite great article.
This is very impressive, I would like to learn how to build this for myself. I have tried for some time now, is there a step by step process on how to create these waterfall pie of pie charts?
I am novice to excel and use it very seldom. But your blog contains to the point information one needs to get going.
I was searching for a trick to do a Pie chart drill down - for example the first pie chart shows how the prices are distributed between perishable and non-perishable items.
Now if we want to know how the perishable items are distributed - one can click the segment and it will draw another pie chart with distribution of all different perishable items (milk,meat,fruit,veg etc)
So do you have any such trick?
Regards,
electrojit
I like the look of your pie of pie of pie chart, although I understand that the relative size of each pie does not represent the actual percentages.