Erstellen einer interaktiven Infografik mit Vue.js

Dieser Artikel stellt einen modernen Ansatz zum Erstellen einer interaktiven Infografik vor. Sie können sicher eine einfache Infografik mit allen verfügbaren Informationen im Voraus haben – ohne jegliche Benutzerinteraktion. Aber wenn wir daran denken, ein interaktives Erlebnis zu schaffen, ändert sich die Technologielandschaft, die wir wählen. Lassen Sie uns daher zuerst verstehen, warum Vue.js? Und Sie werden sehen, warum GSAP (GreenSock Animation Platform) und SVG (Scalable Vector Graphics) zur offensichtlichen Wahl werden.

Vue.js bietet praktische Möglichkeiten zum Erstellen komponentenbasierter, dynamischer Benutzeroberflächen, in denen Sie DOM-Elemente auf leistungsstarke Weise manipulieren und verwalten können. In diesem Fall wird es SVG sein. Sie können verschiedene SVG-Elemente problemlos dynamisch aktualisieren und verwalten, indem Sie nur eine kleine Teilmenge der in Vue.js verfügbaren Funktionen verwenden. Einige der Grundfunktionen, die hier ins Spiel kommen, sind Datenbindung, Listenwiedergabe, dynamische Klassenbindung, um nur einige zu nennen wenig. Auf diese Weise können Sie auch relevante SVG-Elemente zusammenfassen und in Komponenten zerlegen.

Vue.js spielt gut mit externen Bibliotheken, ohne seinen Glanz zu verlieren, das ist hier GSAP. Die Verwendung von Vue.js bietet viele weitere Vorteile. Einer davon ist, dass Sie mit Vue.js verwandte Vorlagen, Skripte und Stile für jede Komponente isolieren können. Auf diese Weise fördert Vue.js eine modulare Anwendungsstruktur.

Empfohlene Lektüre : Ersetzen von jQuery durch Vue.js: Kein Build-Schritt erforderlich

Vue.js ist außerdem mit leistungsstarken Lifecycle-Hooks ausgestattet, mit denen Sie die verschiedenen Phasen der Anwendung nutzen können, um das Anwendungsverhalten zu ändern. Das Einrichten und Warten von Vue.js-Anwendungen erfordert keine große Verpflichtung, sodass Sie Ihr Projekt schrittweise skalieren können.

Die Infografik ist im visuellen Sinne sehr leicht, da das Hauptziel dieses Artikels darin besteht, zu lernen, wie man in Bezug auf Daten, visuelle Elemente und natürlich Vue.js denkt – das Framework, das die gesamte Interaktivität ermöglicht. Außerdem verwenden wir GreenSock, eine Bibliothek zum Animieren von SVG-Elementen. Bevor wir eintauchen, werfen Sie einen Blick auf die Demo.

Wir beginnen mit:

1. Die Übersicht der Daten für die Infografik;
2. SVG-Bildvorbereitung;
3. Eine Übersicht über die Vue-Komponenten im Zusammenhang mit dem SVG-Artwork;
4. Codebeispiele und Diagramme der wichtigsten Interaktivität.

Die Infografik, die wir erstellen werden, handelt von der Tour de France, dem jährlichen Radrennen, das in Frankreich stattfindet.

Übersicht der Tour de France-Daten

Beim Infografik-Design bestimmen Daten das Design Ihrer Infografik. Daher ist es bei der Planung Ihres Infografik-Designs immer eine gute Idee, alle Daten, Informationen und Statistiken für das jeweilige Thema zur Verfügung zu haben.

Während der Tour de France 2017 habe ich in 21 Spieltagen im Juli alles über dieses größte Radsport-Event gelernt und mich mit dem Thema vertraut gemacht.

Grundlegende Wesenheiten der Rasse, für die ich mich in meinem Design entschieden habe, sind:

• Stufen,
• Mannschaften,
• Routen,
• Gewinner,
• Länge und Klassifizierung der einzelnen Routen.

