Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

D3 svg & angular

1,540 views

Published on

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

Published in: Art & Photos
  • Be the first to comment

D3 svg & angular

  1. 1. Adam Klein - 500Tech - Frontend Experts - Passionate developer & speaker - I used to have a jewfro CTO @ D3, SVG & ANGULAR
  2. 2. SVG BASICS
  3. 3. VISUALIZATIONS
  4. 4. Existing Solution?
  5. 5. Pure SVG & Angular
  6. 6. D3
  7. 7. D3 + Angular?
  8. 8. D3 PATH GENERATORS
  9. 9. 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>
  10. 10. 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());
  11. 11. 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>
  12. 12. Custom Angular component <arc stroke="yellow" fill="yellow" thickness="2" radius="17" start-angle="0.7" end-angle=“1.3"> </arc>
  13. 13. ng-attr-* <path ng-attr-d={{ $ctrl.arc() }}></path>
  14. 14. custom component { templateNamespace: 'svg', replace: true }
  15. 15. Single root <g> <text>Hello</text> <text>World</text> </g>
  16. 16. D3 BEHAVIOURS
  17. 17. 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);
  18. 18. 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);
  19. 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); Create elements and bind to data
  20. 20. 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
  21. 21. 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);
  22. 22. d3 drag + angular <circle ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle>
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. generic draggable directive <circle draggable="item" ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle>
  27. 27. zoom-pan d3.behavior.zoom()
  28. 28. 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);
  29. 29. Performance Throttling Use one time binding when possible Change data & attributes directly - no digest Individual digests using events Fallback to using pure D3
  30. 30. LAYOUTS
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. SCALES
  36. 36. Scales Translate from values to pixels and back Create axis Linear, Logarithmic, Threshold, etc.
  37. 37. Axis Utility for creating the DOM elements of the Axis
  38. 38. SEPARATION OF CONCERNS
  39. 39. 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
  40. 40. Read our blog: http://blog.500tech.com www.slideshare.net/500tech Adam Klein adam@500tech.com github.com/adamkleingit/d3-svg-angular

×