Over the last few months, I've been feeling increasingly unsatisfied with the options we have for integration between d3.js and AngularJS. In my earlier projects, I used Brian Ford's approach of creating a directive for the visualisation I need, and adding the d3 code in the link function of the directive. This is simple and works, but it feels like a very superficial integration. Effectively the Angular directive creates a hole in the DOM processing cycle within which d3 can work.


The good guys at BayesHive came out with an alternative approach called Radian, that felt closer to what I wanted. They rely heavily on small, pre-existing Angular directives to declaratively create d3 visualisations. This means that a lot of the information about how to configure the graph lives in the HTML, as it should.


Thinking about it further though, what Radian is doing is using directives (masterfully) to trigger d3, to create SVG tags, so that the browser can finally render a visualisation. But if the browser already contains a declarative language that allows specifying visualisations in SVG, why do we have to jump through so many hoops?