This talk covers how to integrate D3 with SVG & Angular to create awesome visualisations, leveraging the modularity of D3 and it's data binding, with angular data binding and the reusability of directives. Source code for this talk: https://github.com/adamkleingit/d3-svg-angular

1. Adam Klein
- 500Tech - Frontend Experts
- Passionate developer & speaker
- I used to have a jewfro
CTO @
D3, SVG & ANGULAR

2. SVG BASICS

3. VISUALIZATIONS

4. Existing Solution?

5. Pure SVG & Angular

8. D3

9. D3 + Angular?

10. D3 PATH GENERATORS

11. Make an Arc - SVG
<path stroke="black" fill="black" thickness="2"
d="M13.753288904374106,9.992349288972044A17,17 0 0,1
-13.753288904374106,9.992349288972045L-12.135254915624
213,8.816778784387099A15,15 0 0,0
12.135254915624213,8.816778784387097Z"></path>

12. Make an Arc - D3
let arc = d3.svg.arc()
.outerRadius(17)
.innerRadius(15)
.startAngle(0.7 * Math.PI)
.endAngle(1.3 * Math.PI);
d3.select("svg")
.append("path")
.attr("d", arc());

13. D3 Path Data Generators
+ Angular
arc() {
return d3.svg.arc()
.outerRadius(17)
.innerRadius(15)
.startAngle(0.7 * Math.PI)
.endAngle(1.3 * Math.PI)();
}
<path d={{ $ctrl.arc() }}></path>

14. Custom Angular component
<arc
stroke="yellow"
fill="yellow"
thickness="2"
radius="17"
start-angle="0.7"
end-angle=“1.3">
</arc>

15. ng-attr-*
<path ng-attr-d={{ $ctrl.arc() }}></path>

16. custom component
{
templateNamespace: 'svg',
replace: true
}

17. Single root
<g>
<text>Hello</text>
<text>World</text>
</g>

18. D3 BEHAVIOURS

19. drag
var drag = d3.behavior.drag()
.on("drag", dragged);
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y);
}
var dot = d3.select("g")
.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);

20. drag
Define
behaviour
var drag = d3.behavior.drag()
.on("drag", dragged);
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y);
}
var dot = d3.select("g")
.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);

21. drag
var drag = d3.behavior.drag()
.on("drag", dragged);
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y);
}
var dot = d3.select("g")
.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);
Create elements
and bind to data

22. drag
var drag = d3.behavior.drag()
.on("drag", dragged);
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y);
}
var dot = d3.select("g")
.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);
attach behaviour to
element

23. drag
Change DOM
on drag
var drag = d3.behavior.drag()
.on("drag", dragged);
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y);
}
var dot = d3.select("g")
.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);

24. d3 drag + angular
<circle
ng-attr-cx="{{ item.x }}"
ng-attr-cy="{{ item.y }}">
</circle>

25. const drag = d3.behavior.drag()
.on(‘drag', () => {
this.item.x += d3.event.dx;
this.item.y += d3.event.dy;
$scope.$digest();
});
d3.select($element[0]).call(drag);
Define behaviour
d3 drag + angular

26. const drag = d3.behavior.drag()
.on(‘drag', () => {
this.item.x += d3.event.dx;
this.item.y += d3.event.dy;
$scope.$digest();
});
d3.select($element[0]).call(drag);
Change data on
drag
wrap with directive

27. wrap with directive
const drag = d3.behavior.drag()
.on(‘drag', () => {
this.item.x += d3.event.dx;
this.item.y += d3.event.dy;
$scope.$digest();
});
d3.select($element[0]).call(drag);
Attach behaviour
to element

28. generic draggable directive
<circle
draggable="item"
ng-attr-cx="{{ item.x }}"
ng-attr-cy="{{ item.y }}">
</circle>

29. zoom-pan
d3.behavior.zoom()

30. Performance
const throttleDigest =
_.throttle($scope.$digest.bind($scope), 17);
const drag = d3.behavior.drag()
.on(‘drag', () => {
this.item.x += d3.event.dx;
this.item.y += d3.event.dy;
throttleDigest ();
});
d3.select($element[0]).call(drag);

31. Performance
Throttling
Use one time binding when possible
Change data & attributes directly - no digest
Individual digests using events
Fallback to using pure D3

32. LAYOUTS

33. Examples
http://bl.ocks.org/mbostock/4062045
http://bl.ocks.org/mbostock/4063530
http://bl.ocks.org/mbostock/7607999
http://bl.ocks.org/mbostock/4339083

34. D3 force layout + Angular
const force = d3.layout.force()
.charge(-60)
.gravity(0.02)
.linkStrength(0.1)
.linkDistance(260)
.size([450,450])
.nodes(this.nodes)
.links(this.links)
.start();
force.on("tick", () => {
$scope.$digest();
});
Define
layout

35. const force = d3.layout.force()
.charge(-60)
.gravity(0.02)
.linkStrength(0.1)
.linkDistance(260)
.size([450,450])
.nodes(this.nodes)
.links(this.links)
.start();
force.on("tick", () => {
$scope.$digest();
});
Bind layout to data
D3 force layout + Angular

36. Template using force layout
<circle
ng-repeat=“item in nodes"
ng-attr-cx="{{ item.x }}"
ng-attr-cy="{{ item.y }}">
</circle>
Bind data to
markup

37. SCALES

38. Scales
Translate from values to pixels and back
Create axis
Linear, Logarithmic, Threshold, etc.

39. Axis
Utility for creating the DOM elements of the Axis

40. SEPARATION
OF CONCERNS

41. D3
use helpers to prepare data to DOM
define behaviours and attach to elements
define layouts and bind to data
Angular
bind data to DOM
create directive to encapsulate components / behaviours / layouts

42. Read our blog:
http://blog.500tech.com
www.slideshare.net/500tech
Adam Klein
adam@500tech.com
github.com/adamkleingit/d3-svg-angular