- . , visx . , .
- , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
- Il ne s’agit pas d’une collection d’éléments «aiguisés» pour la création de graphiques. Si vous utilisez des primitives de visualisation pour créer des graphiques, vous créerez éventuellement votre propre bibliothèque qui résoudra ce problème. De plus, ce sera une bibliothèque optimisée pour vos besoins. Elle sera sous votre contrôle total.
La force la plus importante de visx est qu'il s'agit essentiellement d'un ensemble régulier de composants React. Savoir comment travailler avec la bibliothèque React signifie que vous pouvez utiliser visx pour créer des visualisations. Il utilise des API standard et des modèles familiers aux développeurs React. Dans tout projet React, visx doit se sentir comme chez lui. Nous sommes très intéressés par ce que vous créez avec visx!
Défi: visualisation des données dans le développement front-end
La visualisation des données est nécessaire par des spécialistes de divers domaines. Pour cette raison, il existe un besoin pour l'existence de cadres pour créer des éléments graphiques. De tels cadres capables de résoudre les problèmes de ces personnes. Le genre que ces gens peuvent vraiment maîtriser.
Un de ces groupes est constitué de développeurs frontaux qui doivent constamment créer des visualisations de données pour les projets Web. Il existe des tonnes de bibliothèques et de cadres pour créer des graphiques Web. À partir de D3 , Highcharts , Plotly , Echarts , Victory , G2 , Recharts , react -vis , vega ,vega-lite , à Semiotic et à d'autres projets similaires. Malgré cette diversité, nous avons analysé plus d'une douzaine de bibliothèques existantes et envisagé de les utiliser sur Airbnb et avons constaté que la plupart d'entre elles présentent des lacunes dans au moins l'un des trois domaines importants pour nos développeurs front-end:
- ( ?). - . API D3 vega. , -.
- ( , ?). , ? ( — airbnb.com), . ? .
- . -, , -, , airbnb.com, . , , , , , .
Il a été noté qu'il existe souvent une relation directe entre l'expressivité des outils de visualisation de données et la capacité de les explorer rapidement. Mieux est l'une de ces caractéristiques, pire est l'autre. Tout cela nous a conduit à la question de savoir comment créer une bibliothèque qui peut être explorée rapidement, une bibliothèque suffisamment expressive et en même temps - haute performance. La réponse à cette question se compose d'un mot: "Réagir".
Solution: primitives visuelles de bas niveau basées sur React
Ces dernières années, la bibliothèque React est devenue le courant dominant du développement Web. Cela est en partie dû au fait qu'il dispose d'API déclaratives qui vous aident à écrire un code propre, lisible et facile à maintenir. Cette bibliothèque est familière à de nombreux développeurs frontaux, il existe de nombreux éléments sur l'optimisation des performances des applications React. Nous avons basé le projet sur React et l'écosystème de cette bibliothèque, ce qui signifie que nous l'avons rendue facile à apprendre et productive. La mise en œuvre d'une API modulaire de bas niveau est devenue la clé de son expressivité.
Lorsque nous parlons de cette vision de ce projet, on nous pose généralement deux questions.
Voici la première: "Pourquoi ne pas utiliser simplement D3, une librairie très expressive dans vos applications React?"
Le fait est que vous pouvez le faire. Mais comme D3 et React veulent tous deux manipuler le DOM à eux seuls, nous avons constaté qu'il était préférable d'utiliser D3 uniquement pour le calcul et React pour le DOM. Sinon, deux modèles mentaux en compétition pour mettre à jour le DOM ouvrent la porte à des bugs pour infiltrer le projet. Mais utiliser D3 uniquement pour les calculs signifie qu'une grande partie des fonctionnalités de cette bibliothèque (ce qui est lié au DOM) ne sera pas utilisée. Il s'agit de selection.join , zoom , drag , brush and transitions... De plus, comme mentionné, D3 prend du temps à maîtriser. Et nous aimerions que les développeurs aient l'impression d'écrire du code React natif qui utilise des API standard et des modèles familiers lors de la visualisation des données.
Voici la deuxième question: pourquoi ne pas utiliser simplement l'une des nombreuses bibliothèques de rendu créées pour React?
Notre recherche (les résultats sont présentés dans la figure suivante) a montré que les bibliothèques React existantes pour la visualisation de données sont souvent des abstractions de haut niveau et sont optimisées pour la facilité d'utilisation (c'est-à -dire axées sur la réduction de la quantité de code nécessaire pour les utiliser). Cela se fait au détriment de leur expressivité. Aucun d'entre eux n'offre au développeur l'expressivité des primitives D3, beaucoup ne permettent pas l'optimisation dont nous avons besoin pour les projets de production, car le calcul, l'animation, la gestion des états, le style et le rendu sont étroitement liés les uns aux autres.
- , , . visx , React-
En analysant l'espace des problèmes présenté dans la figure précédente, vous pouvez clairement voir l'opportunité de développer avec succès une bibliothèque React avec un haut niveau d'expressivité. En créant des primitives de rendu de bas niveau conçues dès le départ pour utiliser les API React communes, nous espérions pouvoir créer une bibliothèque facile à apprendre, expressive et hautement performante. Nous avons pensé qu'une telle bibliothèque serait utile pour tout développeur front-end. C'est ainsi qu'est né le projet visx.
DĂ©tails sur visx
La collection de composants visx (anciennement connue sous le nom de vx) masque les mots «composants de visualisation» dans son nom. Il se compose de plus de 30 packages distincts contenant des primitives de visualisation de données React, divisées en plusieurs catégories (voir la figure suivante). Quiconque utilise ces primitives n'est pas obligé de suivre une sorte de schéma de gestion de l'état des applications. Le développeur peut choisir l'approche de l'animation des éléments et de leur style. Tout cela signifie que les primitives visx peuvent être intégrées dans n'importe quelle base de code basée sur React. Et le fait que lors de la création de visx, l'accent a été mis sur la modularité (cela rend visx similaire à D3) vous permet de créer des faisceaux d'applications de taille compacte, y compris dans leur composition uniquement ce qui est nécessaire pour implémenter votre propre bibliothèque de visualisation de données, destinée à une utilisation réutilisable, ou alors ,ce qui est nécessaire pour former un calendrier unique qui existe en un seul exemplaire.
Visx est une collection modulaire de plus de 30 packages qui traitent des tâches de visualisation de données courantes dans les applications React.
Questions et réponses
▍ Comment D3 est-il utilisé dans visx?
Plusieurs des packages inclus avec visx utilisent D3 pour effectuer divers calculs, tels que le placement des éléments sur les pages. Ils dupliquent fonctionnellement les packages D3 qu'ils utilisent, en les dotant d'API déclaratives React. Des exemples de tels packages incluent @ visx / axis, @ visx / geo, @ visx / hierarchy et @ visx / shape. D'autres packages remplacent la fonctionnalité de gestion DOM de D3 et fournissent au développeur des primitives React pour interagir avec les éléments. Ce sont, par exemple, @ visx / brush, @ visx / drag et @ visx / zoom.
â–Ť Que peut faire visx que D3 ne peut pas faire?
De nombreux packages sont totalement indépendants de D3, ils résument les solutions aux problèmes courants auxquels nous avons été confrontés lors de la création de mises en page de conception dans React qui reproduisent les mises en page avec une précision de pixel. Beaucoup de ces outils résument et simplifient les problèmes complexes de dimensionnement des objets et simplifient l'API SVG. Voici quelques exemples.
@ visx / info-bulle
Voici un exemple interactif.
Info-
bulles Les info- bulles sont un élément souvent utilisé dans les projets Web. Mais réaliser toutes les micro-interactions avec de tels éléments n'est pas une tâche facile. Le package @ visx / tooltip résume la gestion de l'état des info-bulles. Il aide à gérer son contenu, ses coordonnées, à le montrer et à le cacher. Cela se fait en utilisant les hooks React (useTooltip) et en utilisant un composant d'ordre supérieur (withTooltip). L'utilisation du package @ visx / tooltip simplifie également les tâches liées au rendu des info-bulles, telles que le positionnement automatique (par conséquent, l'info-bulle n'est pas découpée par son conteneur), et comme le rendu facultatif dans le portail.pour résoudre les problèmes de superposition contextuelle
@ visx / texte
Un exemple interactif peut être trouvé ici .
Travailler avec du texte
dans SVG 1.1. il n'y a aucune possibilité de travailler avec du texte multiligne, similaire à ceux du HTML, où, par exemple, vous pouvez facilement, en utilisant CSS, implémenter une représentation multiligne de longs textes. La mise en œuvre de tels mécanismes dans React (ou même en JavaScript pur) nécessite généralement de rendre des éléments DOM invisibles utilisés pour mesurer la taille du texte et pour trouver des paramètres pour découper le texte en lignes. Le package @ visx / text résume toutes ces tâches et facilite la prise en charge de longs textes dans les visualisations.
@ visx / réactif
Voici un exemple interactif.
Application Web réactive Les applications Web
responsives sont faciles à créer à l'aide de HTML. Si les diagrammes sont créés en fonction des graphiques SVG et des capacités de l'élément canvas, des mesures de précision des pixels doivent être prises pour les rendre réactifs, ce qui n'est pas si facile dans React. Le package @ visx / responsive fournit au développeur une variété d'outils d'aide qui facilitent l'obtention des dimensions en pixels des éléments afin que vous puissiez facilement créer des graphiques réactifs.
@ visx / gradient, @ visx / motif
Voici un exemple interactif.
Dégradés et motifs
Les dégradés de couleurs et les motifs de remplissage améliorent considérablement les capacités de ceux qui conçoivent des graphiques. Ces effets graphiques créent des images accrocheuses qui se détachent de l'arrière-plan. Mais décrire de telles images à l' aide de SVG nécessite beaucoup de code et peut être une tâche ardue. Les packages @ visx / gradient et @ visx / pattern simplifient considérablement la syntaxe pour déclarer les styles appropriés, permettant à n'importe qui de créer de jolis diagrammes.
▍ Que peut-on créer avec visx?
Nous utilisons visx depuis 2,5 ans, en utilisant cette collection d'éléments dans des dizaines d'outils de données internes et sur airbnb.com.
Visualisations créées à l'aide de visx
La figure précédente montre des exemples de ce que nous avons créé à l'aide de visx. Ce sont, si vous allez dans le sens des aiguilles d'une montre, en commençant par le coin supérieur gauche, les projets suivants: diagramme de Gantt avec dépendances, diagramme à secteurs d'organisation, diagramme radial, rapport de métriques commerciales, aperçu des interactions de service.
Nous avons également utilisé visx pour créer une bibliothèque de haut niveau pour créer des diagrammes réutilisables. Cela nous a permis de réduire la quantité de code standard lors de la génération d'éléments graphiques simples.
Visx est une collection d'éléments de bas niveau. Il est conçu pour la création de systèmes de niveau supérieur sur sa base. Il doit être utilisé pour créer vos propres bibliothèques de haut niveau et pour créer des visualisations personnalisées pour les applications Web.
▍Visx a l'air intéressant, mais que faire si j'aime vraiment D3?
Nous aimons aussi D3!
â–ŤComment Ă©volue visx?
Depuis 3 ans de travail sur visx, nous avons développé cette collection de primitives dans les trois directions suivantes:
- . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
- . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
- . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .
La documentation visx utilise des exemples de style blocks.org que vous pouvez expérimenter sur la plate-forme CodeSandbox. Tous les exemples sont étroitement liés aux packages de collecte correspondants.
Avez-vous utilisé visx?