Construire une infographie interactive avec Vue.js

Cet article présente une approche moderne pour créer une infographie interactive. Vous pouvez certainement avoir une infographie simple avec toutes les informations disponibles à l'avance - sans aucune interaction de l'utilisateur. Mais penser à créer 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 (GreenSock Animation Platform) et SVG (Scalable Vector Graphics) deviennent des choix évidents.

Vue.js fournit des moyens pratiques de créer des interfaces utilisateur dynamiques basées sur des composants dans lesquelles vous pouvez manipuler et gérer des éléments DOM de manière puissante. Dans ce cas, ce sera SVG. Vous pouvez facilement mettre à jour et gérer différents éléments SVG - dynamiquement - en utilisant seulement un petit sous-ensemble de fonctionnalités disponibles dans Vue.js - certaines des fonctionnalités de base qui correspondent à la facture ici, sont la liaison de données, le rendu de liste, la liaison de classe dynamique pour nommer un quelque. Cela vous permet également de regrouper les éléments SVG pertinents et de les diviser en composants.

Vue.js joue bien avec les bibliothèques externes sans perdre sa gloire, c'est GSAP ici. L'utilisation de Vue.js présente de nombreux autres avantages, dont l'un est que Vue.js vous permet d'isoler des modèles, des scripts et des styles associés pour chaque composant. De cette façon, Vue.js favorise la structure d'application modulaire.

Lecture recommandée : Remplacer jQuery par Vue.js : aucune étape de construction nécessaire

Vue.js est également fourni avec de puissants hooks de cycle de vie qui vous permettent d'exploiter 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, ce qui signifie que vous pouvez adopter une approche progressive pour faire évoluer votre projet au fur et à mesure.

L'infographie est très légère au sens visuel, car l'objectif principal de cet article est d'apprendre à penser en termes de données, d'éléments visuels et, bien sûr, de Vue.js - le cadre qui rend possible toute l'interactivité. De plus, nous utiliserons GreenSock, une bibliothèque pour animer des éléments SVG. Avant de plonger, jetez un œil à la démo.

Nous allons commencer par :

1. L'aperçu des données pour l'infographie ;
2. Préparation d'images SVG ;
3. Un aperçu des composants Vue dans le contexte de l'illustration SVG ;
4. Exemples de code et diagrammes d'interactivité clé.

L'infographie que nous allons créer concerne le Tour de France, l'événement annuel de course cycliste organisé en France.

Aperçu des données du Tour de France

Dans la conception infographique, les données déterminent la conception de votre infographie. Par conséquent, lors de la planification de votre conception infographique, c'est toujours une bonne idée d'avoir toutes les données, informations et statistiques disponibles pour le sujet donné.

Pendant le Tour de France de 2017, j'ai tout appris sur ce plus grand événement cycliste que j'ai pu en 21 jours de jeu en juillet, et je me suis familiarisé avec le sujet.

Les entités de base de la race que j'ai décidé d'utiliser dans ma conception sont,

• Étapes,
• Les équipes,
• Itinéraires,
• Gagnants,
• Longueur et classifications de chaque parcours.

Cette prochaine partie du processus dépend de votre style de pensée, vous pouvez donc être créatif ici.

J'ai créé deux jeux de données, un pour les étapes et l'autre pour les équipes. Ces deux ensembles de données ont plusieurs lignes de données (mais within limit ) - qui correspondaient à deux roues du vélo avec plusieurs rayons dans chacune. Et cela a défini l'élément clé de la conception, The Bicycle Art que vous avez vu au début - où chaque rayon sera interactif et responsable pour conduire les informations révélées à l'écran.

J'ai mentionné within limits ci-dessus, car ce que nous visons dans ce cas 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 les données et recherchez les similitudes, les différences, la hiérarchie ou les tendances qui peuvent vous aider à transmettre une histoire visuelle. Et n'oubliez pas l'incroyable combinaison de SVG et Vue.js pendant que vous y êtes, car cela vous aidera à trouver le bon équilibre entre l'information (données), l'interactivité (Vue.js) et les éléments de conception (SVG Artwork ) d'infographie.

Voici l'extrait d'un objet de données d'étape :

 { "ID": 1, "NAME": "STAGE 01", "DISTANCE": "14", "ROUTE": "KMDUSSELDORF / DUSSELDORF", "WINNER": "THOMAS G.",
    "UCI_CODE": "SKY",
    "TYPE": "Individual Time Trial",
    "DATE": "Saturday July 1st",
    "KEY_MOMENT": " Geraint Thomas takes his first win at 32"
}

