Fermer

novembre 19, 2018

Construire une infographie interactive avec Vue.js17 minutes de lecture

Construire une infographie interactive avec Vue.js - Smashing Magazine


À 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.

Lectures recommandées : Remplacement de jQuery par Vue.js: aucune étape de construction n'est nécessaire

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:

  1. Vue d'ensemble des données pour infographie;
  2. Préparation d'image SVG;
  3. Vue d'ensemble des composants Vue dans le contexte de l'illustration SVG;
  4. É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.


 Créez une infographie interactive avec Vue.js, SVG et GreenSock
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:

 {
    "ID": 1, 
     "UCI_CODE": "SKY", 
     "NOM": "TEAM SKY", 
     "COUNTR": "Grande-Bretagne", 
     "STAGE_VICTORIES": 1, 
     "RIDERS": 8 
} 

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.

Voir le stylo Bicyclette statique SVG de Krutie ( @krutie ) sur CodePen .

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