angular + d3Kit Bubble chart

This example uses d3Kit with AngularJS through angular-d3Kit-adapter.

d3Kit factory helps you create a reusable chart. angular-d3Kit-adapter converts the chart into an angular directive in one line.

angular.d3KitAdapter.plug(module, 'bubbleChart', BubbleChart);

Then you can use this tag.

<bubble-chart chart-data="bubbles" chart-on-bubble-click="handleClick"></bubble-chart>

In bubbleChart.js, a custom event "bubbleClick" is defined. This event becomes an attribute chart-on-bubble-click that you can bind to an event handler automatically.

Try it by

• Click on a bubble
• Open in new window and resize to see the chart resize.