Using Angular to render DOM with D3 generators

D3 was an obvious choice for building data visualizations in the HyperTrack dashboard because of the ability to customize to our hearts content. However we wanted to use the Angular framework to handle DOM rendering.

D3 is hands down the most powerful JS library for visualization and data manipulation. The latest version of D3 (version 4) breaks down the huge monolithic library into smaller libraries with specific functionality. This change in D3 fits right in with the trend of front-end development moving towards modular design patterns. It reduces code size shipped to clients and load times for users because we do not have to import the entire D3 monolith.

D3 is a powerful library to handle end-to-end data visualization from data manipulation and formatting to rendering the DOM. However we wanted the Angular framework to handle DOM rendering with D3 supplying the necessary attributes to render the elements. D3 generators are the way to go for this purpose.

Example – pie chart

Let’s take the example of rendering a pie chart. If you think about it a pie chart is a set of arcs with a path attributes. d3-shape ships with arc and pie generators. pie generator computes the attributes of a pie chart and arc generator takes these attributes as an input and computes the path data of the arcs.

pieGenerator is the configured pie generator function which returns pie chart arc attributes from the given data. arcGenerator is the configured arc generator which takes arc attributes and generate each piece of the pie.

This array of path this.path is all that Angular would need to render the pie chart.

Why is this method better than rendering the elements using D3?

In DOM-agnostic frameworks like angular and react it might be a bad idea to handle DOM rendering directly. This tightly couples the DOM and framework and breaks features like server-side-rendering. Besides this method does not require Angular users to import or learn DOM rendering functionalities of D3 if they don’t need it.

To see D3 in action with Angular checkout our Demo Dashboard.