Et extrait d'objet de données d'équipe comme ci-dessous :

 { "ID": 1,
    "UCI_CODE": "SKY",
    "NAME": " TEAM SKY",
    "COUNTRY": "Great Britain",
    "STAGE_VICTORIES": 1,
    "RIDERS": 8
}

Cette infographie est opérée par une logique très simple.

UCI_CODE (Union Cycliste Internationale) est la clé de liaison entre l'étape et l'objet équipe. Lorsque vous cliquez sur une étape, nous allons d'abord activer cette étape, mais également utiliser la clé UCI_CODE pour activer l'équipe gagnante correspondante.

Préparation SVG

Ayant quelques ensembles de données et un concept approximatif d'art de vélo prêt, voici le SVG CodePen statique de l'infographie que j'ai créé.

Nous avons créé un seul rayon pour chaque roue, car nous allons créer dynamiquement 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.

Le workflow pour créer ce code SVG est également très simple. Créez votre illustration d'infographie dans Adobe Illustrator et enregistrez-la au format SVG. Assurez-vous de nommer chaque group et layer lorsque vous travaillez dans Illustrator, car vous aurez besoin de ces identifiants pour séparer les parties du code SVG qui finiront par remplir la zone <template> des composants Vue. N'oubliez pas que les noms de calque donnés dans Illustrator deviennent des identifiants d' element ids dans le balisage SVG.

Vous pouvez également utiliser SVGOMG et optimiser davantage le code SVG exporté depuis Adobe Illustrator.

Remarque importante : Si vous utilisez SVGOMG pour optimiser le balisage SVG, votre code aura certainement l'air soigné, mais notez qu'il convertira tous les éléments <rect> en <path> avec l'attribut d . Cela entraîne la perte des valeurs x et y du rectangle, au cas où vous souhaiteriez ajuster manuellement quelques pixels ultérieurement.

Deuxièmement, assurez-vous de décocher l'option Clean Id (options de droite dans l'interface SVGOMG), cela aidera à conserver intacts tous les groupes et identifiants créés dans Illustrator.

Vue d'ensemble du composant Vue

Même si l'interactivité et le flux de données dans votre projet d'infographie sont de nature assez simple, vous devez toujours prendre un moment pour dresser un schéma arborescent des composants.

