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 <goddip-charts>. The component is contained in a pogg on poggr, 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 document source, data document source, and style document source.

The best way to learn about the <goddip-charts> 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 powered by Disqus