Dieser nächste Teil des Prozesses hängt von Ihrem Denkstil ab, sodass Sie hier kreativ sein können.

Ich habe zwei Datensätze erstellt, einen für Etappen und einen für Teams. Diese beiden Datensätze haben mehrere Datenzeilen (aber within limit ) – die mit zwei Rädern des Fahrrads mit jeweils mehreren Speichen übereinstimmten. Und das definierte das Schlüsselelement des Designs, The Bicycle Art , das Sie zu Beginn gesehen haben – wo jede Speiche interaktiv und verantwortlich dafür ist, welche Informationen auf dem Bildschirm angezeigt werden.

Ich habe es oben within limits erwähnt, denn was wir in diesem Fall anstreben, ist keine vollständige Datenvisualisierung im Kontext von Big Data, sondern eine Infografik mit High-Level-Daten.

Verbringen Sie daher wertvolle Zeit mit Daten und suchen Sie nach Ähnlichkeiten, Unterschieden, Hierarchien oder Trends, die Ihnen helfen können, eine visuelle Geschichte zu vermitteln. Und vergessen Sie nicht die erstaunliche Kombination von SVG und Vue.js, wenn Sie gerade dabei sind, denn sie wird Ihnen helfen, das richtige Gleichgewicht zwischen Informationen (Daten), Interaktivität (Vue.js) und Designelementen (SVG Artwork) herzustellen ) der Infografik.

Hier ist das Snippet eines Stage-Datenobjekts:

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

Und Teamdatenobjekt-Snippet wie folgt:

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

Diese Infografik funktioniert nach einer sehr einfachen Logik.

UCI_CODE (Union Cycliste Internationale) ist der Verbindungsschlüssel zwischen der Etappe und dem Teamobjekt. Wenn auf eine Stufe geklickt wird, aktivieren wir zuerst diese Stufe, verwenden aber auch den UCI_CODE Schlüssel, um das entsprechende Gewinnerteam zu aktivieren.

SVG-Vorbereitung

Nachdem ich ein paar Datensätze und ein grobes Konzept der Fahrradkunst fertig habe, ist hier der statische SVG-CodePen der Infografik, die ich mir ausgedacht habe.

Wir haben nur eine Speiche für jedes Rad erstellt, das liegt daran, dass wir die restlichen Speichen dynamisch erstellen, indem wir eine Reihe von Datensätzen verwenden, die im Datensatz gefunden werden, und sie mit der GreenSock-Bibliothek animieren.

Der Arbeitsablauf zum Erstellen dieses SVG-Codes ist ebenfalls sehr einfach. Erstellen Sie Ihre Infografik in Adobe Illustrator und speichern Sie sie als SVG. Stellen Sie sicher, dass Sie jede group und layer benennen, während Sie in Illustrator arbeiten, da Sie diese IDs benötigen, um Teile des SVG-Codes zu trennen, die schließlich den <template> -Bereich von Vue-Komponenten füllen. Denken Sie daran, dass in Illustrator angegebene Ebenennamen zu element ids im SVG-Markup werden.

Sie können auch SVGOMG verwenden und den aus Adobe Illustrator exportierten SVG-Code weiter optimieren.

Wichtiger Hinweis: Wenn Sie SVGOMG verwenden, um SVG-Markup zu optimieren, wird Ihr Code sicherlich ordentlich aussehen, aber beachten Sie, dass er alle <rect>-Elemente in <path> mit d -Attribut umwandelt. Dies führt dazu, dass die x und y -Werte des Rechtecks ​​verloren gehen, falls Sie später einige Pixel manuell anpassen möchten.

Zweitens: Stellen Sie sicher, dass Sie die Option Clean Id deaktivieren (Optionen auf der rechten Seite in der SVGOMG-Oberfläche). Dadurch bleiben alle Gruppen und IDs intakt, die in Illustrator erstellt wurden.

