DataVis

Tutoriaux javascript pour la visualisation de données

Derniers ajouts


D3JS (version 5.x)


Une librarie graphique permettant de construire des SVG très professionnels. Principalement basée sur des notions mathématiques, elle peut être un peu difficile à appréhender au début. Mais une fois les principes compris, on obtient très vite et en très peu de lignes de superbes résultats.

D3JS - Présentation, utilité et fonctionnement

Présentation

Utilité & Fonctionnement de D3JS

D3JS - Premier pas avec la librairie

Premiers Pas

Les formes de base, le style et le chargement de données

D3JS - Création d'une carte à partir d'un fichier geoJSON

Carte interactive

Comment créer une carte à partir de données géographiques et ajouter un tooltip interactif

D3JS - Création d'une carte choroplèthe

Carte choroplèthe

Comment créer une carte dont les régions sont colorées en fonction de données statistiques et ajouter une échelle. Comment utiliser un jeu de couleurs pertinant et le rendre dynamique

D3JS - Création d'un histogramme (Bar Chart)

Histogramme (Bar Chart)

Comment réaliser un histogramme et lui associer une légende

D3JS - Création d'une courbe de données (Linear Chart)

Ligne (Linear Chart)

Comment réaliser une ligne reprenant un cours de bourse et lui associer une légende, une grille, un tooltip et un curseur vertical permettant de suivre la valeur correspondant à la position de la souris

D3JS - Création de deux courbes sur un même graphique

Lignes (Linear Chart)

Comment étendre l'exemple précédent en ajoutant une nouvelle ligne et une légende indépendante

D3JS - Création d'une carte choroplèthe non linéaire

Carte choroplèthe (non linéaire)

Comment réaliser une carte choroplèthe avec une échelle non linéaire

D3JS - Création d'un graphique à bulle (Bubble Chart)

Bulles (Bubble Chart)

Comment réaliser une visualisation sous forme de bulle

D3JS - Création d'un tooltip réutilisable avec JQuery

Tooltip

Ajouter un tooltip professionel à une visualisation avec JQuery

D3JS - Animer vos visualisation pour les rendre plus attractives

Animation & Transition

Tout ce que vous avez toujours voulu savoir sur l'animation avec D3JS

D3JS - Création d'une courbe de données élégante

Lignes avancées (Linear Chart)

Création d'un tooltip directement en SVG, ajout d'un dégradé sous la courbe grâce à l'utilisation d'un gradiant, point de suivi des valeurs fluide...

D3JS - Utilisation de la projection orthographique pour une carte

Projection orthographique

Projection orthographique et rotation avec la souris ou le doigt

D3JS - Migration de vos scripts vers la version 4

Migration vers la version 4

Comment migrer son site vers la dernière version de D3JS

D3JS - Carte choroplèthe avancée

Carte choroplèthe avancée

Comprendre les nuances de couleurs, construire une légende agréable et être pertinent dans une cartographie

MAPS


Dans cette section nous étudierons les différentes libriaries de construction de cartes que sont Google Map API et Leaflet, toutes les deux faciles à mettre en place sur un site web. Nous verrons comment créer une carte, la configurer, ajouter des markers et les paramétrer mais aussi comment optimiser l'affichage en créant des groupes de markers.

Google Maps - Création d'une carte avec l'API Google

Google Maps - Première Carte

Récupération de l'API et création d'une carte centrée sur Paris

Google Maps - Création de markers personnalisés

Google Maps - Gestion des markers

Ajout d'un marker personnalisé sur une carte

Google Maps - Création de clusters avancée

Google Maps - Groupement de markers

Ajout de 900 markers à une carte, groupement en fonction du niveau de zoom (cluster), gestion de la superposition de markers (spiderfier) et auto-boxing de la carte

Leaflet Maps - Création d'une carte avec l'API Leaflet

Leaflet - Première Carte

Récupération de l'API et création d'une carte centrée sur Paris

Leaflet Maps - Regroupement de données avec des clusters

Leaflet - Groupement de markers

Ajout de 900 markers à une carte, groupement en fonction du niveau de zoom (cluster) et personnalisation des markers

Leaflet Maps - Création d'une carte de chaleur (heatmap)

Leaflet - Heat Map

Carte des tremblements de terre depuis 1900

Leaflet Maps - Création d'une carte interactive (L.control)

Leaflet - Control

Utilisation de la classe L.control pour créer une carte interactive

PLAYING


Ici, nous verrons comment les différents frameworks que sont D3JS, Google Maps ou Leaflet peuvent se mixer pour fournir des informations riches, fonctionnelles et élégantes (dans la mesure de nos compétences). Ces démonstrations sont moins détaillées que les tutoriaux dédiés à des technologies précises. Nous expliquons comment nous avons construit nos données et fournissons quelques informations techniques sur les éléments importants ou difficiles.

Trafic du métro parisien avec Leaflet et D3JS

Trafic du Métro Parisien

Trafic entrant dans chaque station du métro parisien (Leaflet & D3JS)

Tremblements de terre depuis 1900 dans le monde

Tremblements de terre depuis 1900

Animation et transition (D3JS & jquery)

S'amuser avec les nombres premiers et D3JS

Nombres Premiers

Visualisation des nombres premiers (D3JS & Canvas)

Visualiser la fuite de données d'Ashley Madison

Fuite des données du site Ashley Madison

Comment réprésenter 34 millions de points sur une carte et la mettre à disposition sur Internet ?

Diagramme de Voronoi avec D3JS sur une carte Leaflet

Liste des aéroports français

Leaflet & D3JS & Voronoi

La crue du siècle et même au-delà

Simulation de crue à Paris

Google Elevation API, Leaflet et D3JS

Le voyageur de commerce

Le voyageur de commerce

Parcourir toutes les communes d'un département en empruntant le plus court chemin avec l'algorithme 2-OPT

TECH


Dans cette partie nous étudions tous les éléments qui gravitent autour de la visualisation de données : comment bien préparer ses données, savoir reconnaître des données de qualité, nettoyer des données... On en profite aussi pour présenter les différentes APIs que l'on peut utiliser sur Internet (Google, Twitter, IGN...).

Optimisation d'un fichier geoJSON

Carte (Optimisation)

Comment réduire le temps de chargement d'une carte au format GeoJSON et comment la rendre plus performante en fonction du besoin

Perdre du temps avec les données de data.gouv.fr et La Poste

De l'importance de vérifier ses données

Comment perdre du temps avec des données de mauvaises qualités bien qu'elles proviennent de sources sûres