This document discusses using D3.js and Angular-nvd3-directives to create desktop and mobile charts and dashboards. It provides an overview of Ionic, a framework for developing hybrid mobile apps, and how to set it up. Examples are given of creating pie charts using Angular-nvd3-directives. Alternative solutions for mobile charts using jQuery and XCharts are also mentioned.

1. D3.Js Desktop & Mobile
Presented By: Mohamed TAIEB
@taiebmd

2. Kit de développement

3. 1. Kit de développement
NVD3.Js(D3.Js) + Angular-nvd3-Directives

4. 1. Kit de développement / Ionic
● Framework Front-End pour le développement Mobile hybride en HTML5
● Basé sur AngularJs avec Zéro utilisation de JQuery.
● Basé sur Cordova pour la compilation d’applications en iOs, Android, …
● Se base l’accélération matérielle pour les transitions & les animations
transform: translateZ(0);
transform: translate3d(0,0,0);
perspective: 1000; backface-visibility: hidden;
v1.0.0-beta.13

5. 1. Kit de développement / Installation & configuration
cxcxc ● Installation du générateur YeoMan d’ionic
$ npm install -g generator-ionic
● Créer le dossier du projet
$ mkdir dashboard && cd $_
● Utiliser le générateur YeoMan
$ yo ionic
Suivre les instructions d’installation
$ ionic serve
● Ajouter des plates-formes mobiles
$ ionic platform add ios
$ ionic platform add android

6. Android SDK & ADB Tools XCode

7. 1. Kit de développement / Run Hybride Application
● Lancer l’application
o iOs
$ ionic build ios
$ ionic run ios
o Android
$ ionic build android
$ ionic run android

8. Demo

9. 1. Kit de développement / NVD3
● Website: nvd3.com
● Open source: Yes
● Library size (compressed+gzip): 50 KB
● Dependencies: d3.js and Aight for IE8 support - VERY cool but based on D3, no IE8 and prior.
● Graphic technology: SVG
● Supported Charts: Area, Bar, Bubble, Line, Pie, Scatter, Spline, Sparklines, Donut, Node / Edge graph, Bullet chart
● Features:
o Ability to zoom in and out of charts
o Annotations on the chart
o Combination of charts
o Data labels
o Dynamic charts
o Interactive (responds to mouse hover/click)

10. 1. Kit de développement / NVD3 vs D3
http://jsperf.com/d3-pie-vs-nvd3-pie

11. 1. Kit de développement / AngularJs-nvd3-directives
● Website: https://github.com/cmaurer/angularjs-nvd3-directives
● Open source: Yes
● Library size (compressed+gzip): 20 KB
● Dependencies: d3.js, nvd3.js and AngularJs
● Graphic technology: SVG
● Supported Charts: Area, Bar, Bubble, Line, Pie, Scatter, Spline, Sparklines, Donut, Node / Edge graph, Bullet chart
● Features:
o Ability to zoom in and out of charts
o Annotations on the chart
o Combination of charts
o Data labels
o Dynamic charts (Two-way Data binding d’AngularJs)
o Interactive (responds to mouse hover/click)

12. 1. Kit de développement / SetUp Angular-nvd3-directives
● bower install d3 --save
● bower install nvd3 --save
● bower install angularjs-nvd3-
directives --save
● Include Scripts: d3, nvd3, angularjs-nvd3-
directives and nv.d3.css

13. Samples

14. 2. Exemples / Nvd3-pie-chart
● Templates/pie.html
<div ng-controller="PieCtrl">
<nvd3-pie-chart
data="pieData"
id="exampleId"
x="xFunction()"
y="yFunction()"
showLabels="true"
pieLabelsOutside="false"
showValues="true"
labelType="percent">
<svg></svg>
</nvd3-pie-chart>
</div>
● Controllers/PieCtrl.js
$scope.exampleData = [{
key: "One", y: 5
},{
key: "Two", y: 2
}, {
key: "Three", y: 9
}, {
key: "Four", y: 7
}, {
key: "Five", y: 4
}, {
key: "Six", y: 3
}, {
key: "Seven",y: 10
}];
$scope.xFunction = function () {
return function (d) { return d.key; };
}
$scope.yFunction = function () {
return function (d) { return d.y;};
}

15. Turn it on Mobile

16. Alternative Solution

17. 3. Solutions alternatives / JQuery & XCharts
XCharts(D3.js)

18. Demo: Olympic
https://github.com/ccoenraets/olympic-dashboard-d3

19. Merci
Questions?
D3.Js @taiebmd