Tutoriaux javascript pour la visualisation de données
Construction d'un diagramme empilé, tooltip en SVG, moyenne mobile et gestion de la souris avancée
Utilisation d'une couche de données geoJSON pour construire une carte choroplèthe avec informations dynamiques et légende des couleurs utilisées
Construire rapidement un dashboard, utiliser la fonctionnalité flyTo de Leaflet, adoucir les courbes avec D3JS, résoudre les problèmes CORS, le tout sans utiliser d'autres libraries
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.
Utilité & Fonctionnement de D3JS
Les formes de base, le style et le chargement de données
Comment créer une carte à partir de données géographiques et ajouter un tooltip interactif
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
Comment réaliser un histogramme et lui associer une légende
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
Comment étendre l'exemple précédent en ajoutant une nouvelle ligne et une légende indépendante
Comment réaliser une carte choroplèthe avec une échelle non linéaire
Comment réaliser une visualisation sous forme de bulle
Ajouter un tooltip professionel à une visualisation avec JQuery
Tout ce que vous avez toujours voulu savoir sur l'animation avec D3JS
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...
Projection orthographique et rotation avec la souris ou le doigt
Comment migrer son site vers la dernière version de D3JS
Comprendre les nuances de couleurs, construire une légende agréable et être pertinent dans une cartographie
Construire et paramétrer un nuage de mots avec la librairie d3-cloud de Jason Davis
Construire une représentation dynamique de l'activité moyenne horaire sur une semaine
Construire une carte choroplèthe dont les polygones sont aussi précis qu'on le souhaite grâce à la librairie hexbin
Construction d'un graphique hiérarchique de type Sunburst, variation d'une couleur en HSL et utilisation de patterns SVG
Construire un diagramme empilé avec tooltip en SVG, moyenne mobile et gestion de la souris avancée
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.
Récupération de l'API et création d'une carte centrée sur Paris
Ajout d'un marker personnalisé sur une carte
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
Ajout de 900 markers à une carte, groupement en fonction du niveau de zoom (cluster) et personnalisation des markers
Carte des tremblements de terre depuis 1900
Utilisation de la classe L.control pour créer une carte interactive
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 entrant dans chaque station du métro parisien (Leaflet & D3JS)
Animation et transition (D3JS & jquery)
Visualisation des nombres premiers (D3JS & Canvas)
Comment réprésenter 34 millions de points sur une carte et la mettre à disposition sur Internet ?
Leaflet & D3JS & Voronoi
Google Elevation API, Leaflet et D3JS
Parcourir toutes les communes d'un département en empruntant le plus court chemin avec l'algorithme 2-OPT
Construire rapidement un dashboard, utiliser la fonctionnalité flyTo de Leaflet, résoudre les problèmes CORS, le tout sans utiliser d'autres libraries
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...).
Comment réduire le temps de chargement d'une carte au format GeoJSON et comment la rendre plus performante en fonction du besoin
Comment perdre du temps avec des données de mauvaises qualités bien qu'elles proviennent de sources sûres
Comment combiner les langages R et javascript pour obtenir des données adaptées à une visualisation