Cela sera particulièrement utile si vous n'utilisez aucun mécanisme de partage de données, où les composants enfants dépendent des valeurs envoyées par le composant parent (c'est-à-dire via des accessoires) ou vice-versa (c'est-à-dire this.$emit events). C'est votre chance de réfléchir à ces valeurs d'accessoires, 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 l'instantané des composants Vue qui est partiellement dérivé des exigences d'interactivité et partiellement basé sur le balisage SVG. Vous devriez pouvoir voir comment le balisage SVG sera divisé en fonction de cette structure arborescente. C'est assez explicite du point de vue de la hiérarchie.

1. La roue à chaîne imitera la rotation des rayons.
2. Le composant Stage est la roue arrière qui répertorie les 21 stages.
3. Le composant de détail de scène affichera les informations associées sur un chemin courbe (côté gauche).
4. Le composant d'équipe est la roue avant qui listera toutes les équipes participantes sur les rayons.
5. Le composant de détail de l'équipe affichera les informations associées sur un chemin courbe (côté droit).
6. La navigation comprendra des boutons Précédent et Suivant pour accéder aux étapes.

Le schéma ci-dessous représente les mêmes composants Vue 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 lorsque vous travaillez sur des projets similaires. Réfléchissez aux exigences d'animation et de transition que vous avez, si vous pouvez utiliser TweenLite au lieu de TweenMax, faites-le. Si vous avez la possibilité de choisir des formes élémentaires et des chemins plus simples plutôt que des chemins complexes, essayez par tous les moyens d'opter pour des éléments légers faciles à animer, sans aucune pénalité de performance.

La section suivante vous guidera à travers une partie passionnante avec l'animation GreenSock et Vue.js.

Animation GreenSock

Regardons de plus près :

1. Animation de texte sur un chemin courbe ;
2. Animation parlée sur une roue.

Rappelez-vous le chemin courbe vu autour de la roue du vélo, ce chemin courbe est légèrement plus grand que le rayon de la roue du vélo. Par conséquent, lorsque nous animons du texte sur ce chemin, il semblera qu'il suit la forme de la roue.

path et textPath est une douce combinaison d'éléments SVG qui vous permet de définir du texte sur n'importe quel chemin en utilisant xlink:href .

 <pathlanguage-javascript">curvedPath " stroke="none" fill="none" d="..."/>

<text>
  <textPath xlink:href=" #curvedPath "
          class="stageDetail"
          startOffset="0%">
          {{ stage.KEY_MOMENT }}
   </textPath>
</text>

Pour animer du texte le long du chemin, nous allons simplement animer son attribut startOffset à l'aide de GreenSock.

 tl.fromTo( ".stageDetail", 1, { opacity: 0,
  attr: { startOffset: "0%" }
},
{

  opacity: 1,
  attr: { startOffset: "10%" }

}, 0.5 );

Au fur et à mesure que vous augmentez le pourcentage startOffset , le texte se déplacera plus loin à travers le périmètre du cercle.

Dans notre projet final, cette animation est déclenchée chaque fois qu'un rayon est cliqué. Passons maintenant à une partie plus excitante de l'animation.

Animation des étapes/rayons à l'intérieur de la roue

Il ressort de la démo que les composants de stage et d' team sont de nature similaire avec quelques petites différences. Alors, concentrons-nous sur une seule roue du vélo.

L'exemple CodePen ci-dessous se concentre uniquement sur les trois idées clés :

1. Récupérer les données d'étape ;
2. Organisez les rayons de manière dynamique en fonction des données ;
3. Réorganisez les rayons lorsque la scène (rayon) est cliquée.

Vous avez peut-être remarqué dans le CodePen SVG statique ci-dessus que les rayons ne sont rien d'autre que des rectangles SVG et du texte regroupés. Je les ai regroupés car je voulais choisir à la fois du texte et un rectangle à des fins d'animation.

 <g v-for="stage in stages" class="stage">

    <rect x="249" y="250" width="215" height="1" stroke="#3F51B5" stroke-width="1"/>

    <text transform="translate(410 245)" fill="#3F51B5" >
      {{ stage.NAME }}
    </text>

</g>

Nous les afficherons dans la zone <template> du composant Vue en utilisant les valeurs extraites de la source de données.

Lorsque les 21 étapes seront disponibles à l'écran, nous définirons leurs positions initiales en appelant, disons, setSpokes() .

 // setSpokes() let stageSpokes = document.querySelectorAll(".stage") let stageAngle = 360/this.stages.length _.map(stageSpokes, (item, index) => { TweenMax.to(item, 2, { rotation: stageAngle*index, transformOrigin: "0% 100%" }, 1) }

Les trois éléments clés de la mise en scène sont :

1. Rotation
   Pour faire pivoter les rayons, nous allons simplement mapper tous les éléments avec className stage et définir la valeur de rotation dynamique calculée pour chaque rayon.
2. Transformer l'origine
   Remarquez la valeur transformOrigin dans le code ci-dessus, qui est aussi importante que la valeur d' index , car "0% 100%" permet à chaque rayon de tourner à partir du centre de la roue.
3. stageAngle
   Ceci est calculé en utilisant le nombre total d'étapes divisé par 360 degrés. Cela nous aidera à disposer tous les rayons uniformément dans un cercle à 360 degrés.

AJOUTER DE L'INTERACTIVITÉ

La prochaine étape serait d'ajouter un événement de clic à chaque étape pour le rendre interactif et réactif aux changements de données - par conséquent, il insufflera plus de vie à une image SVG !

Disons que si la scène/le rayon est cliqué, il exécute goAnimate() , qui est chargé d'activer et de faire pivoter la scène sur laquelle on clique en utilisant le paramètre stageId .

 goAnimate (stageId) { // activate stage id this.activeId = stageId // rotate spokes }

Nous utiliserons DirectionalRotationPlugin… qui est un ingrédient clé de cette interactivité. Et oui, il est inclus dans TweenMax.

Il existe trois manières différentes d'utiliser ce plugin. Il anime la propriété de rotation en 1) dans le sens des aiguilles d'une montre, 2) dans le sens inverse des aiguilles d'une montre et 3) dans la distance la plus courte calculée jusqu'à la destination.

Comme vous l'auriez deviné maintenant, nous utilisons la troisième option pour faire pivoter la distance la plus courte entre l'étape actuelle et la nouvelle étape.

Passez en revue le CodePen ci-dessus et vous verrez comment l' étape 01 se déplace constamment autour du cercle, laissant son emplacement d'origine pour une nouvelle étape active à un angle de 0 degré.

Tout d'abord, nous devons trouver l'angle d'une étape sur laquelle vous cliquez et échanger sa rotation avec Stage 01 . Alors, comment trouver la valeur de rotation de la scène sur laquelle on clique ? Consultez le diagramme ci-dessous.

Par exemple, si l'étape 05 est cliqué (comme vous pouvez le voir ci-dessus), le voyage de l' étape 01 à l' étape 05 - nécessite 4 x valeur d'angle.

Et par conséquent, nous pouvons obtenir l'angle correct en utilisant, (Active stage Id - 1) * 17 degree, suivi du suffixe de chaîne '_short' pour déclencher le plugin de rotation directionnelle.

 angle = 360/21 stages = 17 activeId = 5
new angle = ( (activeId-1) *angle)+'_short'
          = ((5-1)\*17)+'_short'
          = 68

La fonction finale goAnimate() ressemblera à ceci :

 _.map(spokes, (item, index) => { if(activeId == index+1) { // active stage TweenMax.to(item, 2, { rotation: 0+'_short', transformOrigin: "0 100%" }) } else if (index == 0) { // first stage TweenMax.to(item, 2,
    { rotation: (activeId*angle)-angle+'_short',
      transformOrigin: "0 100%"
    })

  } else {
    TweenMax.to(item, 2, 
    { rotation: index*angle+'_short', 
      transformOrigin: "0 100%"
    })
  }

}) // end of map

