D3.JS Desktop & Mobile
-
Upload
mohamed-taieb -
Category
Mobile
-
view
957 -
download
1
description
Transcript of D3.JS Desktop & Mobile
![Page 1: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/1.jpg)
D3.Js Desktop & Mobile
Presented By: Mohamed TAIEB
@taiebmd
![Page 2: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/2.jpg)
Kit de développement
![Page 3: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/3.jpg)
1. Kit de développement
NVD3.Js(D3.Js) + Angular-nvd3-Directives
![Page 4: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/4.jpg)
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
![Page 5: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/5.jpg)
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
![Page 6: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/6.jpg)
Android SDK & ADB Tools XCode
![Page 7: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/7.jpg)
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
![Page 8: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/8.jpg)
Demo
![Page 9: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/9.jpg)
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)
![Page 10: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/10.jpg)
1. Kit de développement / NVD3 vs D3
http://jsperf.com/d3-pie-vs-nvd3-pie
![Page 11: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/11.jpg)
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)
![Page 12: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/12.jpg)
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
![Page 13: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/13.jpg)
Samples
![Page 14: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/14.jpg)
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
![Page 15: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/15.jpg)
Turn it on Mobile
![Page 16: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/16.jpg)
Alternative Solution
![Page 17: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/17.jpg)
3. Solutions alternatives / JQuery & XCharts
XCharts(D3.js)
![Page 18: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/18.jpg)
Demo: Olympichttps://github.com/ccoenraets/olympic-dashboard-d3
![Page 19: D3.JS Desktop & Mobile](https://reader031.fdocuments.fr/reader031/viewer/2022012311/558e4d151a28ab0d318b45d4/html5/thumbnails/19.jpg)
Questions?
Merci
D3.Js @taiebmd