AngularJS Directives for D3

Enhancing the dynamic behavior of data visualization

By Yaprak Ayazoğlu Yazıcı

About Me

  • Works at Argela Technologies in Turk Telekom Group
  • Front end developer
  • Develops user interface for a network management system

Outline

  • Mini Map Application with D3JS & AngularJS using Google Places API
  • Notes About AngularJS
  • Notes About D3JS

Mini Map Application

  • Map is rendered via D3: Simply SVG path
  • A proper AngularJS directive is developed for a reusable map object
  • All map interaction is handled in this directive
  • Pure new scopes are created for each map object
  • Only needed variables are passed to the scope of map object

Notes About AngularJS

  • What is AngularJS?
  • Important features: Data binding, MVC, Dependency Injection, Directives
  • How AngularJS made it easy for me to build Mini Map App?

Notes About D3JS

  • What is D3JS?
  • About the learning curve of D3JS
  • Building blocks: Setup, Select, Data, Enter, Append
Made with Slides.com