Überblick über die Vue-Komponenten

Auch wenn Interaktivität und Datenfluss in Ihrem Infografik-Projekt recht einfach sind, sollten Sie sich immer einen Moment Zeit nehmen, um ein Baumdiagramm der Komponenten zu erstellen.

Dies ist besonders hilfreich, wenn Sie keinen Shared-Data-Mechanismus verwenden, bei dem untergeordnete Komponenten von den Werten abhängen, die von der übergeordneten Komponente gesendet werden (dh über Props) oder umgekehrt (dh this.$emit-Ereignisse). Dies ist Ihre Chance, diese Prop-Werte zu brainstormen, Ereignisse und lokale Daten auszugeben – und sie zu dokumentieren, bevor Sie mit dem Schreiben des Codes beginnen.

Das obige Diagramm ist eine Momentaufnahme von Vue-Komponenten, die teilweise von Interaktivitätsanforderungen abgeleitet ist und teilweise auf SVG-Markup basiert. Sie sollten sehen können, wie das SVG-Markup basierend auf dieser Baumstruktur aufgeteilt wird. Aus Sicht der Hierarchie ist es ziemlich selbsterklärend.

1. Das Kettenrad ahmt die Drehung der Speichen nach.
2. Die Bühnenkomponente ist das Hinterrad, das alle 21 Etappen auflistet.
3. Die Phase-Detail-Komponente zeigt zugehörige Informationen auf einem gekrümmten Pfad an (linke Seite).
4. Die Teamkomponente ist das Vorderrad, das alle teilnehmenden Teams auf Speichen auflistet.
5. Die Team-Detail-Komponente zeigt zugehörige Informationen auf einem gekrümmten Pfad (rechte Seite).
6. Die Navigation umfasst die Schaltflächen „Zurück“ und „Weiter“, um auf die Stufen zuzugreifen.

Das folgende Diagramm stellt dieselben Vue-Komponenten wie oben dar, jedoch im Kontext des Infografik-Designs.

Weniger ist mehr – sollte der Ansatz sein, den Sie bei der Arbeit an ähnlichen Projekten verfolgen sollten. Denken Sie über die Animations- und Übergangsanforderungen nach, die Sie haben, wenn Sie mit der Verwendung von TweenLite anstelle von TweenMax davonkommen – tun Sie dies. Wenn Sie die Möglichkeit haben, elementare Formen und einfachere Pfade gegenüber komplexen zu wählen – versuchen Sie auf jeden Fall, sich für leichte Elemente zu entscheiden, die einfach zu animieren sind – ohne Leistungseinbußen.

Der nächste Abschnitt führt Sie durch einen spannenden Teil mit GreenSock-Animation und Vue.js.

GreenSock-Animation

Schauen wir uns genauer an:

1. Textanimation auf einem gekrümmten Pfad;
2. Sprachanimation auf einem Rad.

Erinnern Sie sich an den gekrümmten Pfad um das Fahrradrad herum, dieser gekrümmte Pfad ist etwas größer als der Radius des Fahrradrads. Wenn wir also Text auf diesem Pfad animieren, sieht es so aus, als würde er der Form des Rads folgen.

path und textPath ist eine süße Kombination aus SVG-Elementen, mit der Sie mithilfe des xlink:href -Attributs Text auf jedem Pfad setzen können.

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

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

Um Text entlang des Pfads zu animieren, animieren wir einfach sein startOffset Attribut mit GreenSock.

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

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

}, 0.5 );

Wenn Sie den startOffset Prozentsatz erhöhen, wandert der Text weiter durch den Kreisumfang.

In unserem letzten Projekt wird diese Animation jedes Mal ausgelöst, wenn auf eine beliebige Speiche geklickt wird. Kommen wir nun zu einem spannenderen Teil der Animation.

Stufen/Speichen im Rad animieren

