Using D3 or third party libraries with Polymer – simple example

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.

Coming back to our topic of discussion, one thing that can be a bit confusing to Polymer beginners is to use a third party javascript library with your polymer element. Here I have an example of using the D3 js charting library to create a custom chart component. Let’s call our custom element  my-custom-d3-chart. By the end of this discussion we will have a custom tag – <my-custom-d3-chart />. Yes a custom HTML tag. Our own tag. Yo!!!

Read More »