This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
12. "A collection of tools and best practices working in harmony
to make developing for the web even better"
Allows you to quickly assemble files and folders along with
boilerplate code.
Uses grunt for all of its tasks
Uses Bower for all of the project dependencies
Via the use of generators one can scaffold projects very
quickly
13. Grunt
Takes care of minification, compilation (sass, coffeescript), unit
testing etc
Automation
18. Lets install Yeoman
You will need NodeJS
Make sure you have git installed as well
If you use SASS you will need ruby and compass
Use this link for windows installs (courtesy of Suman Paul)
npm install -g yo
npm install -g generator-webapp
npm install -g generator-angular
19. What is an MVC framework
A pattern for your code that separates interaction and view
Where does it come from? (smalltalk)
How has it evolved in the front end
DOJO Toolkit
JavaScript MVC
Backbone.js - Jeremy Ashkenas
Spine.js
Knockout.js MVVM
Ember.js - Yehuda Katz & Tom Dale
AngularJS - Misko Hevery
22. You can still create a mess
with angular...
The key is to learn and understand what Angular is doing to
avoid making a mess
23. Who contributes to Angular?
Google
Misko Hevery
Igor Minar
Vojta Jina
Matias Niemela
Brian Ford
24. The key in angular is always
think about the data, not the
DOM, the DOM will take care of
its self so long as it is data
binded with the corresponding
$scope of a given controller
26. Core concpets of angular
Your main app module
'use strict';
angular.module('App', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
27. Core concepts of angular
Router
A router allows you to glue a controller to a view, creates a
scope underneath that controller and maintains state within the
app.
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/directory', {
templateUrl: 'views/directory.html',
controller: 'DirectoryCtrl'
})
.otherwise({
redirectTo: '/'
});
28. Core concepts of angular
Controller
Instantiation of a new controller object along with its child
scope
'use strict';
angular.module('App')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
29. Core concepts of angular
View
ng-view
Templates that interpolate scope objects that are part of a
given controller or are inherited prototypically.
<div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
</ul>
<p>installed.</p>
<h3>Enjoy coding! - Yeoman</h3>
</div>
30. Core concepts of angular
$scope
Keeps your logic contained to that controller unless you are
using $rootScope
$scope will allow you to interpolate its properties in a given
view
$scope.hello = "world"
<div ng-bind="hello">...</div>
<div>{{hello}}... </div>
What gets rendered in the ... ?
32. Core concepts of angular
Services
Something that spans multiple controllers and doesn't have a
view tied to it.
'use strict';
angular.module('App')
.service('Welcoming', function Calculations() {
return{
sayHello: function(){ return 'hello' },
sayGoodbye: function(){ return 'goodbye' }
}
});
33. Core concepts of angular
Constants
Maintained across the entire application. Can be injected as a
service. Use this for constants within your application.
'use strict';
angular.module('App')
.constant('Pi', 3.141516);
34. Core concepts of angular
Custom Directives
UI components, charts, visualization... anything that has
specific html conversion and needs to be part of the given
scope.
'use strict';
angular.module('App')
.directive('chart', function () {
return {
restrict: 'E',
controller: function($scope, $element){ ... },
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});
35. Goodies of Angular and
Yeoman
Karma test runner
ngMin for minification / concatenation
Live reload
...
36. Lets make an Angular app
If you have Yeoman installed follow the presenter
If you do not have Yeoman installed please clone this repo
37. What is the canvas?
<canvas> "magic" </canvas>
Used to draw graphics, on the fly, via scripting (usually
JavaScript)
Upon clicking you need to find X and Y and compare to
elements inside of canvas
Can be super charged for webGL (context 3d)
If you need a lot of things in your visualization use Canvas
for it will not kill the DOM
Raster
39. What is SVG?
Scalable Vector Graphics, vector image format for 2
dimensional graphics
It is part of the DOM, can be styled using css
Because its part of the DOM one can attach events to it via
JavaScript
Vectors can be scaled and because of that they will look
beautifully on retina displays
Ability to use images as SVG format and even fonts
41. Why choose D3.js
Full power and control over every single vector drawn
Extremely easy to data bind
Extremely easy to bind events
Its vectors so its works beautifully on all displays
Huge support from community
43. Who's behind D3.js
Mike Bostock
Jason Davies
many others
"I suggest keeping an eye on the work of
Bret Victor and Mike Bostock. Both are
cutting edge. Bret Victor visualises
programming, sees and thinks beautifully,
just starting to blossom (see
worrydream.com). Mike Bostock (see
bost.ocks.org) developed the open-source
D3, Data-Driven Documents (d3js.org)."
Edward Tufte
44. Structure of a D3 visualization
Include the library
svg container <svg> "magic" <svg>
Create your scales using the right domain and range
Some boiler plate for your svg container
Create SVG items
Data bind the SVG item attributes
Enter, update, exit
46. Things to know about when
using D3
SVG (elements & attributes)
Scales (linear, log, exp, ordinal, ... )
Utility functions (max, min, extent, ...)
Boilerplate process
49. Code for maps
var width = 960,
height = 500;
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var mapContainer = d3.select("#usaMap").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/data/output.json", function(error, us) {
mapContainer.insert("path", ".graticule")
.datum(topojson.feature(us, us.objects.roads))
.attr("class", "land")
50. Lets create our final repo!
Create an angular application using Yeoman
That app should have two routes, main and aboutUs, create
them using the generator
Include d3 using bower
Insert the d3 code into a directive
Insert the directive into the aboutUs route