Can we live without pies?

Cakes are delicious, thus, no! We cannot live without pies.

In this further iteration of my D3.js reusable templates journey, here another module that allows generating a pie/donut chart type with D3.js.

To learn more about some of the core principles, please refer to my previous article.

As in the previous module, the bootstrap relies to the D3.js data binding mechanism. A pie can become a donut by a metter of a config:

See the Pen PEemKV by Fabio Franchino (@abusedmedia) on CodePen.

By using some accessors it is possible to instruct the generator about how to use the given dataset without restructuring it as well as using custom function to tint elements:

See the Pen ypjbPe by Fabio Franchino (@abusedmedia) on CodePen.

It's dynamic

This module can receive data updates therefore the chart update accordingly (push the 'update' button):

See the Pen XVqRVM by Fabio Franchino (@abusedmedia) on CodePen.

Beyond the Pie

The radius configuration can accept functions, thus, it opens up several way to build representation based on the pie/donut model:

See the Pen xpjdpX by Fabio Franchino (@abusedmedia) on CodePen.

The spirit of the whole project is to make easy further customizations using D3.js instead baking all the possibile user requirements within it:

See the Pen RxyVxe by Fabio Franchino (@abusedmedia) on CodePen.

Interoperability

This is another major principle of the project: allowing easy interoperability between components such as this little initial example.

Click on each slice to see the result of this demo:

See the Pen WdJjMN by Fabio Franchino (@abusedmedia) on CodePen.

UI elements

Nothing stop to use this module as a tiny UI element such as a little gauge:

See the Pen GydmQP by Fabio Franchino (@abusedmedia) on CodePen.

So far

Still happy of the results nevertheless some changes over the road.

Let's see the next episode!