Directives
for

Enhancing the dynamic behavior of data visualization

Me

Front-end developer @Argela Technologies

AngularJS

What?

Sponsored by Google

Used by

ng-Basics

Hello {{yourName}}!

Ng Todo List

{{remaining()}} of {{todos.length}} remaining [ archive ]
  • {{todo.text}}

D3JS

What?

Used in

D3 Basic

Add chart manually

Add chart with D3

D3 - Force Layout

D3 - Us

When we were young...

MINI MAP APP

Lets develop a mini map application

MAP with D3

Search Place

Drawbacks

Single Map: Ok!

Multiple Maps?

Directives

Attach specified behaviours to DOM elements

Map Directive

Lets play with the parameters!

Multiple Maps

Directive allows me to define my map in single line!

<map-canvas id="canvas2" rotate-yaw="-45" rotate-pitch="0" center-lon="0" center-lat="37" scale="1200"></map-canvas>
<div> map-canvas id="canvas3" rotate-yaw="-30" rotate-pitch="0" center-lon="0" center-lat="45" scale="800"></div>

Map Directive

Summary

Directives allows us to create new DOM elements with specific behavior

D3 functionality is added behind a directive

With D3 you can visualize your data in various types of ways such as charts, maps, etc.

AngularJS will be handy to turn this module to a reusable DOM!

References

More examples about D3: D3 Gallery

Learn D3 Basics: Interactive Data Visualization for the Web

@Lean Pub: D3 Tips and Tricks

@Lean Pub: D3 on AngularJS

https://angularjs.org/

https://d3js.org/

Watch AngularJS conference videos given at https://angularjs.org/

Contact Info

website: www.yaprakayazoglu.com

email: yaprak.ayazoglu@gmail.com

github: ankakusu

twitter: @yaprakaya

Thanks!

Any Questions?

Contact Info

/

#