Nous vivons à une époque de croissance explosive de la quantité de données générées et consommées par l'humanité. Dans presque toutes les applications développées aujourd'hui, les données sont utilisées quelque part à l'intérieur ou visualisées. En utilisant les données, les programmeurs s'efforcent de rendre le travail avec leurs programmes aussi confortable que possible.
Parfois, il peut arriver que la chose la plus précieuse et la plus intéressante qu'une application puisse fournir à l'utilisateur soit des données. Cependant, si vous les représentez sous la forme d'une liste ou d'un tableau, travailler avec de telles données risque d'être fastidieux. De plus, s'il y a beaucoup de données, ne voyant que leur représentation la plus simple, l'utilisateur rencontrera des difficultés pour les analyser et prendre des décisions en fonction de celles-ci.
Les données qui représentent l'utilisateur de l'application ne devraient pas seulement lui être utiles en elles-mêmes. Ils doivent être conçus de sorte qu'il soit rapide, pratique et agréable de travailler avec eux.
Aujourd'hui, nous présentons à votre attention la traduction d'un document qui traite des bibliothèques JavaScript open source pour la visualisation des données.
1. D3
Bibliothèque D3Peut-être que la bibliothèque open source
D3 (également appelée D3.js) peut être appelée la plus populaire des bibliothèques JS existantes pour la visualisation des données. Ce projet, en particulier, a collecté près de 80 000 étoiles sur GitHub. La bibliothèque a été créée pour visualiser les données à l'aide de technologies telles que HTML, SVG et CSS.
Grâce à l'attention des créateurs de la bibliothèque aux normes Web, D3 offre aux développeurs un environnement holistique adapté à une utilisation dans les navigateurs modernes pour visualiser les données, éliminant ainsi la nécessité de rechercher des solutions payantes. La bibliothèque D3 combine des composants pour la visualisation des données et une approche pour travailler avec le DOM, qui, encore une fois, est basé sur les données. D3 vous permet de générer des données arbitraires vers le DOM, puis d'appliquer les transformations appropriées au document. Voici une grande
galerie d' exemples d'utilisation de cette bibliothèque.
Soit dit en passant, faites attention à l'opinion selon laquelle D3 n'est
pas du tout une bibliothèque de visualisation de données . Nous pensons que vous pouvez décider vous-même de ce qui doit être pris en compte et si vous souhaitez l'utiliser dans votre projet.
2. Chart.js
Chart.jsLa bibliothèque
Chart.js , qui a collecté environ 40 000 étoiles sur GitHub, est une solution très populaire pour créer des graphiques HTML5 et des diagrammes basés sur l'
<canvas> , conçus pour développer des applications Web réactives. La deuxième version actuelle de la bibliothèque prend en charge la combinaison de graphiques de différents types (il existe 8 types de graphiques de base), différents systèmes de coordonnées. Chart.js peut être utilisé conjointement avec la bibliothèque
moment.js . Si nécessaire, la bibliothèque peut être téléchargée à partir de
cdnjs .
3. Three.js
Three.jsLa bibliothèque
Three.js est une solution très populaire (environ 45 000 étoiles sur GitHub; plus de 1000 personnes ont contribué au projet) pour créer une animation 3D à l'aide de WebGL. La flexibilité et l'abstraction du projet signifient que Three.js peut être utilisé pour visualiser des données en
2 et 3 dimensions. Par exemple,
voici un module spécialisé pour Three.js, conçu pour créer des graphiques en trois dimensions. Voici un
sandbox en ligne pour des expériences de visualisation de données. Si vous songez à visualiser des données à l'aide de WebGL, vous êtes sûr de jeter un œil à Three.js.
4. ECharts et Highcharts JS
Un exemple de travail avec ECharts (image prise à partir d'ici )ECharts est un projet Baidu, qui a collecté environ 30 000 étoiles sur GitHub, est une bibliothèque de visualisation et de représentation graphique de données dans un navigateur. Il est écrit en JavaScript pur à l'aide de la bibliothèque
zrender conçue pour fonctionner avec l'
<canvas> .
La bibliothèque prend en charge la représentation graphique à l'aide de
<canvas> , SVG (4.0+) et VML. ECharts peut être utilisé non seulement dans le développement de pages conçues pour les navigateurs de bureau ou mobiles, mais aussi pour l'organisation d'un rendu de serveur efficace.
Voici une galerie d'exemples d'utilisation de cette bibliothèque avec laquelle vous pouvez expérimenter dans un environnement interactif.
Highcharts jsLa bibliothèque
Highcharts JS est assez largement utilisée, elle a collecté environ 8 mille étoiles sur GitHub. Le principal mécanisme utilisé par elle pour la visualisation des données est la technologie SVG, avec la possibilité de basculer vers VML et
<canvas> pour les anciennes versions de navigateurs. Il est indiqué que 72 des 100 plus grandes entreprises mondiales utilisent cette bibliothèque, ce qui, si elle est vraie, fait de cette bibliothèque la solution de cartographie la plus populaire parmi les grandes entreprises telles que Facebook et Twitter.
5. MetricsGraphics.js
MetricsGraphics.jsLa bibliothèque
MetricsGraphics.js (environ 7 000 étoiles sur GitHub) est une solution optimisée pour la visualisation de séries chronologiques. Il se distingue par sa taille relativement petite (80 Ko sous une forme minifiée) et donne au développeur un ensemble restreint mais réfléchi d'outils hautement spécialisés, parmi lesquels des outils pour construire des graphiques linéaires, des diagrammes de dispersion, des histogrammes, des graphiques à barres et des tableaux de données.
Voici une galerie interactive d'exemples de travail avec cette bibliothèque.
6. Recharts
RechartsLa bibliothèque
Recharts , avec près de 10 000 étoiles sur GitHub, est une solution de cartographie basée sur React et D3 qui ressemble à travailler avec des composants React déclaratifs. La bibliothèque offre au développeur un support pour SVG. Son arbre de dépendance léger (basé sur les sous-modules D3) est hautement personnalisable grâce aux propriétés des composants. Vous trouverez ici des exemples de son utilisation.
7. Raphaël
RaphaëlLa bibliothèque «vectorielle»
de Raphaël (environ 10 000 étoiles sur GitHub) est conçue pour fonctionner avec des graphiques vectoriels dans un environnement web. Elle, en tant que technologie de base pour la création d'objets graphiques, utilise SVG et VML. Par conséquent, les objets graphiques sont également des objets DOM auxquels vous pouvez vous connecter, à l'aide de JavaScript, des gestionnaires d'événements. La bibliothèque prend actuellement en charge les navigateurs tels que Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer 6.0+.
7. C3
Exemple de bibliothèque C3La bibliothèque
C3 (environ 8000 étoiles sur GitHub) est basée sur D3, elle offre au développeur la possibilité d'utiliser des classes pour tous leurs éléments, ce qui vous permet de définir vos propres styles en utilisant les classes et d'utiliser les capacités de D3. En outre, il prend en charge diverses API et rappels pour organiser l'interaction interactive avec les graphiques. En les utilisant, vous pouvez mettre à jour les graphiques même après leur affichage sur la page.
Voici des exemples d'utilisation de cette bibliothèque.
8. React-Vis, React Virtualized, Victory
Kit de composants React-VisL'ensemble des composants
React-Vis (environ 4 000 étoiles sur GitHub) a été développé par Uber et est destiné à organiser un système uniforme de visualisation des données dans les applications React. Cette solution prend en charge la présentation des données sous différentes formes, notamment sous forme de cartes thermiques et de nuages de points. Travailler avec cette bibliothèque ne nécessite pas une connaissance préalable, par exemple, avec quelque chose comme D3. Il fournit au développeur des blocs de construction modulaires de bas niveau tels que des axes X / Y.
Ensemble de composants virtualisés ReactL'ensemble des composants
virtualisés React (environ 12 000 étoiles sur GitHub) est conçu pour organiser le rendu efficace de grands ensembles de données tabulaires. Les versions ES6, CommonJS et UMD virtualisées React sont disponibles, le projet prend en charge Webpack 4. Si vous avez l'intention d'utiliser cet ensemble de composants, faites attention à la section
Dépendances de sa documentation.
Collection de composants de victoireVictory est une collection de composants React conçus pour visualiser des données avec des capacités interactives. Le projet a été créé par Formidable Labs, il a collecté environ 6 000 étoiles sur GitHub. Victory utilise les mêmes API pour les applications React régulières et l'environnement React Native, ce qui facilite le développement de solutions multiplateformes. Victory offre aux développeurs des moyens flexibles et magnifiques d'utiliser les capacités des composants React pour la visualisation des données.
9. CartoDB
Service CartoDBLa plate-forme
Carto (environ 2 000 étoiles sur GitHub) est conçue pour la visualisation et l'analyse des géodonnées. Sur cette plateforme, vous pouvez télécharger des géodonnées (par exemple, aux formats Shapefiles ou GeoJSON), les visualiser, les déposer sur une carte, les styliser à l'aide de CartoCSS, vous pouvez les rechercher à l'aide de SQL.
Il existe des didacticiels vidéo sur l'utilisation de cette plate-forme.
10. RAWGraphs
RAWGraphsLa bibliothèque
RAWGraphs avec environ 5 000 étoiles sur GitHub fournit un outil qui vous permet d'associer des tableaux contenant des données à des outils de visualisation. RAWGraphs est basé sur D3, il permet aux développeurs de créer leur propre visualisation de données vectorielles. Il fonctionne avec des données tabulaires dans différents formats et prend en charge des données qui peuvent simplement être copiées à partir d'autres applications. Les résultats des RAWGraphs sont présentés au format SVG, ils peuvent être modifiés à l'aide des applications appropriées, ou utilisés sur des pages Web inchangées.
Voici des exemples d'utilisation de cette bibliothèque.
11. Métabase
MétabaseLa bibliothèque
Metabase , qui a collecté plus de 11 000 étoiles sur GitHub, offre un moyen assez rapide et facile de créer des panneaux de contrôle contenant des données visualisées qui ne nécessitent pas de connaissance de SQL. Dans le même temps, la bibliothèque dispose d'un mode SQL spécial conçu pour les analystes et les personnes professionnellement impliquées dans le traitement des données. La métabase vous permet de
segmenter les données en créant des filtres ou des ensembles de filtres, la bibliothèque prend en charge la création d'indicateurs - des indicateurs calculés auxquels vous devez accéder assez souvent. Les autres fonctionnalités de Metabase incluent la prise en charge de l'envoi de données à Slack et la possibilité de travailler avec elles dans cet environnement à l'aide de
MetaBot . Cette bibliothèque, peut-être, peut être considérée comme un excellent outil pour visualiser les données au sein des entreprises, même s'il convient de noter que pour les maîtriser, il faudra un certain effort.
Bibliothèque bonus: Taucharts
TauchartsLa bibliothèque de visualisation de données Taucharts (environ 2 000 étoiles sur GitHub) est basée sur la bibliothèque D3. Il fournit au développeur une interface déclarative pour organiser rapidement la connexion de champs de données avec des propriétés visuelles. Son architecture vous permet de créer des graphiques dans lesquels les variables sont regroupées à l'aide des coordonnées X et Y (
graphiques à facettes ). Taucharts vous permet d'étendre le comportement des graphiques avec des plugins adaptés à la réutilisation.
Résumé
Nous avons examiné les bibliothèques JavaScript pour visualiser les données pouvant être utilisées dans le développement d'applications Web. Compte tenu de ce dont nous avons parlé du rôle des données dans le monde moderne, il n'est pas surprenant qu'il existe un grand nombre de solutions pour la visualisation des données. Par conséquent, voici quelques bibliothèques plus similaires (lorsque vous les étudiez, faites attention au fait que certaines d'entre elles n'ont pas été mises à jour depuis longtemps):
Chers lecteurs! Quelles bibliothèques utilisez-vous pour visualiser les données dans vos projets Web?
