D3.JS Desktop & Mobile

download D3.JS Desktop & Mobile

of 19

  • date post

    27-Jun-2015
  • Category

    Mobile

  • view

    938
  • download

    1

Embed Size (px)

description

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

Transcript of D3.JS Desktop & Mobile

  • 1. D3.Js Desktop & MobilePresented By: Mohamed TAIEB@taiebmd

2. Kit de dveloppement 3. 1. Kit de dveloppementNVD3.Js(D3.Js) + Angular-nvd3-Directives 4. 1. Kit de dveloppement / Ionic Framework Front-End pour le dveloppement Mobile hybride en HTML5 Bas sur AngularJs avec Zro utilisation de JQuery. Bas sur Cordova pour la compilation dapplications en iOs, Android, Se base lacclration matrielle pour les transitions & les animationstransform: translateZ(0);transform: translate3d(0,0,0);perspective: 1000; backface-visibility: hidden;v1.0.0-beta.13 5. 1. Kit de dveloppement / Installation & configurationcxcxc Installation du gnrateur YeoMan dionic$ npm install -g generator-ionic Crer le dossier du projet$ mkdir dashboard && cd $_ Utiliser le gnrateur YeoMan$ yo ionicSuivre les instructions dinstallation$ 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 dveloppement / Run Hybride Application Lancer lapplicationo iOs$ ionic build ios$ ionic run ioso Android$ ionic build android$ ionic run android 8. Demo 9. 1. Kit de dveloppement / 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) 10. 1. Kit de dveloppement / NVD3 vs D3http://jsperf.com/d3-pie-vs-nvd3-pie 11. 1. Kit de dveloppement / 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 dAngularJs)o Interactive (responds to mouse hover/click) 12. 1. Kit de dveloppement / 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

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 & XChartsXCharts(D3.js) 18. Demo: Olympichttps://github.com/ccoenraets/olympic-dashboard-d3 19. MerciQuestions?D3.Js @taiebmd