Yesterday at the Web Jam meeting I was really honoured to present on the same stage with many other amazing speakers and their projects. I however, presented my small JavaScript pie-chart. After my presentation some people asked me “How did you do it?” In short, I used an interesting effect (initially discovered by Tantek Çelik) called border intersection. Basically if your borders are big enough and are different colours they will intersect along the diagonal line, the angle will depend on the proportion between the border’s widths. So for every sector of the pie chart JavaScript creates one to five divs (usually one, but it depends) and adds a border. I placed a big black PNG with a circular hole over these divs just to give the illusion of a round object and of course added some funky reflections. On the demo you can enter coma-separated numbers or… words. If you enter words the script will populate the chart with numbers of photos, that relate to these words from flickr, and each section of the pie chart will be tagged with the words used.
Thanks for everyone who supported me during Web Jam by either voting or with your kind words.
Scott G