Off late I have been exploring and working with Polymer a lot. One thing I tried recently was to create a custom element (a custom tag) that has a d3 chart integrated into it. So whenever I use this element in an application the chart renders.
For those who are not familiar with Polymer, let me tell you, it’s a game changer for the next generation of web applications. The web is getting componentized with the new standards that are coming along – Shadow DOM, custom elements, templating, HTML imports e.t.c. Polymer is a polyfill layer or as they call it a SUGARING layer on top of these web standards that allow you create custom web components easily. You do not need to go the the low level API’s to create a custom element. Just use the Polymer library and start creating your own components. Also it provides a heck of other features that can be used, such as two way data bindings. So go over to the Polymer site and check it out.
This is my first post after a long gap – almost one year. During this period I got busy with my regular work, family and other commitments. It was really hard to keep writing although I wanted to do that.
One of the tasks that I worked on a few months back was animating a pie chart as if it is growing from 0 to 360 degrees. And this post will share that with you. So let’s get started….
Most important functionality in the growing pie chart code is defining a custom Raphael paper attribute. So here’s the concept. If you have an attribute that you want to represent as a function and add your logic to it, you can create a custom attribute. For details you can see the official reference here. But here’s how I defined a custom sector attribute that represents a pie slice sector.Read More »
I have already talked about creating a simple HTML5 – SVG pie chart in one of my earlier post. This time, I thought of adding some interactivity to the pie chart and came up with controlling the number of pie slices on the fly with a slider control. This tutorial will describe how to increase or decrease the number of pie slices/sectors in the pie chart by scrolling a slider control. I do not know why I tried this but this example might come to your rescue someday and then do not forget to thank me. Check out the demo,
In Mozilla Firefox the slider control is not displayed, instead a text input is displayed. It works though, you can enter the value and press Enter to see the changes in the pie chart. Google Chrome and Safari works fine. This is how it looks in Chrome,
There is nothing much to describe here other than the code. You must have seen the demo till now. Let’s dive into the code.
When I was working with Flex and Action Script 3.0 I used to do a lot of Dashboard and data visualization applications. One thing that I used to do often was a stacked column chart displaying multi dimensional data. So I thought of posting an example of creating a stacked chart out of the files deep within my Flex project folders. Let’s see the demo first and then move on to the explanation.