d3 charts - wrapping 'NVD3 Charts' in a web component

In my continued experiments with Polymer, I created a web component that wraps NVD3 - a reusable chart library for d3.js. As part of the activity I ported all of the NVD3 example charts to a web component I am calling __. The component is contained in a pogg on poggr.com, as this is where I do my experimenting and it allows me to code and serve the project documents in the one place.

The above chart is an iframe to this document The actual element tag used is as follows:

 <goddip-charts  
   class="small-chart-styles"
   chartType="bar"
   context="/pg1GXbi9MBx:deyDCclAEUg::53" 
   css="/pg1GXbi9MBx:dxkNM7ZicfBe::53" >
 </goddip-charts >

To view the uncompiled and unminified source see (html document source, data document source, and style document source).

The best way to learn about the __ component is to take a look at its README document. This describes how to use each of the charts, reference data, add styling, etc. You can always view the component source. If you have a _poggr.com_ account you can view, clone, and edit _goddip-charts_ using the poggr project UI.

Comments