Costruire un'infografica interattiva con Vue.js

Questo articolo presenta un approccio moderno alla creazione di un'infografica interattiva. Sicuramente puoi avere una semplice infografica con tutte le informazioni disponibili in anticipo, senza alcuna interazione da parte dell'utente. Ma pensare di costruire un'esperienza interattiva cambia il panorama tecnologico che scegliamo. Quindi, capiamo prima, perché Vue.js? E vedrai perché GSAP (GreenSock Animation Platform) e SVG (Scalable Vector Graphics) diventano scelte ovvie.

Vue.js fornisce modi pratici per creare interfacce utente dinamiche basate su componenti in cui puoi manipolare e gestire gli elementi DOM in modi potenti. In questo caso, sarà SVG. Puoi facilmente aggiornare e gestire diversi elementi SVG, in modo dinamico, utilizzando solo un piccolo sottoinsieme di funzionalità disponibili in Vue.js: alcune delle funzionalità di base che si adattano al conto qui, sono l'associazione dati, il rendering di elenchi, l'associazione dinamica di classi per nominare un pochi. Ciò ti consente anche di raggruppare elementi SVG rilevanti e di componentizzarli.

Vue.js funziona bene con le librerie esterne senza perdere la sua gloria, questo è GSAP qui. Ci sono molti altri vantaggi dell'utilizzo di Vue.js, uno dei quali è che Vue.js ti consente di isolare modelli, script e stili correlati per ciascun componente. In questo modo, Vue.js promuove la struttura dell'applicazione modulare.

Letture consigliate : Sostituzione di jQuery con Vue.js: nessun passaggio di compilazione necessario

Vue.js viene inoltre fornito con potenti hook del ciclo di vita che ti consentono di sfruttare le diverse fasi dell'applicazione per modificare il comportamento dell'applicazione. La configurazione e la gestione delle applicazioni Vue.js non richiede un grande impegno, il che significa che puoi adottare un approccio graduale per ridimensionare il tuo progetto man mano che procedi.

L'infografica è molto leggera in senso visivo, poiché l'obiettivo principale di questo articolo è imparare a pensare in termini di dati, elementi visivi e, naturalmente, Vue.js, il framework che rende possibile tutta l'interattività. Inoltre, utilizzeremo GreenSock, una libreria per l'animazione di elementi SVG. Prima di immergerci, dai un'occhiata alla demo.

Inizieremo con:

1. La panoramica dei dati per l'infografica;
2. Preparazione di immagini SVG;
3. Una panoramica dei componenti Vue nel contesto della grafica SVG;
4. Esempi di codice e diagrammi di interattività chiave.

L'infografica che costruiremo riguarda il Tour De France, l'evento annuale di corse ciclistiche che si tiene in Francia.

Panoramica dei dati del Tour De France

Nella progettazione infografica, i dati guidano il design della tua infografica. Pertanto, durante la pianificazione della progettazione dell'infografica, è sempre una buona idea avere tutti i dati, le informazioni e le statistiche disponibili per l'argomento in questione.

Durante il Tour De France del 2017, ho imparato tutto su questo più grande evento ciclistico che ho potuto in 21 giorni di gioco a luglio e ho familiarizzato con l'argomento.

Le entità di base della razza che ho deciso di seguire nel mio progetto sono,

• fasi,
• squadre,
• Itinerari,
• Vincitori,
• Lunghezza e classifiche di ogni percorso.

La prossima parte del processo dipende dal tuo stile di pensiero, quindi puoi essere creativo qui.

Ho creato due set di dati, uno per le fasi e l'altro per i team. Questi due set di dati hanno più righe di dati (ma within limit ), che corrispondevano a due ruote della bicicletta con più raggi ciascuna. E questo ha definito l'elemento chiave del design, The Bicycle Art che hai visto all'inizio, in cui ogni raggio sarà interattivo e responsabile di guidare quali informazioni vengono rivelate sullo schermo.

Ho menzionato within limits sopra, perché ciò a cui miriamo in questo caso non è una visualizzazione dei dati in piena regola nel contesto dei big data, ma piuttosto un'infografica con dati di alto livello.