Aus der Demo geht hervor, dass die stage und team ähnlich sind, mit einigen kleinen Unterschieden. Konzentrieren wir uns also auf nur ein Rad des Fahrrads.

Das CodePen-Beispiel unten zoomt nur auf die drei Schlüsselideen:

1. Bühnendaten abrufen;
2. Ordnen Sie Speichen dynamisch basierend auf den Daten an;
3. Speichen neu anordnen, wenn Stufe (Speiche) angeklickt wird.

Sie haben vielleicht im statischen SVG-CodePen oben bemerkt, dass die Speichen nichts anderes als SVG-Rechtecke und zusammen gruppierter Text sind. Ich habe sie gruppiert, da ich zum Zweck der Animation sowohl Text als auch Rechteck auswählen wollte.

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

Wir rendern sie im <template> -Bereich der Vue-Komponente unter Verwendung von Werten, die aus der Datenquelle abgerufen werden.

Wenn alle 21 Stufen auf dem Bildschirm verfügbar sind, legen wir ihre Anfangspositionen fest, indem wir 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) }

Drei Schlüsselelemente für die Bühnengestaltung sind:

1. Drehung
   Um Speichen zu drehen, ordnen wir einfach alle Elemente mit className stage und legen den dynamischen rotation fest, der für jede Speiche berechnet wird.
2. Ursprung umwandeln
   Beachten Sie den transformOrigin -Wert im obigen Code, der genauso wichtig ist wie der index , da „0 % 100 %“ ermöglicht, dass sich jede Speiche von der Mitte des Rads aus dreht.
3. Bühnenwinkel
   Dies wird anhand der Gesamtzahl der Stufen geteilt durch 360 Grad berechnet. Dies wird uns helfen, alle Speichen gleichmäßig in einem 360-Grad-Kreis zu platzieren.

INTERAKTIVITÄT HINZUFÜGEN

Der nächste Schritt wäre das Hinzufügen von Klick-Ereignissen auf jeder Stufe, um es interaktiv und reaktiv auf Datenänderungen zu machen – daher wird es einem SVG-Bild mehr Leben einhauchen!

Nehmen wir an, wenn auf Stage/Spoke geklickt wird, wird goAnimate() ausgeführt, das dafür verantwortlich ist, die angeklickte Bühne mit dem stageId -Parameter zu aktivieren und zu drehen.

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

Wir verwenden das DirectionalRotationPlugin … das ist ein wichtiger Bestandteil für diese Interaktivität. Und ja, es ist in TweenMax enthalten.

Es gibt drei verschiedene Möglichkeiten, dieses Plugin zu verwenden. Es animiert die Rotationseigenschaft in 1) im Uhrzeigersinn, 2) gegen den Uhrzeigersinn und 3) in kürzester Entfernung zum Ziel zu berechnen.

Wie Sie bereits erraten haben, verwenden wir die dritte Option, um die kürzeste Entfernung zwischen der aktuellen Phase und der neuen Phase zu rotieren.

Sehen Sie sich den CodePen oben an und Sie werden sehen, wie sich Bühne 01 ständig um den Kreis bewegt und ihren ursprünglichen Platz für eine neue aktive Bühne in einem Winkel von 0 Grad verlässt.

Zuerst müssen wir den Winkel einer Stufe finden, auf die geklickt wird, und ihre Drehung mit Stufe 01 austauschen. Wie finden wir also den Rotationswert der angeklickten Bühne? Schauen Sie sich das Diagramm unten an.

Wenn zum Beispiel Etappe 05 angeklickt wird (wie Sie oben sehen können), erfordert die Reise von Etappe 01 zu Etappe 05 — den 4-fachen Winkelwert.

Und deshalb können wir den richtigen Winkel erhalten, indem wir (Active stage Id - 1) * 17 degree, gefolgt von einem '_short'-String-Postfix, um das Richtungsrotations-Plugin auszulösen.

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

Die endgültige Funktion goAnimate() sieht in etwa so aus:

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

