Punch-card Calendar Overview

Bewertung:  / 1

The new year-based iCal view can be really helpful to identify busy days at a glance. The amount of daily calendar entries is visualized trough color metrics. Red-colored days represent days packed with meetings and other events. In terms of estimating your availability, you can easily estimate your remaining capacity.

I modified one of the Raphaël JS Library samples to represent a year-based calendar overview of all months and days as colored punch holes.  The small JavaScript library is intended simplify your work with vector graphics on the web. The visualization makes use of color and size metrics to visually represent the amount of calendar entries per day. Interestingly, the visualization of a whole year as colored punch holes reveals peak times and might reveal recurring pattern.

After all, it can be simply used as slick visualization to represent the passed-by year. I'm looking forward to get a nice overview of 2011 in terms of calendar entries by the end of 2011.

You can try it here: Calendar view in action.

The bubbles or 'punch holes' indicate the number of calendar entries per day based on their size and color metrics. The circular radius is determined by taking the square root of the number of entries divided by PI. Both, PI and the resulting square root are factorized as shown below:

The color metrics range from green to red. The actual HSV color for a certain amount of daliy entries results from:

The *js approach is based on the data provided through an html table. The table contains all months with their daily calendar entries. You will need some kind of script to export the iCal information into the html table. I used the following script which supports automatic ftp upload.    

here is the github link    

Raphaël JavaScript library