Pertanto, dedica del tempo di qualità con i dati e cerca somiglianze, differenze, gerarchie o tendenze che possono aiutarti a trasmettere una storia visiva. E non dimenticare la straordinaria combinazione di SVG e Vue.js già che ci sei, poiché ti aiuterà a creare il giusto equilibrio tra informazioni (dati), interattività (Vue.js) ed elementi di design (SVG Artwork ) di infografica.

Ecco lo snippet di un oggetto dati stage:

 { "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"
}

E lo snippet dell'oggetto dati del team come di seguito:

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

Questa infografica è gestita da una logica molto semplice.

UCI_CODE (Union Cycliste Internationale) è la chiave di collegamento tra lo stage e l'oggetto team. Quando si fa clic su una fase, prima attiveremo quella fase, ma utilizzeremo anche la chiave UCI_CODE per attivare la squadra vincitrice corrispondente.

Preparazione SVG

Avendo un paio di set di dati e un concetto approssimativo di arte della bicicletta pronto, ecco il CodePen SVG statico dell'infografica che ho creato.

Abbiamo creato un solo raggio per ogni ruota, questo perché creeremo dinamicamente il resto dei raggi utilizzando un numero di record trovati nel set di dati e li animeremo utilizzando la libreria GreenSock.

Anche il flusso di lavoro per creare questo codice SVG è molto semplice. Crea la tua grafica infografica in Adobe Illustrator e salva come SVG. Assicurati di nominare ogni group e layer mentre lavori in Illustrator, perché avrai bisogno di quegli ID per separare parti del codice SVG che alla fine popoleranno l'area <template> dei componenti Vue. Ricorda che i nomi dei livelli forniti in Illustrator diventano element ids nel markup SVG.

Puoi anche utilizzare SVGOMG e ottimizzare ulteriormente il codice SVG esportato da Adobe Illustrator.

Nota importante: se usi SVGOMG per ottimizzare il markup SVG, il tuo codice apparirà sicuramente pulito, ma nota che convertirà tutti gli elementi <rect> in <path> con l'attributo d . Ciò si traduce nella perdita y x rettangolo, nel caso in cui desideri regolare manualmente alcuni pixel in un secondo momento.

Seconda cosa, assicurati di deselezionare l'opzione Clean Id (opzioni sul lato destro nell'interfaccia SVGOMG), questo aiuterà a mantenere intatti tutti i gruppi e gli ID creati in Illustrator.

Panoramica dei componenti Vue

Anche se l'interattività e il flusso di dati nel tuo progetto di infografica sono di natura abbastanza semplice, dovresti sempre prenderti un momento per disegnare un diagramma ad albero dei componenti.

Ciò sarà particolarmente d'aiuto nel caso in cui non si utilizzi alcun meccanismo di dati condivisi, in cui i componenti figlio dipendono dai valori inviati dal componente genitore (ad esempio tramite props) o viceversa (ad esempio this.$emit events). Questa è la tua occasione per fare un brainstorming su questi valori prop, emettere eventi e dati locali e documentarli prima di iniziare a scrivere il codice.

Il diagramma sopra è l'istantanea dei componenti Vue che è in parte derivata dai requisiti di interattività e in parte basata sul markup SVG. Dovresti essere in grado di vedere come verrà suddiviso il markup SVG in base a questa struttura ad albero. È abbastanza autoesplicativo dal punto di vista della gerarchia.

1. La ruota a catena imiterà la rotazione dei raggi.
2. Il componente della fase è la ruota posteriore che elencherà tutte le 21 fasi.
3. Il componente Stage-detail visualizzerà le informazioni correlate su un percorso curvo (lato sinistro).
4. Il componente della squadra è la ruota anteriore che elencherà tutte le squadre partecipanti sui raggi.
5. Il componente Dettagli squadra visualizzerà le informazioni correlate su un percorso curvo (lato destro).
6. La navigazione includerà il pulsante Indietro e Avanti per accedere alle fasi.

Il diagramma seguente rappresenta gli stessi componenti Vue visti sopra, ma nel contesto del design dell'infografica.

