Building a bar chart directive based on D3

Besides simply showing a list of all the expenses entered, it would be a lot meaningful if we can also display a summary of the total expenses across the categories as a bar chart.

We will build our own custom bar chart directive that will generate graphs based on the inputs provided.

For this, we will use the D3 JavaScript library to create a SVG-based bar graph.

Note

Complete details on D3 and various examples of how to use it are available at http://d3js.org/.

An important thing to remember about the D3 library is that D3 is not a ready-to-use graphing library, where you pass the data values and define what type of graph you want.

D3 could be thought of as jQuery, but for data visualization. D3 simply provides a set of APIs to easily update and manage the DOM.

So, while bar graphs are amongst the most basic type of graphs, D3 can be used to build fairly complex and highly interactive data visualizations.