Construire rapidement des graphiques dynamiques sur D3 avec Plottable.js

Le libre Bibliothèque D3.js est juste un des nombreux qui vous permet créer des graphiques interactifs sur la page. Alors que D3 est peut-être le plus populaire du groupe, apprendre à l'utiliser n'est pas une tâche facile.

C'est pourquoi Plottable.js est une telle bibliothèque précieuse. C'est un projet open-source gratuit construit sur D3.js, ce qui rend plus facile pour quiconque de créer graphiques de données interactifs à partir de zéro.

Cette bibliothèque gère tout le sale boulot, afin que vous puissiez vous concentrer sur les détails tels que les données. Tracable génère le bon code pour la taille et la position de tout graphique que vous choisissez.

Chaque tableau a sa propre composante dans Plotable où vous pouvez copier / coller le code du modèle pour reconstruire le graphique vous-même. A ce jour, vous pouvez choisir parmi 10 styles de graphe, y compris les graphiques à barres, les camemberts, les diagrammes de dispersion et les diagrammes de surface.

Vous pouvez reconstruire les composants individuellement et personnaliser dynamiquement leurs réglages. De cette façon, vous pouvez facilement modifier les éléments interactifs, les couleurs, les animations, les positionnements, les tailles et tout ce dont vous avez besoin..

le bibliothèque complète est disponible sur GitHub si vous voulez parcourir le code source et télécharger une copie.

Mais, la meilleure façon d'apprendre est par l'exemple. C’est pourquoi vous devriez jeter un coup d’œil à leur exemples de graphiques en cours d'exécution pour voir comment ça marche en action.

Chaque graphique est entièrement interactif, avec le code source pour démarrer. Si vous voulez reconstruire un graphique similaire, copiez / collez simplement le code JS et reformatez-le si nécessaire.

J'ai deux favoris personnels de leur site: le Calendrier carte thermique calqué sur le tableau d’activités de GitHub et le Graphiques Synchronisés avec fonctions de sélection dynamiques.

Si vous n'avez jamais utilisé D3.js auparavant, vous aurez du mal à apprendre cette bibliothèque. Surtout parce que c'est écrit en TypeScript, alors vous voudrez probablement prendre cela aussi. Le code final est compilé en JavaScript ES5, il devrait donc fonctionne dans tous les principaux navigateurs.

Si vous êtes prêt à plonger, jetez un oeil à leur Page de tutoriels plein de ressources pratiques. Vous apprendrez tout ce dont vous avez besoin pour commencer à utiliser Plottable et créer des graphiques dynamiques sur le Web à partir de rien.