01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Data visualisation Data visualisation en HTML5, CSS3, SVG et avec D3.js

Créer et habiller des datas (graphiques, cartes…)

Icon2018 granule vod Icon2018 module presentiel
ObjectifsRéviser les bases de CSS, JavaScript et jQueryPréparer des fichiers SVG pour la data visualisation et les animer en CSS3Identifier les types de données et les charger dans le DOMCréer des data visualisations avec D3.js
Public concernéWebdesigners expérimentés, intégrateurs, développeurs, chefs de projets Web, cartographes…
Pré-requisIl est indispensable de maîtriser le HTML, les CSS et d’avoir des notions de JavaScript ou de jQuery pour suivre cette formation. Avoir suivi la formation “Data visualisation” (page 81) facilitera également l’accès à cette formation.
Programme

Comparer les sélections dans le DOM via CSS, JavaScript et jQuery

Lier les feuilles de styles CSS et les librairies JavaScript

Comparer les différentes méthodes de sélections d’objets : sélecteurs CSS3, JavaScript, jQuery

Lister les outils essentiels de JavaScript et jQuery : opérateurs, fonctions, variables, objets, propriétés, events, méthodes, arrays

Exercice : créer un graphique interactif simple avec HTML, CSS et jQuery

Préparer des fichiers SVG pour la data visualisation et les animer en CSS3

Découvrir les balises SVG et leurs attributs (rect, circle, line, polygon, path, text…)

Créer, modifier et optimiser un fichier SVG

Choisir les différentes méthodes d’intégration d’un fichier SVG dans une page : balise IMG, via CSS, en inline, loadé via js, sprites SVG inline

Animer des fichiers SVG via CSS3 avec les modules transform, transitions, animations

Exercice : créer une bannière animée en SVG et CSS3

Identifier les types de données et les charger dans le DOM

Identifier les différents formats de données : tabulaires (CSV…), relationnelles, géographiques...

Comparer les loading, affichages, filtres et tris des données externes en JavaScript ou avec D3.js

Modifier les axes et mesures

Exercice : créer un graphique simple avec données CSV

Créer des data visualisations avec D3.js

Découvrir les principes généraux du framework D3.js

Modifier le DOM et le style d’un objet SVG via D3.js

Animer un fichier SVG via D3.js

Identifier les notions de D3.js : array, chaînage, filtre, binding et range

Créer des graphiques en SVG avec des données de tableaux (array) et des données externes (JSON, CSV…)

Créer des dégradés ColorBrewer en fonction des mesures (quantités, surfaces…)

Charger les données d’une carte avec GeoJSON, identifier les différentes projections (Mercator, Albers…) et placer des points sur la carte

Afficher des légendes

Créer des fenêtres modales

Développer des animations et de l’interactivité

Exercice : créer et modifier des graphiques de type barres, lignes, infos bulle, cartes, camemberts, nuages de mots, dendrogrammes…

Méthodes pédagogiquesLogiciels : Illustrator, WebStorm…
Moyens techniquesMoyens spécifiques à cette formation :Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices.

Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Intégrateur CSS / Développeur front-end ayant plus de 10 ans d’expérience en enseignement.

PAO
Publication digitale
Data Visualisation
Voir toutes les formations

Data visualisation en HTML5, CSS3, SVG et avec D3.js

3 jours 21 heures 1 600 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

Data visualisation en HTML5, CSS3, SVG et avec D3.js

3 jours 21 heures 1 490 €HT*


* Prix par jour (à partir de)

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
Stage très utile, il m'a permis d'appréhender de nouveaux outils et plateformes de travail (D3). Très bonnes explications et compétences de la formatrice.
Danielle PA. - Professeur multimédia à l'ISDAT de Toulouse (session du 29 au 31 mars 2017)
Qu'avez-vous préféré pendant ce stage : "la variété des points abordés dans un laps de temps relativement court"
Mickaël A. - Webmaster chez Klesia (session du 10 au 12 octobre 2016)
Qu'avez-vous préféré pendant ce stage : "l'interaction avec la formatrice, ses retours d'expérience sur ses projets dataviz entre autres"
Philippe L. - Graphiqte chez Adit (session du 10 au 12 octobre 2016)