D3 svg & angular
-
Upload
500tech -
Category
Art & Photos
-
view
790 -
download
0
Transcript of D3 svg & angular
![Page 1: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/1.jpg)
Adam Klein
- 500Tech - Frontend Experts - Passionate developer & speaker - I used to have a jewfro
CTO @
D3, SVG & ANGULAR
![Page 2: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/2.jpg)
SVG BASICS
![Page 3: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/3.jpg)
VISUALIZATIONS
![Page 4: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/4.jpg)
Existing Solution?
![Page 5: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/5.jpg)
Pure SVG & Angular
![Page 6: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/6.jpg)
![Page 7: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/7.jpg)
![Page 8: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/8.jpg)
D3
![Page 9: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/9.jpg)
D3 + Angular?
![Page 10: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/10.jpg)
D3 PATH GENERATORS
![Page 11: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/11.jpg)
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.135254915624213,8.816778784387099A15,15 0 0,0 12.135254915624213,8.816778784387097Z"></path>
![Page 12: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/12.jpg)
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());
![Page 13: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/13.jpg)
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>
![Page 14: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/14.jpg)
Custom Angular component
<arc stroke="yellow" fill="yellow" thickness="2" radius="17" start-angle="0.7" end-angle=“1.3"> </arc>
![Page 15: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/15.jpg)
ng-attr-*
<path ng-attr-d={{ $ctrl.arc() }}></path>
![Page 16: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/16.jpg)
custom component
{ templateNamespace: 'svg', replace: true }
![Page 17: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/17.jpg)
Single root
<g> <text>Hello</text> <text>World</text> </g>
![Page 18: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/18.jpg)
D3 BEHAVIOURS
![Page 19: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/19.jpg)
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);
![Page 20: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/20.jpg)
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);
![Page 21: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/21.jpg)
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
![Page 22: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/22.jpg)
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
![Page 23: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/23.jpg)
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);
![Page 24: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/24.jpg)
d3 drag + angular
<circle ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle>
![Page 25: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/25.jpg)
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
![Page 26: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/26.jpg)
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
![Page 27: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/27.jpg)
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
![Page 28: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/28.jpg)
generic draggable directive
<circle draggable="item" ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle>
![Page 29: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/29.jpg)
zoom-pan
d3.behavior.zoom()
![Page 30: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/30.jpg)
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);
![Page 31: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/31.jpg)
PerformanceThrottling
Use one time binding when possible
Change data & attributes directly - no digest
Individual digests using events
Fallback to using pure D3
![Page 32: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/32.jpg)
LAYOUTS
![Page 33: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/33.jpg)
Examples
http://bl.ocks.org/mbostock/4062045http://bl.ocks.org/mbostock/4063530http://bl.ocks.org/mbostock/7607999http://bl.ocks.org/mbostock/4339083
![Page 34: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/34.jpg)
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
![Page 35: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/35.jpg)
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
![Page 36: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/36.jpg)
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
![Page 37: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/37.jpg)
SCALES
![Page 38: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/38.jpg)
ScalesTranslate from values to pixels and back
Create axis
Linear, Logarithmic, Threshold, etc.
![Page 39: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/39.jpg)
AxisUtility for creating the DOM elements of the Axis
![Page 40: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/40.jpg)
SEPARATION OF CONCERNS
![Page 41: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/41.jpg)
D3use helpers to prepare data to DOM
define behaviours and attach to elements
define layouts and bind to data
Angularbind data to DOM
create directive to encapsulate components / behaviours / layouts
![Page 42: D3 svg & angular](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a5cd760da3da068b494a/html5/thumbnails/42.jpg)
Read our blog:http://blog.500tech.com
www.slideshare.net/500tech
Adam [email protected]
github.com/adamkleingit/d3-svg-angular