Drawing plots with NVD3
D3 is a library that offers low-level components for building interactive visualizations in JavaScript. By offering the low-level components, it gives a huge degree of flexibility to the developer. The learning curve can, however, be quite steep. In this example, we will use NVD3, a library which provides pre-made graphs for D3. This can greatly speed up initial development. We will place the code in the file repoGraph.js
and expose a single method, build
, which takes, as arguments, a model and a div and draws a pie chart in that div. The pie chart will aggregate language use across all the user's repositories.
The code for generating a pie chart is nearly identical to the example given in the NVD3 documentation, available at http://nvd3.org/examples/pie.html. The data passed to the graph must be available as an array of objects. Each object must contain a label
field and a size
field. The label
field identifies the language, and the size
field is the total size...