Sobald wir das Hinterrad bereit haben, sollte das Vorderrad (für das Team) mit ein paar Änderungen der gleichen Logik folgen.

Anstelle der Bühne rufen wir Teamdaten ab und aktualisieren den Registrierungspunkt des transformOrigin -Attributs, um die Speichengenerierung vom gegenüberliegenden Registrierungspunkt als dem Bühnenrad zu ermöglichen.

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

Abschlussprojekt

Wie ich, wenn Sie alle Animations- und datenbezogenen Funktionen in Vue-Komponenten selbst geschrieben haben. Es ist an der Zeit, sie mit Vuex und Mixins zu bereinigen.

VUEX

Vuex vereinfacht die Verwaltung gemeinsam genutzter Daten zwischen Komponenten und, was noch wichtiger ist, es rationalisiert Ihren Code, indem es methods und data() sauber und ordentlich hält, sodass Komponenten nur zum Rendern der Daten und nicht zum Verarbeiten übrig bleiben.

Lebenszyklus-Hooks sind ein sehr geeigneter Ort, um HTTP-Anforderungen auszuführen. Wir rufen Anfangsdaten im created Hook ab, wenn die Vue-Anwendung initialisiert, aber noch nicht in das DOM gemountet wurde.

Leere Zustandsvariablen, stages und teams werden in dieser Stufe durch Mutationen aktualisiert. Wir verwenden dann watcher (nur einmal), um diese beiden Variablen zu verfolgen, und sobald sie aktualisiert sind, rufen wir das Animationsskript (aus mixin.js ) auf.

Jedes Mal, wenn der Benutzer mit der Bühnen- oder Teamkomponente interagiert, kommuniziert er mit dem Vuex-Speicher, führt setActiveData aus und aktualisiert die aktuellen Bühnen- und aktuellen Teamwerte. So setzen wir aktive Daten.

Und wenn die aktiven Daten nach der Zustandsaktualisierung festgelegt werden, goAnimate ein, um Speichen mit aktualisierten Werten zu animieren (Richtungsrotation).

Empfohlene Lektüre : Erstellen benutzerdefinierter Eingaben mit Vue.js

Mixins

Nachdem die Daten nun von Vuex verarbeitet werden, trennen wir GreenSock-Animationen. Dadurch wird verhindert, dass unsere Vue-Komponenten mit langen Animationsskripten überladen werden. Alle GreenSock-Funktionen sind in der Datei mixin.js zusammengefasst.

Da Sie innerhalb von Mixins Zugriff auf Vuex Store haben, verwenden alle GSAP-Funktionen state , um SVG-Elemente zu animieren. Sie können die voll funktionsfähigen store.js und mixin.js im CodeSandbox-Beispiel hier sehen.

Fazit

Das Erstellen interaktiver und ansprechender Infografiken erfordert, dass Sie mit den Daten analytisch, kreativ mit visuellen Elementen und effizient mit der von Ihnen verwendeten Technologie umgehen, die in diesem Fall Vue.js ist. Sie können diese Konzepte in Ihrem Projekt weiterverwenden. Als Schlussbemerkung überlasse ich Ihnen unten dieses kreisförmige interaktive Farbrad, das eine ähnliche Idee verwendet wie die, die wir in diesem Artikel besprochen haben.

Ohne Zweifel hat Vue.js viele großartige Funktionen; Wir sind in der Lage, interaktive Infografiken mit nur wenigen Dingen zu erstellen, wie z. B. Beobachtern, berechneten Eigenschaften, Mixins, Direktiven (siehe Farbradbeispiel) und einigen anderen Methoden. Vue.js ist der Klebstoff, der sowohl die SVG- als auch die GreenSock-Animation effizient zusammenhält und Ihnen reichlich Gelegenheit gibt, gleichzeitig mit einer beliebigen Anzahl von Themen und benutzerdefinierten Interaktivitäten kreativ zu sein.