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

Data visualisation Data visualisation: animer des données en HTML5

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

Objectifs

→ Réviser les bases de CSS, JavaScript et jQuery
→ Préparer ses fichiers SVG pour la data visualisation et les animer en CSS3
→ Créer des graphiques paramétrables et interactifs
→ Développer des cartes avec D3.js

Public concerné

Webdesigners expérimentés, intégrateurs, développeurs, chefs de projets Web, cartographes…

Pré-requis

Il est indispensable de maîtriser le HTML et les CSS et d’avoir des notions de jQuery (notions de variables, sélecteur, boucles, opérateurs) pour suivre cette formation. Avoir suivi la formation Data visualisation facilitera également l’accès à cette formation.

Programme

Réviser les bases de 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 pour appréhender les frameworks : opérateurs, fonctions, variables, événements

 

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

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

  • Créer, modifier et optimiser un fichier SVG dans Illustrator et / ou Inkscape
  • Découvrir les balises SVG et leurs attributs
  • Choisir les différentes méthodes d’intégration d’un fichier SVG dans une page : balise IMG, via CSS, en inline, chargé via JavaScript

 

Exercice : créer une carte animée en SVG et CSS3

Créer des graphiques paramétrables et interactifs

  • Lister et utiliser les librairies JavaScript Flot, jQuery Sparkline, Highchart.js, D3.js…
  • Ajouter des données
  • Modifier les axes et mesures
  • Modifier des couleurs
  • Ajuster les options de la librairie et les styles CSS
  • Afficher des légendes
  • Développer de l’interactivité

 

Exercices : créer et modifier des graphiques de type barres, lignes, infos bulle, timeline, nuage de mots…

Développer des cartes avec D3.js

  • Comparer les différents formats de données : XML, JSON, CSV
  • Charger les données d’une carte avec GeoJSON
  • Charger des informations au format CSV
  • Localiser des points sur la carte en fonction des longitudes et latitudes
  • Coloriser la carte en fonction des données
  • Développer de l’interactivité

 

Exercice : créer une carte avec dégradés relatifs aux densités de la population

Méthodes pédagogiques

Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices. Certaines visualisations, nécessitant trop de temps de codage, sont réalisées à partir de data visualisations existantes et les apprenants sont amenés à optimiser le flux de données ou modifier l’aspect graphique sans avoir à réécrire l’ensemble du code.

Moyens techniquesMoyens spécifiques à cette formation :→ Logiciels : WebStorm, Brackets…

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 formateurInté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: animer des données en HTML5

3 jours 21 heures 4 470 €HT*

* À 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)