Une fois la roue arrière prête, la roue avant (pour l'équipe) devrait 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 l'attribut transformOrigin pour permettre la génération de rayons à partir du point d'enregistrement opposé à la roue de l'étape.

 // set team spokes map(teamSpokes, (index, key) => { TweenMax.to(index, 2, { rotation: angle*key, 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 en utilisant Vuex et Mixins.

VUEX

Vuex facilite la gestion des données partagées entre les composants et, plus important encore, il rationalise votre code, en gardant les methods et data() propres et bien rangés, laissant les composants uniquement pour rendre les données, pas pour les gérer.

Les crochets de cycle de vie sont un endroit très approprié pour effectuer toutes les requêtes HTTP. Nous récupérons les données initiales dans le crochet created , lorsque l'application Vue s'est initialisée, mais n'a pas encore été montée dans le DOM.

Les variables d'état vides, les stages et les teams sont mises à jour à l'aide de mutations à cette étape. Nous utilisons ensuite watcher (une seule fois) pour suivre ces deux variables, et dès qu'elles sont mises à jour, nous appelons le script d'animation (depuis mixin.js ).

Chaque fois que l'utilisateur interagit avec l'étape ou le composant de l'équipe, il communique avec le magasin Vuex, exécute setActiveData et met à jour les valeurs de l'étape actuelle et de l'équipe actuelle. 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 se lance pour animer (rotation directionnelle) les rayons en utilisant les valeurs mises à jour.

Lecture recommandée : Création d'entrées personnalisées avec Vue.js

Mélanges

Maintenant que les données sont gérées par Vuex, nous allons séparer les animations GreenSock. Cela évitera que nos composants Vue ne soient encombrés de longs scripts d'animation. Toutes les fonctions de GreenSock sont regroupées dans le fichier mixin.js .

Puisque vous avez accès à Vuex Store dans Mixins, toutes les fonctions GSAP utilisent des variables d' state pour animer les éléments SVG. Vous pouvez voir store.js et mixin.js entièrement fonctionnels dans l'exemple CodeSandbox ici.

Conclusion

La création d'infographies interactives et engageantes nécessite que vous soyez analytique avec les données, créatif avec les visuels et efficace avec la technologie que vous utilisez, qui dans ce cas est Vue.js. Vous pouvez continuer à utiliser ces concepts dans votre projet. En guise de conclusion, je vous laisse ci-dessous avec cette roue chromatique interactive circulaire qui utilise une idée similaire à celle dont nous avons discuté dans cet article.

Sans aucun doute, Vue.js possède de nombreuses fonctionnalités intéressantes ; nous sommes en mesure de créer des infographies interactives avec seulement quelques éléments, tels que des observateurs, des propriétés calculées, des mixins, des directives (voir l'exemple de la roue chromatique) et quelques autres méthodes. Vue.js est le ciment qui maintient efficacement les animations SVG et GreenSock, vous offrant de nombreuses possibilités d'être créatif avec n'importe quel sujet et une interactivité personnalisée en même temps.