Datavisualisation en JavaScript

Objectifs

Cette formation vous permet de : Identifer les principes de la visualisation interactive de données dans les pages Web. S'initier à la programmation en JavaScript des graphiques SVG de visualisation de données interactives.

Public

Intégrateurs et développeurs Web.

Durée

14 heures en présentiel sur 2 jours

Pré-requis

Avoir des connaissances sur le langage JavaScript. Connaître le HTML/CSS/SVG.

Formateur

Développeur Web spécialiste JavaScript.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.

Déroulé

Éléments de terminologie

  • Document Object Model (DOM)
  • Bonnes pratiques JavaScript et librairies externes
  • eXtensible Markup Language (XML)
  • Scalable Vector Graphics (SVG)
  • Vector Markup Language (VML)
  • JavaScript Object Notation (JSON)

Principes de la visualisation de données via une page Web

  • Sélectionner et modifier des éléments du DOM
  • Primitives SVG
  • Graphique simple en SVG
  • Graphique simple à partir de données JSON

Datavisualisation avec Raphaël

  • Présentation de Raphaël
  • Installation de raphael.js
  • Méthodes et propriétés
  • Réaliser des courbes
  • Réaliser un histogramme
  • Réaliser un camembert
  • Réaliser un graphique complexe

Datavisualisation avec D3

  • Présentation de D3
  • Installation de d3.js
  • Méthodes et propriétés
  • Réaliser des courbes
  • Réaliser un histogramme
  • Réaliser un camembert
  • Réaliser un graphique complexe

Données dynamiques via AJAX

  • AJAX avec ou sans jQuery
  • Visualisation de données JSON dynamiques