DataVis

Tutoriaux javascript pour la visualisation de données

Derniers ajouts


D3JS


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.

Présentation

Utilité & Fonctionnement de D3JS

Premiers Pas

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

Carte interactive

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

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

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

Histogramme (Bar Chart)

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

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

Lignes (Linear Chart)

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

Carte choroplèthe (non linéaire)

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

Bulles (Bubble Chart)

Comment réaliser une visualisation sous forme de bulle

Tooltip

Ajouter un tooltip professionel à une visualisation avec JQuery

Treemap

Composition de différentes huiles alimentaires (tooltip, transition...)

Animation & Transition

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

Lignes avancées (LineChart)

Tooltip directement en SVG, dégradé sous la courbe, point de suivi des valeurs...

Projection orthographique

Projection orthographique et rotation avec la souris ou le doigt

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 - Première Carte

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

Google Maps - Gestion des markers

Ajout d'un marker personnalisé sur une carte

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 - Première Carte

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

Leaflet - Groupement de markers

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

Leaflet - Heat Map

Carte des tremblements de terre depuis 1900

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

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

Tremblements de terre depuis 1900

Animation et transition (D3JS & jquery)

Nombres Premiers

Visualisation des nombres premiers (D3JS & Canvas)

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 ?

Liste des aéroports français

Leaflet & D3JS & Voronoi

Simulation de crue à Paris

Google Elevation API, Leaflet et D3JS