Construire une infographie interactive avec Vue.js
À propos de l'auteur
Krutie est une analyste technique des affaires et une consultante frontale spécialisée dans les logiciels Vue.js et Nuxt.js, parallèlement à la maîtrise de Laravel. Elle a un… Pour en savoir plus sur Krutie
Avez-vous déjà eu besoin de concevoir et de créer une expérience Web interactive, mais le système de grille manquait? En outre, les éléments de conception se sont transformés en formes inhabituelles qui ne pourraient tout simplement pas s’intégrer aux présentations Web régulières Dans cet article, nous allons créer une infographie interactive à l’aide de Vue.js, SVG et GreenSock, en utilisant des données dynamiques et une présentation inhabituelle.
Cet article présente une approche moderne de la création d'une infographie interactive. Vous pouvez être sûr d'avoir une infographie simple avec toutes les informations disponibles à l'avance, sans aucune interaction de l'utilisateur. Mais penser à construire une expérience interactive change le paysage technologique que nous choisissons. Par conséquent, comprenons d’abord, pourquoi Vue.js? Et vous verrez pourquoi GSAP (Plate-forme d'animation GreenSock) et SVG (Graphiques vectoriels évolutifs) deviennent un choix évident.
Vue.js fournit des moyens pratiques de créer des interfaces utilisateur dynamiques à base de composants, dans lesquelles vous pouvez manipuler et gérer des éléments DOM. des moyens puissants. Dans ce cas, ce sera SVG. Vous pouvez facilement mettre à jour et gérer différents éléments SVG – de manière dynamique – en utilisant seulement un petit sous-ensemble de fonctionnalités disponibles dans Vue.js – certaines des fonctionnalités de base qui conviennent à la facture ici sont, la liaison de données, le rendu de liste, la liaison de classe dynamique pour nommer un peu. Cela vous permet également de regrouper des éléments SVG pertinents et de les composant.
Vue.js joue bien avec les bibliothèques externes sans perdre de sa gloire, c'est-à-dire GSAP ici. Vue.js présente de nombreux autres avantages, dont l'un d'entre eux est que Vue.js vous permet d'isoler les modèles, scripts et styles associés pour chaque composant. Ainsi, Vue.js favorise la structure modulaire de l'application.
Vue.js également est livré avec de puissants crochets de cycle de vie qui vous permettent de puiser dans les différentes étapes de l'application pour modifier le comportement de l'application. La configuration et la maintenance des applications Vue.js ne nécessitent pas un grand engagement, cela signifie que vous pouvez adopter une approche progressive pour adapter votre projet au fur et à mesure de votre progression.
L'infographie est un objectif très léger, au sens visuel. Cet article explique comment penser en termes de données, d’éléments visuels et, bien sûr, de Vue.js – le cadre qui permet toute l’interactivité. De plus, nous utiliserons GreenSock, une bibliothèque d’animation d’éléments SVG. Avant de plonger, jetez un coup d’œil à la démo [19459204].
Nous commencerons par:
Vue d'ensemble des données pour infographie;
Préparation d'image SVG;
Vue d'ensemble des composants Vue dans le contexte de l'illustration SVG;
Échantillons de code et diagrammes de l'interactivité clé.
L'infographie qui nous allons construire concerne le Tour de France, l’événement annuel de courses cyclistes organisé en France.
Tour De France – Liste interactive de bicyclettes comprenant les étapes (roue arrière) et les équipes participantes (roue avant). ( Grand aperçu )
Présentation des données du Tour de France
En conception infographique, les données déterminent la conception de votre infographie. Par conséquent, lors de la planification de votre conception infographique, il est toujours bon d'avoir toutes les données, informations et statistiques disponibles pour le sujet donné.
Au cours du Tour de France de 2017, j'ai tout appris sur ce plus grand événement cycliste que j'ai pu pendant les 21 jours du jeu en juillet, et je me suis familiarisé avec le sujet.
Les entités fondamentales de la course que j’ai décidé d’aller dans ma conception sont,
les étapes,
les équipes,
Routes ,
Winners,
Longueur et classifications de chaque itinéraire.
Cette partie suivante du processus dépend de votre style de pensée, vous pouvez donc être créatif ici.
J'ai créé deux ensembles de données, un pour étapes et autres pour les équipes. Ces deux ensembles de données comportent plusieurs lignes de données (mais dans les limites ), qui correspondent à deux roues de la bicyclette avec plusieurs rayons dans chacune. Et cela définit l'élément clé de la conception, The Bicycle Art que vous avez vu au début – où chaque interlocuteur sera interactif et responsable de la gestion des informations révélées à l'écran.
J'ai mentionné . ] dans les limites ci-dessus, car ce que nous visons ici n'est pas une visualisation complète des données dans le contexte du Big Data, mais plutôt une infographie avec des données de haut niveau.
Par conséquent, passez du temps de qualité avec des données et recherchez des similitudes, des différences, une hiérarchie ou des tendances pouvant vous aider à transmettre une histoire visuelle. N'oubliez pas non plus l'incroyable combinaison de SVG et de Vue.js, car elle vous aidera à trouver le bon équilibre entre informations (données), interactivité (Vue.js) et éléments de conception (SVG Artwork ) de l'infographie.
Voici l'extrait d'un objet de données de scène:
{
"ID": 1,
"NOM": "STAGE 01",
"DISTANCE": "14",
"ROUTE": "KMDÜSSELDORF / DÜSSELDORF",
"GAGNANT": "THOMAS G.", "UCI_CODE": "SKY", "TYPE": "Contre-la-montre individuel", "DATE": "samedi 1er juillet", "KEY_MOMENT": "Geraint Thomas remporte sa première victoire à 32 ans" }
et un extrait d'objet de données d'équipe comme suit:
Cette infographie est gérée selon une logique très simple.
UCI_CODE ( de l'Union cycliste internationale ) est la clé de connexion entre la scène et l'objet d'équipe. Quand une étape est cliquée, nous l'activons d'abord, mais nous utilisons également la clé UCI_CODE pour activer l'équipe gagnante correspondante.
Préparation SVG
Avoir quelques jeux de données et un concept approximatif de bicyclette prêt à l'emploi, voici le code SVG statique de l'infographie que j'ai créée.
Nous avons créé un seul rayon pour chaque roue, c’est parce que nous allons créer de manière dynamique le reste des rayons en utilisant un certain nombre d’enregistrements trouvés dans le jeu de données et les animer à l’aide de la bibliothèque GreenSock.
créer ce code SVG est également très simple. Créez votre illustration Infographic dans Adobe Illustrator et enregistrez-la au format SVG. Assurez-vous de nommer chacun des calques des groupes et lorsque vous travaillez dans Illustrator, car vous aurez besoin de ces identifiants pour séparer les parties du code SVG qui finiront par peupler la zone des composants Vue. N'oubliez pas que les noms de calques donnés dans Illustrator deviennent les identificateurs d'élément en balises SVG
. Vous pouvez également utiliser SVGOMG et optimiser davantage le code SVG exporté à partir d'Adobe Illustrator. Remarque importante: Si vous utilisez SVGOMG pour optimiser le balisage SVG, votre code paraîtra soigné, mais notez qu'il convertira tous les éléments
Seconde chose à faire, décochez la case Option Clean Id (options de droite dans l'interface SVGOMG), cela aidera à conserver tous les groupes et identifiants créés dans Illustrator.
Vue générale – Vue d'ensemble des composants
Même si l'interactivité et le flux de données dans votre Le projet infographique est de nature assez simple, vous devriez toujours prendre un moment pour dessiner un diagramme en arborescence des composants.
Cela vous aidera particulièrement si vous n’utilisez pas de mécanisme de données partagées, où les composants enfants dépendent de la les valeurs envoyées par le composant parent (c.-à-d. via les accessoires) ou inversement (c.-à-d. les événements $ emit). C'est l'occasion pour vous de réfléchir à ces valeurs, d'émettre des événements et des données locales, et de les documenter avant de commencer à écrire le code.
Le diagramme ci-dessus est un instantané des composants Vue partiellement dérivé des exigences d'interactivité et partiellement basé sur le balisage SVG. Vous devriez être en mesure de voir comment le balisage SVG sera fractionné en fonction de cette arborescence. C'est assez explicite du point de vue de la hiérarchie.
La roue à chaîne imitera la rotation des rayons.
Le composant de la scène est la roue arrière qui répertoriera les 21 étapes.
Le composant de la scène affiche les informations associées. sur un chemin incurvé (côté gauche).
Le composant d'équipe est la roue avant qui liste toutes les équipes participantes sur des rayons.
Le composant de détail d'équipe affiche les informations connexes sur un chemin incurvé (à droite). .
La navigation inclura les boutons Précédent et Suivant pour accéder aux étapes.
Le diagramme ci-dessous représente les mêmes composants Vue que ceux vus ci-dessus, mais dans le contexte de la conception infographique.
Moins, c'est plus – devrait être l'approche que vous devriez essayer d'adopter tout en travaillant sur des projets similaires. Réfléchissez à vos exigences en matière d'animation et de transition, si vous pouvez utiliser TweenLite au lieu de TweenMax, faites-le. Si vous avez la possibilité de choisir des formes élémentaires et des tracés plus simples que ceux complexes, essayez absolument de choisir des éléments légers, faciles à animer, sans pénalité de performances.
partie passionnante avec l'animation GreenSock et Vue.js.
GreenSock Animation
Regardons de plus près:
Animation de texte sur une trajectoire courbe
Animation de rayon sur une roue
Animation de texte sur une trajectoire courbe
Rappelez-vous la trajectoire de la courbe vue autour de la roue de la bicyclette, cette trajectoire courbe est légèrement plus grande que le rayon. de la roue de bicyclette. Par conséquent, lorsque nous animons un texte sur ce tracé, il semblera qu'il épouse la forme de la roue.
path et textPath est une belle combinaison d'éléments SVG qui vous permet de définir du texte sur n'importe quel chemin à l'aide de xlink : attribut href .
<path id = " curvedPath " stroke = "none" fill = "none" d = "... "/> <textPath xlink: href = " #curvedPath " class = "stageDetail" startOffset = "0%"> {{stage.KEY_MOMENT}} (19659094]
. ] Pour animer un texte le long du chemin, nous allons simplement animer son attribut startOffset à l’aide de GreenSock.
À mesure que vous augmentez le pourcentage startOffset le texte ira plus loin dans le périmètre du cercle.
Dans notre dernier projet, cette animation est déclenchée à chaque clic sur un rayon. Passons maintenant à une partie plus excitante de l’animation.
Animation des étapes / rayons à l’intérieur de la roue
Il est visible depuis la démonstration que les éléments stage et team sont de même nature, à quelques petites différences près. Alors, concentrons-nous sur une seule roue du vélo.
L'exemple de CodePen ci-dessous ne concerne que les trois idées principales:
Récupération des données de la scène;
Organisez les rayons de manière dynamique en fonction des données;
. Vous avez peut-être remarqué dans le code statique SVG ci-dessus que les rayons ne sont que des rectangles et du texte SVG regroupés. Je les ai regroupés car je voulais choisir à la fois le texte et le rectangle à des fins d'animation.
<g v-for = "scène à étapes" class = "stage"> { {stage.NAME}}
Nous les rendrons dans la zone du composant Vue à l'aide des valeurs extraites de la source de données.
Lorsque les 21 étapes sont disponibles à l'écran, nous définissons leurs positions initiales. en appelant, par exemple, setSpokes () .
Les trois éléments clés de la mise en scène sont les suivants:
Rotation Pour faire pivoter les rayons, nous allons simplement cartographier tous les éléments avec l'étape className et définir le mode dynamique . rotation valeur calculée pour chaque rayon.
Transform Origin Notice de transformOrigin dans le code ci-dessus, aussi importante que la valeur de l'index car «0% à 100%» permet à chaque personne de s'exprimer faire pivoter à partir du centre de la roue.
stageAngle Il est calculé en utilisant le nombre total d'étages divisé par 360 degrés. Cela nous aidera à positionner chaque rayon de manière uniforme dans un cercle de 360 degrés.
AJOUTER DE L'INTERACTIVITÉ
L'étape suivante consistera à ajouter un événement clic sur chaque étape pour le rendre interactif et réactif aux modifications de données. La vie dans une image SVG!
Supposons que, si l'on clique sur l'étape, on exécute goAnimate () qui est chargé d'activer et de faire pivoter la scène sur laquelle on clique en utilisant stageId . ] paramètre.
goAnimate (stageId) {
// active l'id d'étape
this.activeId = stageId
// faire pivoter les rayons
}
Nous utiliserons DirectionalRotationPlugin … qui est un ingrédient essentiel de cette interactivité. Et oui, il est inclus dans TweenMax.
Il existe trois façons différentes d’utiliser ce plugin. Il anime la propriété de rotation dans 1) dans le sens des aiguilles d'une montre, 2) dans le sens contraire des aiguilles d'une montre et 3) dans la distance la plus courte calculée par rapport à la destination.
Comme vous l'avez déjà deviné, nous utilisons la troisième option pour faire pivoter la distance la plus courte.
Passez en revue le CodePen ci-dessus et vous verrez comment Stage 01 se déplace constamment autour du cercle, laissant son emplacement initial pour un nouveau stade actif à un angle de 0 degré.
Premièrement, nous devons trouver l'angle d'une étape sur laquelle un clic est effectué et échanger sa rotation avec Etape 01 . Alors, comment pouvons-nous trouver la valeur de rotation de la scène sur laquelle vous avez cliqué? Consultez le diagramme ci-dessous.
Calcul de la distance de l’étape 01 à l'étape «cliqué». ( Grand aperçu )
Par exemple, si vous cliquez sur Étape 05 (comme vous pouvez le voir ci-dessus), le trajet de Étape 01 à Étape 05 – nécessite un angle de 4 x
Et par conséquent, nous pouvons obtenir le bon angle en utilisant, (Active stage Id - 1) * 17 degrés, suivi de la lettre '_short' postfixe pour déclencher le plugin de rotation directionnelle.
La fonction finale goAnimate () ressemblera à quelque chose comme ci-dessous:
_. Map (rayons, (item, index) => {
if (activeId == index + 1) {
// étape active
TweenMax.to (élément, 2,
{rotation: 0 + '_ court',
transformOrigin: "0 100%"
})
} sinon si (index == 0) {
// première étape
TweenMax.to (élément, 2, {rotation: (angle actifId *)) + angle _ 'court', transformationOrigine: "0 à 100%" }) } autre { TweenMax .to (item, 2, {rotation: index * angle + '_ court', transformationOrigine: "0 100%" }) } }) // fin de la carte [19659040] Une fois la roue arrière prête, la roue avant (pour l'équipe) doit suivre la même logique, avec quelques ajustements.
Au lieu de l'étape, nous allons récupérer les données de l'équipe et mettre à jour le point d'enregistrement de transformOrigin. attribut permettant la génération de rayons à partir d'un point d'enregistrement opposé à celui de la roue de scène.
// définition des rayons de l'équipe
map (teamSpokes, (index, key) => {
TweenMax.to (index, 2,
{rotation: angle * clé,
transformOrigin: "100% 100%" }, 1) })
Projet final
Comme moi, si vous avez écrit toutes les fonctions liées à l'animation et aux données dans les composants Vue eux-mêmes. Il est temps de les nettoyer avec Vuex et Mixins.
Utilisation de la gestion d’état Vuex pour alimenter les deux roues avec des données. ( Grand aperçu )
VUEX
Vuex simplifie la gestion des données partagées entre composants, et plus important encore, il rationalise votre code en conservant les méthodes et () propres et ordonnées. les composants uniquement pour restituer les données, pas pour les traiter.
Les hooks de cycle de vie sont un endroit très approprié pour effectuer des requêtes HTTP. Nous récupérons les données initiales dans créé hook, lorsque l'application Vue s'est initialisée, mais n'est pas encore montée dans le DOM.
Variables d'état vides, étapes et équipes sont mis à jour en utilisant des mutations à ce stade. Nous utilisons ensuite watcher (une seule fois) pour garder trace de ces deux variables et, dès qu’elles sont mises à jour, nous appelons un script d’animation (extrait de mixin.js ).
Chaque fois que l’utilisateur interagit avec le composant stage ou team, il communique avec le magasin Vuex, exécute setActiveData et met à jour les valeurs actuelles de stage et de l'équipe. C'est ainsi que nous définissons les données actives.
Et lorsque les données actives sont définies après la mise à jour de l'état, goAnimate lance des rayons animés (rotation directionnelle) à l'aide de valeurs mises à jour.
Maintenant que les données sont gérées par Vuex, nous allons séparer les animations GreenSock. Cela évitera que nos composants Vue soient encombrés de longs scripts d'animation. Toutes les fonctions GreenSock sont regroupées dans le fichier mixin.js .
Étant donné que vous avez accès à Vuex Store dans Mixins, toutes les fonctions GSAP utilisent des variables state pour animer des éléments SVG. Vous pouvez voir store.js et mixin.js pleinement opérationnels dans l'exemple CodeSandbox ici .
Conclusion
La création d'infographies interactives et attrayantes nécessite vous devez être analytique avec les données, créatif avec des éléments visuels et efficace avec la technologie que vous utilisez, ce qui dans ce cas-ci est Vue.js. Vous pouvez utiliser davantage ces concepts dans votre projet. Pour terminer, je vous laisse avec cette roue chromatique interactive circulaire ci-dessous qui reprend une idée similaire à celle évoquée dans cet article.
Sans aucun doute, Vue.js a de nombreuses fonctionnalités; Nous sommes en mesure de créer des infographies interactives avec quelques éléments, tels que des observateurs, des propriétés calculées, des mixins, des directives (voir l’exemple de la roue de couleur) et quelques autres méthodes. Vue.js est le liant qui unit à la fois l'animation SVG et GreenSock, vous permettant ainsi de créer en même temps un grand nombre de sujets et une interactivité personnalisée.
