Storytelling with your data

Slides: bit.ly/ng2-data-stories

@AysegulYonet

Google Developer Expert

A360 Autodesk

Why?

Our Toolbox

Angular 2.0

Angular.io

Whats New

2 years and ~5,625 commits
Organized into smaller modules
Speed and Performance improvements
Angular-Cli, RxJs, CodeAnalyzer, TypeScript
Material Design Alpha

D3.JS

By Mike Bostock

What's New

12+ months and ~4,878 commits
D3 Reorganized into smaller modules
Cool new functionality
Changes

d3js.org

Migration

”d3.min.js” => ”d3.v4.min.js”
”angularjs.min.js” => ”angular.min.js”

Selection


var p = d3.select("body").append('p').data([42, 34, 54, 65, 75]);
p.text(function(d){ return 'hello ' + d;})

Fiddle

Selection


var p = d3.select("body").append('p').data([42, 34, 54, 65, 75]);
p.enter().append()
	.text(function(d){ return 'hello ' + d;})

Fiddle

Selection



	var els = d3.select("body")
    .selectAll("p")
    .data(data, function(d) { return d; });// UPDATE

  var updating = els.style("color", "red");

  var entering = els.enter().append("p")// ENTER
    .text(String)
    .style("color", "blue")

  var exiting = els.exit().style("color", "lightgrey");//EXIT

  var merged = els.merge(entering)// ENTER + UPDATE
    .style("color", "green");

Fiddle

Transition


var exiting = els.exit()
  	.transition()
    .duration(750)
    .ease(d3.easeLinear)
  	.style("color", "lightgrey");//EXIT

Fiddle

Scales


x = d3.scaleLinear()
    .range([0, width])

Scales


x = d3.scaleLinear()
	.range([0, width])
	.domain([0, 100]);

Fiddle

Axis


var xAxis = d3.axisBottom(x).ticks(12);

Axis


var xAxis = d3.axisBottom(x).ticks(12);
svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

Steps

Build svg
Populate data
Draw axis


render() {
	setup();
	populate();
}

Setup


function setUp() {
	var margin = {top: 20, right: 20,bottom: 30,left: 50};
	width = 800 - margin.left - margin.right,
		height = 400 - margin.top - margin.bottom;

	var x = d3.scaleLinear()
		.range([0, width]);

	var y = d3.scaleLinear()
		.range([height, 0]);
}

Demo

Angular 2

Component
NgModules
TypeScript

Getting Started


npm install --global angular-cli
ng new myAppName
ng serve

Getting Started


ng g module myModule
ng g component myComponent
ng g service myService

Getting Started


ng g module myModule
ng g component myComponent
ng g service myService


ng build

Component


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.sass']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Component


import { Component, OnInit, Input } from '@angular/core';

@Component({
	selector: 'app-test',
	templateUrl: './test.component.html',
	styleUrls: ['./test.component.sass']
})
export class TestComponent implements OnInit {
	@Input() data: any;
	constructor() { }

	ngOnInit() {
	}

}

Component


import { Component, OnInit, Output, Input } from '@angular/core';

@Component({
	selector: 'app-test',
	templateUrl: './test.component.html',
	styleUrls: ['./test.component.sass']
})
export class TestComponent implements OnInit {
	@Input() data: any;
	@Output() myEvent = new EventEmitter();
	constructor() { }

	ngOnInit() {
	}
}

Component


@Component({
	selector: 'app-test',
	animations: [
	trigger('buttonState', [
	  state('inactive', style({
	    backgroundColor: '#eee',
	    transform: 'scale(1)'
	  })),
	  state('active',   style({
	    backgroundColor: '#cfd8dc',
	    transform: 'scale(1.1)'
	  })),
	  transition('inactive => active', animate('100ms ease-in')),
	  transition('active => inactive', animate('100ms ease-out'))
    ])
	]
})
export class TestComponent implements OnInit {
	...
}

Fun D3 Examples

Angular Resources

Angular 2.0 D3 Charts

Much more

THE END

Thank you for you attention!

- @AysegulYonet
- Code - Slides