11 frameworks JavaScript pour créer des graphiques
Les frameworks Javascript peuvent remplir une gamme de fonctions. Ici, nous allons examiner quelques bibliothèques qui vous aideront à créer des graphismes époustouflants.
Le navigateur propose plusieurs API et surfaces de dessin très puissantes. Les éléments les plus remarquables sont l'élément canvas et les graphiques vectoriels évolutifs (SVG). Ces deux fonctionnalités sont désormais disponibles dans presque tous les navigateurs de bureau et mobiles, mais les API requises pour les utiliser sont plutôt de bas niveau et le `` bas niveau '' se traduit généralement par beaucoup de code fastidieux et redondant juste pour faire des choses simples.
Étant donné que l'écriture de code fastidieux et redondant n'est pas en tête de la liste des choses que les développeurs aiment généralement faire, même avec le meilleurs éditeurs de code et le meilleurs ordinateurs portables pour la programmation , il existe heureusement plusieurs bibliothèques disponibles pour vous aider avec toutes les exigences de dessin de votre navigateur.
Dans cet article, nous examinerons certaines des options disponibles. Nous explorerons les bibliothèques JavaScript les plus populaires et parlerons de leurs forces et faiblesses. Nous allons également faire un peu de spéléologie dans certains des projets moins connus qui répondent à des besoins de niche très intéressants - le type dont vous ne savez pas avoir besoin tant que vous n'en avez pas besoin. Partir de zéro? Essayez un top Générateur de site Web , et considérez qui hébergement Web le service est fait pour vous.
01. D3.js
D3.js est le grand patron des bibliothèques graphiques JavaScript. Avec plus d'un million de téléchargements hebdomadaires sur au dessus du niveau de la mer , c'est probablement la plus connue et la plus utilisée de toutes les bibliothèques graphiques. Il a même le sien Page Wikipédia . Et, avouons-le, n'est-ce pas quand vous savez que vous avez réussi?
D3 vous permet de créer des visualisations de données de tout type. Il suffit de regarder à travers son page d'exemples pour voir le monde des possibilités. Mieux encore, visitez Shirley Wu's visualisation interactive de chaque ligne de la comédie musicale Hamilton si vous voulez vraiment vous épater.
D3 est un outil complet. Il a sa propre sélection DOM, des capacités AJAX et même un générateur de nombres aléatoires propriétaire. Chaque composant de D3 est son propre module Node qui doit être importé. Par exemple, le module de sélection s'appelle d3-selection. Il existe également des modules pour les tableaux, les formes, les couleurs, le glisser-déposer, le temps et bien plus encore.
La puissance de D3 vient avec le compromis de la complexité. La courbe d'apprentissage peut être raide et le code peut toujours sembler verbeux. Construire quelque chose d'aussi simple qu'un graphique à barres vous oblige à assembler manuellement l'axe, les échelles, les graduations et même à dessiner les rectangles qui représenteront les barres. Les développeurs se plaignent souvent de la compréhension de bas niveau requise pour être efficace avec D3.
Ceci est en grande partie dû au fait que la création de visualisations de données complexes vous oblige à avoir une compréhension de bas niveau de la visualisation que vous souhaitez créer. D3 n'est pas la meilleure option pour les graphiques précuits. Pour cela, il existe plusieurs autres choix qui vous trouveront dans le ' gouffre de succès ' Plus vite.
D3 est capable de rendre sur toile et SVG. Cependant, la vraie magie de D3 réside dans sa capacité à «lier les données» aux graphiques qu'il génère. Pensez à un graphique qui change à mesure que les données entrantes changent. Avec SVG, chaque élément graphique est un élément individuel qui peut être sélectionné et mis à jour. Cela n'est pas possible avec le canevas et, étant donné que D3 consiste essentiellement à alimenter les visualisations de données, SVG est généralement le format de sortie préféré.
02. Chart.js
Chart.js est un projet open source pour créer des graphiques robustes avec JavaScript. La grande différence entre Chart.js et D3 est que même si vous pouvez créer à peu près tout avec D3, Chart.js vous limite à huit types de graphiques prédéfinis: ligne, barre, camembert, polaire, bulle, dispersion, surface et mixte. Bien que cela semble limitatif, c'est ce qui rend Chart.js plus simple à utiliser. Cela est particulièrement vrai pour ceux qui ne sont pas des experts en matière de données, mais qui connaissent un graphique de base.
La syntaxe est entièrement construite autour d'un type de graphique. Vous initialisez un nouveau graphique sur un élément de canevas existant, définissez le type de graphique, puis définissez les options du graphique. Chart.js ne rend que le canevas. Ce n'est pas un problème puisque tous les navigateurs modernes prennent en charge l'élément de canevas HTML, mais cela pourrait être un blocage pour les développeurs qui ont des exigences pour le support SVG.
Cela signifie également que vous êtes limité dans les animations possibles. Hors de la boîte, Chart.js prend en charge toutes les équations d'accélération et les animations sont spécifiées avec un paramètre de propriété. Bien que cela facilite et accélère l'obtention d'un graphique animé, le fait de ne pas avoir d'éléments SVG individuels vous empêche de pouvoir créer des animations complexes à l'aide de transitions et d'animations CSS3.
Contrairement à D3, Chart.js n'est pas modulaire, il suffit donc d'une seule inclusion JavaScript pour obtenir la prise en charge de toutes les fonctions et types de graphiques. Cela facilite le démarrage, mais signifie que vos actifs peuvent être beaucoup plus importants. Cela est particulièrement vrai si vous avez besoin d'axes de temps - Chart.js nécessite alors Moment.js, qui est ~ 51 Ko minifié et compressé. Il est beaucoup plus facile de créer un graphique à barres avec Chart.js qu'avec D3. Cependant, il y a un plafond qui vient avec la simplicité. Vous constaterez peut-être que vous atteignez la limite de ce qu'il fera hors de la boîte. Souvent, les développeurs commencent avec une solution comme Chart.js, puis passent à D3.
Si la simplicité de Chart.js vous plaît, vous aimerez peut-être vraiment l'option suivante: Chartist.
03. Chartiste
Chartiste se veut une bibliothèque de graphiques simple et rationalisée, de petite taille et facile à utiliser. Il est également conçu pour être réactif par défaut. C'est plus important qu'il n'y paraît, car des frameworks comme D3 ne redimensionnent pas automatiquement les graphiques mais obligent le développeur à se lier aux événements et à redessiner les graphiques.
Chartist est également minuscule par rapport à Chart.js. Il ne pèse que 10 Ko sans aucune dépendance. Cela peut être dû au fait qu'il ne propose que trois types de graphiques: ligne, barre et secteur. Il existe des variations au sein de ces types (par exemple, le nuage de points est un type de ligne dans Chartist) mais la petite taille et la facilité de configuration sont contrées par le manque de types de graphiques prêts à l'emploi.
Chartist effectue le rendu en SVG au lieu de canevas, ce qui le rend beaucoup plus personnalisable en termes d'apparence et de convivialité, tout en offrant beaucoup plus de contrôle sur l'interactivité et les animations. Cependant, ne pas avoir accès au rendu à un canevas signifie que vous pourriez avoir plus de mal à effectuer certaines actions. Par exemple, il existe une API pour rendre un canevas à une image (toDataURI). Cette option n'existe pas pour SVG, donc exporter un graphique sous forme d'image s'avérera beaucoup plus délicat. Dans un monde idéal, vous auriez la possibilité d'effectuer le rendu dans les deux modes.
Les graphiques Chartist sont plus faciles à configurer que Chart.js, car il y a moins d'options disponibles. Bien qu'il soit possible d'étendre ces graphiques avec un peu de fonctionnalités, leur accent sur la simplicité signifie qu'ils sont, par définition, simples. Chartist est une excellente solution pour ceux qui ont besoin d'une solution de cartographie de base. Les graphiques sont par nature difficiles à configurer car ils nécessitent une sorte de connaissances sur la façon de configurer les données le long d'un certain axe et de les regrouper de certaines manières. Chartist simplifie au maximum la partie graphique, mais vous pourriez avoir besoin d'une solution plus puissante à mesure que vous vous sentirez plus à l'aise avec la génération de vos graphiques.
Chartist répertorie également la prise en charge des frameworks open-source, y compris React et Angular. Il n'y a aucune mention d'un package Vue sur son site.
04. Britecharts
Britecharts est une bibliothèque de graphiques qui englobe D3. Il a été réalisé par Eventbrite, qui a ensuite ouvert le projet sous la licence permissive Apache V2.
Il offre un ensemble de graphiques très minimaliste mais esthétique. Bien qu'il puisse être assez difficile de créer un graphique à barres avec vanilla D3, l'encapsulation de Britecharts le rend aussi simple que de créer un nouvel objet barChart, puis de définir sa largeur et sa hauteur.
barChart.width(500).height(500);Britecharts prend en charge tous les types de graphiques de base: ligne, barre, anneau, puce, nuage de points, sparkline et pas, ce qui est plus que ceux offerts par des bibliothèques comme Chartist. Il fournit également une info-bulle de base et des fonctionnalités de légende. Les animations pour les graphiques sont intégrées et Eventbrite a fourni de belles couleurs.
En fin de compte, Britecharts est une excellente option pour les fonctionnalités graphiques de base. Les objets de configuration sont assez simples et vous obtenez toujours la puissance de D3 sous les couvertures sans avoir à rien savoir sur D3 lui-même. De nombreux développeurs trouveront cette option plus convaincante que la simple création d'un graphique complet à partir de zéro avec D3.
Il se concentre également sur les aspects de liaison de données de D3, ce qui le rend très utile pour les graphiques qui doivent changer à mesure que les données sous-jacentes changent. Bien que quelque peu restrictif dans les types disponibles, il possède également un type de graphique de base que vous pouvez étendre pour créer vos propres types de graphiques.
05. Types de plongée
Styles de plongée est une autre solution de cartographie qui englobe la complexité de D3 dans une API facile à mettre en œuvre. Il est construit sur les concepts de La grammaire des graphiques , un livre de l'auteur Leland Wilkinson. Il permet de comprendre quand et comment utiliser les visualisations de données pour afficher différents types de données.
Prêt à l'emploi, il comporte des graphiques en courbes, en barres, en nuages de points, en aires et à facettes. Cependant, il implémente les concepts de la grammaire des graphiques dans le «langage Taucharts», qui fournit un cadre dans lequel implémenter vos propres visualisations de données.
Taucharts semble assez convaincant et le fait qu'il soit construit sur D3 en fait une option attrayante et puissante. Il y a cependant le sentiment que le développeur a également besoin de lire The Grammar of Graphics afin de tirer pleinement parti de sa puissance.
Jusqu'à présent, nous n'avons couvert que la cartographie et la visualisation de données. En effet, le dessin de graphiques est le cas d'utilisation le plus courant d'une bibliothèque graphique dans un navigateur. Mais ce n’est en aucun cas le seul. Un autre scénario assez courant pour les graphiques est, bien sûr, l'animation.
06. Two.js
A ne pas confondre avec D3.js, two.js est une bibliothèque JavaScript open-source pour le dessin bidimensionnel sur le Web. Il est également capable de cibler les trois options graphiques dans les navigateurs modernes: SVG, Canvas et WebGL.
Two.js est quelque peu similaire à D3 en ce sens qu'il est strictement axé sur le dessin et ne propose pas de graphiques précuits ni de structures interactives. Cela signifie que, tout comme D3, vous avez besoin d'une compréhension sous-jacente du type de dessin que vous essayez de faire et de la manière d'y parvenir avec les constructions fournies par two.js. Dessiner un cercle est assez simple. Construire une animation détaillée, en revanche, est une entreprise beaucoup plus compliquée. Two.js ne résume que l'ennui du dessin des formes, pas l'ennui du dessin global.
Two.js assure également le suivi de tous les objets que vous créez, vous pouvez donc les référencer et les animer à tout moment. Ceci est particulièrement important si vous développez des jeux et que vous avez des actifs qui doivent être suivis pour des choses comme la détection de collision. Il dispose d'une boucle d'animation intégrée, qui vous évite d'avoir à vous soucier des images d'animation et facilite le lien dans une bibliothèque d'animations telle que GreenSock .
Bien que two.js soit puissant, sa nature de forme libre peut laisser certains développeurs incertains de la façon de commencer et il s'agit davantage d'un outil de niche pour le dessin et l'animation 2D. Une autre excellente option est pts.js.
07. Pts.js
Pts est également une bibliothèque de dessins en deux dimensions. Cependant, il est fondamentalement différent de two.js, car il utilise une méthodologie prédéterminée pour la manière dont les dessins et les animations doivent être assemblés: espace, forme et point. L'analogie que ses développeurs utilisent pour expliquer cela est celle du monde physique. L'espace est du papier. La forme est le crayon. Et le point est votre idée.
En termes de mise en œuvre, l'espace est un élément de canevas. Une fois l'élément canevas créé, vous pouvez y ajouter des joueurs. Il peut s'agir de fonctions ou d'objets. Ces fonctions et objets doivent être conformes à l'interface prédéterminée d'un espace. Pts est construit sur TypeScript, il n'est donc pas nécessaire de deviner ce que sont ces outils, car les outils que vous utilisez suggéreront probablement ceux avec la saisie semi-automatique.
Par exemple, un espace a une fonction de démarrage que vous pouvez spécifier. C'est du code qui est exécuté lorsque l'espace est prêt. Dans ces fonctions, le dessin dans l'espace s'effectue à l'aide de l'objet formulaire. Les objets de formulaire peuvent dessiner n'importe quel type de forme et le point est l'endroit où ces éléments sont situés dans l'espace.
Pts semble être principalement conçu pour créer des visualisations et des animations interactives. Son implémentation est intéressante, quoique assez abstraite. Les développeurs peuvent avoir du mal à comprendre le modèle «espace, forme, point» dont Pts a besoin. C'est un autre obstacle mental qui devra être franchi en plus de celui de simplement dessiner et animer des formes.
08. Anime.js
Anime.js est avant tout une bibliothèque d'animations. Il dispose d'un système d'échelonnement intégré pour simplifier la création d'animations complexes qui se chevauchent ou dépendent de l'occurrence d'une autre exécution. Il est courant que les animations soient chronométrées ensemble ou déclenchées les unes par les autres. Le système échelonné facilite la mise en œuvre, car il permet de soulager une partie des frais généraux liés au suivi de tout ce qui se passe sur la page et à la configuration manuelle des horaires d'animation.
Contrairement aux bibliothèques de dessin couvertes jusqu'à présent, anime.js ne dispose pas d'API pour dessiner des formes. Au lieu de cela, il suppose que vos formes existent déjà et que vous souhaitez les animer. Cela le rend idéal pour une utilisation avec des bibliothèques telles que two.js. Anime.js prend en charge l'animation des propriétés CSS, SVG, DOM et même des objets JavaScript.
Anime.js est une bonne option pour animer des dessins existants et sera probablement combiné avec une autre bibliothèque. Il devrait être considéré comme une alternative à quelque chose comme GreenSock et non comme un remplacement pour d'autres bibliothèques de dessins. Anime.js serait probablement utilisé pour des animations plus complexes qui doivent se produire dans le cadre d'une expérience Web interactive.
09. PixiJS
PixiJS est une autre bibliothèque de dessins 2D. Son objectif principal est de faciliter l'affichage, l'animation et la gestion des graphiques 2D, afin que vous puissiez vous concentrer sur la construction de votre expérience ou de votre jeu sans vous soucier de suivre toutes les formes et images que vous devez dessiner et animer. Si vous créez un jeu, les ressources (ou sprites) peuvent rapidement atteindre un nombre difficile à gérer. (Beaucoup d'actifs à sauvegarder? Conservez-les en toute sécurité dans le stockage en ligne .)
Un aspect convaincant de PixiJS est qu'il provient d'une API qui a été développée et largement utilisée dans Adobe Flash. C'est un énorme avantage pour les développeurs venant d'un arrière-plan Flash, car l'expérience leur semblera familière. Il est également similaire au SpriteKit d'Apple.
PixiJS n'est pas un moteur de jeu, donc si vous l'utilisez pour des jeux, vous ne trouverez aucun outil ou physique pour gérer des choses comme la détection de collision. Vous devrez l'envelopper dans un moteur de jeu réel ou dans celui que vous construisez vous-même, si vous vous sentez intrépide.
PixiJS effectue le rendu sur WebGL. WebGL est un moteur permettant de créer des graphiques accélérés par GPU dans le navigateur. Cela signifie qu'il est utile pour les animations et les graphiques qui utilisent beaucoup de ressources système et qui fonctionnent mieux lorsqu'ils sont rendus par une unité de traitement graphique (GPU) discrète. Il est basé sur OpenGL, qui est l'équivalent de bureau pour exécuter des jeux et des programmes graphiques 3D. Sous le capot, WebGL utilise l'élément HTML canvas.
Les développeurs graphiques sérieux apprécieront la puissance de WebGL. Cependant, ces expériences peuvent être dégradées sur les machines de faible puissance. Alors même que je rédigeais cet article, de nombreuses démos PixiJS ont provoqué un ralentissement notable de mon système, qui ne dispose pas des capacités haut de gamme requises pour des graphiques et des animations complexes.
10. Zdog
La plupart des moteurs de dessin dont nous avons discuté jusqu'à présent sont bidimensionnels. En effet, la plupart des interactions que nous avons avec notre écran se produisent en deux dimensions - le long des axes X et Y. Les dessins et animations en trois dimensions sont généralement beaucoup plus complexes.
Zdog est une bibliothèque pour créer des expériences pseudo-3D qui sont pour la plupart de nature plate. On l'appelle pseudo-3D parce que, bien qu'il conceptualise ses dessins dans l'espace 3D, il les rend sous forme de formes plates. Il utilise des astuces visuelles pour faire apparaître des objets 2D en 3D. L'effet est vraiment intéressant. Il semble complètement en trois dimensions lorsque l'animation est visualisée, mais lorsqu'une capture d'écran est prise, il s'agit clairement d'une image plate. En voici un exemple: la démo tournante de Mario.
Étant donné que les rendus sont 2D, Zdog peut effectuer le rendu en Canvas ou SVG. Zdog est une option fantastique pour les animations 3D sur des objets simples - surtout si ces actifs incorporent des aspects de conception plate. Les développeurs qui veulent une animation 3D mais ne veulent pas s'enliser dans le monde complexe des moteurs graphiques 3D pourraient trouver Zdog une solution adéquate. De plus, en se concentrant sur les images plates, Zdog peut se permettre une interface beaucoup plus simple et des performances bien supérieures à celles requises pour le rendu 3D d'images graphiques complexes.
Il n'a pas les éléments d'un moteur de jeu tels que la gestion des actifs et la détection de collision, il devrait donc être enveloppé dans un moteur de jeu ou ces considérations doivent être prises en compte manuellement. Cela signifie que Zdog est probablement le meilleur pour les animations 3D isolées sur les pages de destination.
11. Snap.svg
Snap.svg dit que cela rend «le travail avec vos ressources SVG aussi simple que jQuery rend le travail avec le DOM». Vous pourrez peut-être dire à partir de la référence jQuery que Snap.svg est un peu plus ancien, mais son API est aussi simple que jQuery et c'est une chose assez puissante.
Snap.svg dispose d'une API propre et simple pour sélectionner votre élément SVG principal, puis dessiner des éléments dessus. Il est le plus adapté aux développeurs à la recherche d'une solution rapide pour animer des SVG. C'est une option particulièrement intéressante si vos animations sont simples et que vous n'avez pas beaucoup de connaissances sur les moteurs d'animation. Bien qu'il soit quelque peu daté, il ne faut certainement pas l'oublier, car cela pourrait être le moyen le plus simple de travailler avec vos SVG.
Snap.svg est rafraîchissant dans sa simplicité. Il est limité au travail de sélection et de travail avec les SVG et n'essaie pas d'être plus que cela. Snap pourrait être combiné avec d'autres bibliothèques graphiques ici pour le dessin et le rendu en SVG. C'est également bien si vous avez des SVG existants et que vous voulez un moyen facile de travailler avec eux.
Cet article a été initialement publié dans le magazine net.
Articles Liés:
