D3.JS Desktop & Mobile

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

description

Application hybride (Desktop, Mobile et tablette) basé sur D3.JS, ionic et Jquery

Transcript of D3.JS Desktop & Mobile

Page 1: D3.JS Desktop & Mobile

D3.Js Desktop & Mobile

Presented By: Mohamed TAIEB

@taiebmd

Page 2: D3.JS Desktop & Mobile

Kit de développement

Page 3: D3.JS Desktop & Mobile

1. Kit de développement

NVD3.Js(D3.Js) + Angular-nvd3-Directives

Page 4: D3.JS Desktop & Mobile

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

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

Android SDK & ADB Tools XCode

Page 7: D3.JS Desktop & Mobile

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

Demo

Page 9: D3.JS Desktop & Mobile

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

1. Kit de développement / NVD3 vs D3

http://jsperf.com/d3-pie-vs-nvd3-pie

Page 11: D3.JS Desktop & Mobile

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

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

Samples

Page 14: D3.JS Desktop & Mobile

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

Turn it on Mobile

Page 16: D3.JS Desktop & Mobile

Alternative Solution

Page 17: D3.JS Desktop & Mobile

3. Solutions alternatives / JQuery & XCharts

XCharts(D3.js)

Page 18: D3.JS Desktop & Mobile

Demo: Olympichttps://github.com/ccoenraets/olympic-dashboard-d3

Page 19: D3.JS Desktop & Mobile

Questions?

Merci

D3.Js @taiebmd