Less is more — dovrebbe essere l'approccio che dovresti provare ad adottare mentre lavori su progetti simili. Pensa ai requisiti di animazione e transizione che hai, se riesci a farla franca usando TweenLite invece di TweenMax, fallo. Se hai la possibilità di scegliere forme elementari e percorsi più semplici su quelli complessi, prova a optare per elementi leggeri che sono facili da animare, senza alcuna penalizzazione delle prestazioni.

La prossima sezione ti guiderà attraverso una parte emozionante con l'animazione di GreenSock e Vue.js.

Animazione GreenSock

Diamo un'occhiata più da vicino a:

1. Animazione del testo su un percorso curvo;
2. Animazione parlata su una ruota.

Ricorda il percorso curvo visto attorno alla ruota della bicicletta, quel percorso curvo è leggermente più grande del raggio della ruota della bicicletta. Pertanto, quando animiamo il testo su questo percorso, sembrerà che segua la forma della ruota.

path e textPath è una dolce combinazione di elementi SVG che ti consente di impostare il testo su qualsiasi percorso usando l'attributo xlink:href .

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

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

Per animare il testo lungo il percorso, animeremo semplicemente il suo attributo startOffset usando GreenSock.

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

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

}, 0.5 );

Aumentando la percentuale startOffset , il testo viaggerà ulteriormente lungo il perimetro del cerchio.

Nel nostro progetto finale, questa animazione viene attivata ogni volta che si fa clic su un raggio. Ora, passiamo a una parte più eccitante dell'animazione.

Fasi/raggi animati all'interno della ruota

È visibile dalla demo che i componenti dello stage e del team sono di natura simile con un paio di piccole differenze. Quindi, concentriamoci su una sola ruota della bicicletta.

L'esempio CodePen di seguito ingrandisce solo le tre idee chiave:

1. Recupera i dati della fase;
2. Disporre i raggi in modo dinamico in base ai dati;
3. Riorganizzare i raggi quando si fa clic sul livello (raggio).

Potresti aver notato nella CodePen SVG statica sopra che i raggi non sono altro che rettangoli SVG e testo raggruppati insieme. Li ho raggruppati insieme poiché volevo scegliere sia il testo che il rettangolo ai fini dell'animazione.

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

Li renderemo nell'area <template> del componente Vue usando i valori recuperati dall'origine dati.

Quando tutte le 21 fasi saranno disponibili sullo schermo, imposteremo le loro posizioni iniziali chiamando, diciamo, 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) }

Tre elementi chiave per preparare la scena sono:

1. Rotazione
   Per ruotare i raggi, mapperemo semplicemente tutti gli elementi con className stage e imposteremo il valore di rotation dinamico calcolato per ogni raggio.
2. Trasforma origine
   Notare il valore transformOrigin nel codice sopra, che è importante quanto il valore index , perché "0% 100%" consente a ciascun raggio di ruotare dal centro della ruota.
3. stageAngle
   Questo viene calcolato utilizzando il numero totale di fasi diviso per 360 gradi. Questo ci aiuterà a posizionare tutti i raggi in modo uniforme in un cerchio di 360 gradi.

AGGIUNGERE INTERATTIVITÀ

Il passo successivo sarebbe aggiungere un evento clic su ogni fase per renderlo interattivo e reattivo alle modifiche dei dati, quindi darà più vita a un'immagine SVG!

Diciamo che se si fa clic su stage/spoke, viene eseguito goAnimate() , che è responsabile dell'attivazione e della rotazione dello stage su cui si fa clic utilizzando il parametro stageId .

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

Useremo DirectionalRotationPlugin... che è un ingrediente chiave per questa interattività. E sì, è incluso in TweenMax.

Ci sono tre modi diversi di usare questo plugin. Anima la proprietà di rotazione in 1) in senso orario, 2) in senso antiorario e 3) nella distanza più breve calcolata dalla destinazione.

Come avrai già intuito, stiamo usando la terza opzione per ruotare la distanza più breve tra la fase attuale e la nuova fase.

Esamina CodePen sopra e vedrai come Stage 01 si muove costantemente attorno al cerchio, lasciando il suo punto originale per il nuovo stadio attivo con un angolo di 0 gradi.

