Download - D3.JS Desktop & Mobile
D3.Js Desktop & Mobile
Presented By: Mohamed TAIEB
@taiebmd
Kit de développement
1. Kit de développement
NVD3.Js(D3.Js) + Angular-nvd3-Directives
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
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
Android SDK & ADB Tools XCode
1. Kit de développement / Run Hybride Application
● Lancer l’applicationo iOs
$ ionic build ios
$ ionic run ios
o Android$ ionic build android
$ ionic run android
Demo
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 chartso Annotations on the charto Combination of chartso Data labelso Dynamic chartso Interactive (responds to mouse hover/click)
1. Kit de développement / NVD3 vs D3
http://jsperf.com/d3-pie-vs-nvd3-pie
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 chartso Annotations on the charto Combination of chartso Data labelso Dynamic charts (Two-way Data binding d’AngularJs)o Interactive (responds to mouse hover/click)
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
Samples
2. Exemples / Nvd3-pie-chart
<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>
● Templates/pie.html
$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;};}
● Controllers/PieCtrl.js
Turn it on Mobile
Alternative Solution
3. Solutions alternatives / JQuery & XCharts
XCharts(D3.js)
Demo: Olympichttps://github.com/ccoenraets/olympic-dashboard-d3
Questions?
Merci
D3.Js @taiebmd