Innanzitutto, dobbiamo trovare l'angolo di uno stage su cui si fa clic e scambiare la sua rotazione con Stage 01 . Quindi, come troviamo il valore di rotazione della fase su cui si fa clic? Dai un'occhiata allo schema qui sotto.

Ad esempio, se si fa clic su Stage 05 (come puoi vedere sopra), il viaggio dallo Stage 01 allo Stage 05 richiede 4 x valore angolare.

E quindi, possiamo ottenere l'angolo corretto usando, (Active stage Id - 1) * 17 degree, seguito dal suffisso della stringa '_short' per attivare il plug-in di rotazione direzionale.

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

La funzione finale goAnimate() sarà simile a quella seguente:

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

Una volta pronta la ruota posteriore, la ruota anteriore (per il team) dovrebbe seguire la stessa logica con un paio di modifiche.

Invece di stage, recupereremo i dati del team e aggiorneremo il punto di registrazione dell'attributo transformOrigin per consentire la generazione dei raggi da un punto di registrazione opposto rispetto alla ruota dello stage.

 // set team spokes map(teamSpokes, (index, key) => { TweenMax.to(index, 2, { rotation: angle*key, transformOrigin: "100% 100%" }, 1) })

Progetto finale

Come me, se hai scritto tutte le animazioni e le funzioni relative ai dati nei componenti Vue stessi. È ora di ripulirli usando Vuex e Mixins.

VUEX

Vuex semplifica la gestione dei dati condivisi tra i componenti e, cosa più importante, snellisce il codice, mantenendo methods e data() puliti e ordinati, lasciando i componenti solo a eseguire il rendering dei dati, non a gestirli.

Gli hook del ciclo di vita sono un luogo molto adatto per eseguire qualsiasi richiesta HTTP. Recuperiamo i dati iniziali nell'hook created , quando l'applicazione Vue è stata inizializzata, ma non è stata ancora montata nel DOM.

Le variabili di stato vuote, le stages e i teams vengono aggiornati utilizzando le mutazioni in questa fase. Quindi, utilizziamo watcher (solo una volta) per tenere traccia di queste due variabili e, non appena vengono aggiornate, chiamiamo lo script di animazione (da mixin.js ).

Ogni volta che l'utente interagisce con il componente della fase o del team, comunicherà con il negozio Vuex, eseguirà setActiveData e aggiornerà i valori della fase e del team correnti. È così che impostiamo i dati attivi.

E quando i dati attivi vengono impostati dopo l'aggiornamento dello stato, goAnimate avvierà l'animazione (ruota direzionale) dei raggi utilizzando i valori aggiornati.

Lettura consigliata : Creazione di input personalizzati con Vue.js

Miscele

Ora che i dati sono gestiti da Vuex, separeremo le animazioni di GreenSock. Ciò eviterà che i nostri componenti Vue siano ingombrati da lunghi script di animazione. Tutte le funzioni di GreenSock sono raggruppate nel file mixin.js .

Poiché hai accesso a Vuex Store all'interno di Mixins, tutte le funzioni GSAP utilizzano variabili di state per animare gli elementi SVG. Puoi vedere store.js e mixin.js completamente funzionanti nell'esempio CodeSandbox qui.

Conclusione

La creazione di infografiche interattive e coinvolgenti richiede che tu sia analitico con i dati, creativo con le immagini ed efficiente con la tecnologia che usi, che in questo caso è Vue.js. Puoi utilizzare ulteriormente questi concetti nel tuo progetto. Come nota di chiusura, ti lascio con questa ruota dei colori interattiva circolare di seguito che utilizza un'idea simile a quella di cui abbiamo discusso in questo articolo.

Senza dubbio, Vue.js ha molte fantastiche funzionalità; siamo in grado di creare infografiche interattive con poche cose, come osservatori, proprietà calcolate, mixin, direttiva (vedi esempio di ruota dei colori) e pochi altri metodi. Vue.js è il collante che tiene insieme l'animazione SVG e GreenSock in modo efficiente, offrendoti ampie opportunità di essere creativo con qualsiasi numero di argomenti e interattività personalizzata allo stesso tempo.