Membangun Infografis Interaktif Dengan Vue.js

Artikel ini menyajikan pendekatan modern untuk membangun infografis interaktif. Anda pasti dapat memiliki infografis polos dengan semua informasi yang tersedia di muka — tanpa interaksi pengguna apa pun. Namun, berpikir untuk membangun pengalaman interaktif — mengubah lanskap teknologi yang kita pilih. Oleh karena itu, mari kita pahami dulu, mengapa Vue.js? Dan Anda akan melihat mengapa GSAP (GreenSock Animation Platform) dan SVG (Scalable Vector Graphics) menjadi pilihan yang jelas.

Vue.js menyediakan cara praktis untuk membangun antarmuka pengguna dinamis berbasis komponen tempat Anda dapat memanipulasi dan mengelola elemen DOM dengan cara yang canggih. Dalam hal ini, itu akan menjadi SVG. Anda dapat dengan mudah memperbarui dan mengelola elemen SVG yang berbeda — secara dinamis — hanya menggunakan sebagian kecil fitur yang tersedia di Vue.js — beberapa fitur pokok yang sesuai dengan tagihan di sini, adalah, pengikatan data, rendering daftar, pengikatan kelas dinamis ke nama a sedikit. Ini juga memungkinkan Anda untuk mengelompokkan elemen SVG yang relevan bersama-sama, dan menyusunnya.

Vue.js bermain bagus dengan perpustakaan eksternal tanpa kehilangan kejayaannya, yaitu GSAP di sini. Ada banyak manfaat lain menggunakan Vue.js, salah satunya adalah, Vue.js memungkinkan Anda untuk mengisolasi template, skrip, dan gaya terkait untuk setiap komponen. Dengan cara ini, Vue.js mempromosikan struktur aplikasi modular.

Bacaan yang disarankan : Mengganti jQuery Dengan Vue.js: Tidak Perlu Langkah Pembuatan

Vue.js juga dikemas dengan kait siklus hidup yang kuat yang memungkinkan Anda memasuki berbagai tahap aplikasi untuk mengubah perilaku aplikasi. Menyiapkan dan memelihara aplikasi Vue.js tidak memerlukan komitmen yang besar, artinya Anda dapat mengambil pendekatan bertahap untuk menskalakan proyek Anda saat berjalan.

Infografis sangat ringan dalam arti visual, karena tujuan utama artikel ini adalah untuk mempelajari cara berpikir dalam hal data, elemen visual, dan tentu saja, Vue.js — kerangka kerja yang memungkinkan semua interaktivitas. Selain itu, kami akan menggunakan GreenSock, perpustakaan untuk menganimasikan elemen SVG. Sebelum kita menyelam, lihat demonya.

Kami akan mulai dengan:

1. Gambaran umum data untuk infografis;
2. persiapan gambar SVG;
3. Tinjauan komponen Vue dalam konteks karya seni SVG;
4. Contoh kode dan diagram interaktivitas utama.

Infografis yang akan kami buat adalah tentang Tour De France, event balap sepeda tahunan yang diadakan di Prancis.

Ikhtisar Data Tour De France

Dalam desain infografis, data mendorong desain infografis Anda. Oleh karena itu, saat merencanakan desain infografis Anda, selalu ada baiknya untuk memiliki semua data, informasi, dan statistik yang tersedia untuk materi pelajaran yang diberikan.

Selama Tour De France tahun 2017, saya mempelajari segala sesuatu tentang acara bersepeda terbesar yang saya dapat dalam 21 hari pertandingan di bulan Juli, dan saya membiasakan diri dengan subjek tersebut.

Entitas dasar dari balapan yang saya putuskan dalam desain saya adalah,

• Tahapan,
• tim,
• Rute,
• Pemenang,
• Panjang dan klasifikasi masing-masing rute.

Bagian selanjutnya dari proses ini tergantung pada gaya berpikir Anda, jadi Anda bisa berkreasi di sini.

Saya membuat dua set data, satu untuk tahapan dan lainnya untuk tim. Kedua kumpulan data ini memiliki beberapa baris data (tetapi within limit ) — yang dicocokkan dengan dua roda sepeda dengan beberapa jari-jari di masing-masingnya. Dan itu mendefinisikan elemen kunci dari desain, The Bicycle Art yang Anda lihat di awal — di mana setiap pembicaraan akan interaktif & bertanggung jawab untuk mendorong informasi apa yang terungkap di layar.

Saya sebutkan within limits di atas, karena apa yang kami tuju dalam hal ini bukanlah visualisasi data lengkap dalam konteks data besar melainkan infografis dengan data tingkat tinggi.

Oleh karena itu, habiskan waktu berkualitas dengan data dan cari persamaan, perbedaan, hierarki, atau tren yang dapat membantu Anda menyampaikan cerita visual. Dan jangan lupa tentang kombinasi menakjubkan SVG dan Vue.js saat Anda melakukannya, karena ini akan membantu Anda mewujudkan keseimbangan yang tepat antara informasi (data), interaktivitas (Vue.js) dan elemen desain (SVG Artwork ) dari infografis.

Berikut cuplikan objek data panggung:

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

Dan cuplikan objek data tim seperti di bawah ini:

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

Infografis ini dioperasikan dengan logika yang sangat sederhana.

UCI_CODE (Union Cycliste Internationale) adalah kunci penghubung antara panggung dan objek tim. Ketika suatu tahap diklik, pertama-tama kami akan mengaktifkan tahap itu, tetapi juga menggunakan kunci UCI_CODE untuk mengaktifkan tim pemenang yang sesuai.

Persiapan SVG

Setelah beberapa kumpulan data dan konsep kasar seni sepeda siap, inilah SVG CodePen statis dari infografis yang saya buat.

Kami hanya membuat satu jari-jari untuk setiap roda, itu karena kami akan secara dinamis membuat sisa jari-jari menggunakan sejumlah catatan yang ditemukan dalam kumpulan data, dan menganimasikannya menggunakan Perpustakaan GreenSock.

Alur kerja untuk membuat kode SVG ini juga sangat sederhana. Buat karya seni Infografis Anda di Adobe Illustrator dan simpan sebagai SVG. Pastikan untuk memberi nama setiap group dan layer saat bekerja di Illustrator, karena Anda akan memerlukan id tersebut untuk memisahkan bagian kode SVG yang pada akhirnya akan mengisi area <template> komponen Vue. Ingat bahwa nama layer yang diberikan di Illustrator menjadi element ids di markup SVG.

Anda juga dapat menggunakan SVGOMG dan lebih mengoptimalkan kode SVG yang diekspor dari Adobe Illustrator.

Catatan Penting: Jika Anda menggunakan SVGOMG untuk mengoptimalkan markup SVG, kode Anda pasti akan terlihat rapi, tetapi perhatikan bahwa itu akan mengubah semua elemen <rect> menjadi <path> dengan atribut d . Ini mengakibatkan hilangnya nilai x dan y dari persegi panjang, jika Anda ingin menyesuaikan beberapa piksel secara manual nanti.

Hal kedua, pastikan untuk menghapus centang pada opsi Clean Id (opsi sisi kanan di antarmuka SVGOMG), ini akan membantu menjaga semua grup dan id tetap utuh yang dibuat di Illustrator.

Ikhtisar Komponen Vue

Meskipun interaktivitas dan aliran data dalam proyek infografis Anda cukup sederhana, Anda harus selalu meluangkan waktu untuk membuat diagram pohon komponen.

Ini terutama akan membantu jika Anda tidak menggunakan mekanisme data bersama, di mana komponen turunan bergantung pada nilai yang dikirim dari komponen induk (yaitu melalui alat peraga) atau sebaliknya (yaitu peristiwa this.$emit). Ini adalah kesempatan Anda untuk melakukan brainstorming nilai-nilai prop ini, memancarkan peristiwa dan data lokal — dan mendokumentasikannya sebelum mulai menulis kode.

Diagram di atas adalah snapshot dari komponen Vue yang sebagian berasal dari persyaratan interaktivitas dan sebagian berdasarkan markup SVG. Anda seharusnya dapat melihat bagaimana markup SVG akan dibagi berdasarkan struktur pohon ini. Ini cukup jelas dari sudut pandang hierarki.

1. Roda rantai akan meniru rotasi jari-jari.
2. Komponen panggung adalah roda belakang yang akan mencantumkan semua 21 tahapan.
3. Komponen stage-detail akan menampilkan informasi terkait pada jalur melengkung (sisi kiri).
4. Komponen tim adalah roda depan yang akan mencantumkan semua tim yang berpartisipasi pada jari-jari.
5. Komponen detail tim akan menampilkan informasi terkait pada jalur melengkung (sisi kanan).
6. Navigasi akan menyertakan tombol kembali dan berikutnya untuk mengakses tahapan.

Diagram di bawah ini mewakili komponen Vue yang sama seperti yang terlihat di atas, tetapi dalam konteks desain infografis.

Lebih sedikit lebih banyak — harus menjadi pendekatan yang harus Anda coba lakukan saat mengerjakan proyek serupa. Pikirkan baik-baik persyaratan animasi dan transisi yang Anda miliki, jika Anda dapat menggunakan TweenLite alih-alih TweenMax — lakukanlah. Jika Anda memiliki opsi untuk memilih bentuk dasar dan jalur yang lebih sederhana daripada yang kompleks — tentu saja, cobalah untuk memilih elemen ringan yang mudah dianimasikan — tanpa penalti kinerja apa pun.

Bagian selanjutnya akan membawa Anda melalui bagian yang menarik dengan animasi GreenSock dan Vue.js.

Animasi GreenSock

Mari kita lihat lebih dekat:

1. Animasi teks pada jalur melengkung;
2. Bicara animasi di atas roda.

Ingat jalur kurva yang terlihat di sekitar roda sepeda, jalur melengkung itu sedikit lebih besar dari jari-jari roda sepeda. Oleh karena itu, ketika kita menganimasikan teks pada jalur ini, akan terlihat seperti mengikuti bentuk roda.

path dan textPath adalah kombinasi manis dari elemen SVG yang memungkinkan Anda menyetel teks di jalur apa pun menggunakan atribut xlink:href .

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

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

Untuk menganimasikan teks di sepanjang jalur, kita cukup menganimasikan atribut startOffset -nya menggunakan GreenSock.

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

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

}, 0.5 );

Saat Anda meningkatkan persentase startOffset , teks akan bergerak lebih jauh melalui perimeter lingkaran.

Dalam tugas akhir kami, animasi ini dipicu setiap kali setiap jari diklik. Sekarang, mari kita beralih ke bagian animasi yang lebih menarik.

Menganimasikan Tahapan / Jari-jari Di Dalam Roda

Terlihat dari demo bahwa komponen stage dan team memiliki sifat yang serupa dengan beberapa perbedaan kecil. Jadi, mari kita fokus hanya pada satu roda sepeda.

Contoh CodePen di bawah ini hanya memperbesar tiga ide utama:

1. Ambil data tahap;
2. Mengatur jari-jari secara dinamis berdasarkan data;
3. Atur ulang jari-jari saat stage (spoke) diklik.

Anda mungkin telah memperhatikan di SVG CodePen statis di atas bahwa jari-jari tidak lain adalah persegi panjang SVG dan teks yang dikelompokkan bersama. Saya telah mengelompokkannya bersama karena saya ingin memilih teks dan persegi panjang untuk tujuan animasi.

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

Kami akan merendernya di area <template> komponen Vue menggunakan nilai yang diambil dari sumber data.

Ketika semua 21 tahapan tersedia di layar, kita akan mengatur posisi awalnya dengan memanggil, katakanlah, 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) }

Tiga elemen kunci dari pengaturan panggung adalah:

1. Rotasi
   Untuk memutar jari-jari, kita cukup memetakan semua elemen dengan className stage , dan menetapkan nilai rotation dinamis yang dihitung untuk setiap jari-jari.
2. Transformasi Asal
   Perhatikan nilai transformOrigin pada kode di atas, yang sama pentingnya dengan nilai index , karena “0% 100%” memungkinkan setiap jari-jari berputar dari pusat roda.
3. sudut panggung
   Ini dihitung menggunakan jumlah total tahapan dibagi 360 derajat. Ini akan membantu kita meletakkan setiap jari-jari secara merata dalam lingkaran 360 derajat.

MENAMBAHKAN INTERAKTIFITAS

Langkah selanjutnya adalah menambahkan peristiwa klik pada setiap tahap untuk membuatnya interaktif dan reaktif terhadap perubahan data — oleh karena itu, ini akan menghidupkan lebih banyak kehidupan ke dalam gambar SVG!

Katakanlah, jika stage/spoke diklik, ia mengeksekusi goAnimate() , yang bertanggung jawab untuk mengaktifkan dan memutar stage yang diklik menggunakan parameter stageId .

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

Kami akan menggunakan DirectionalRotationPlugin…yang merupakan bahan utama untuk interaktivitas ini. Dan ya, itu termasuk dalam TweenMax.

Ada tiga cara berbeda untuk menggunakan plugin ini. Ini menjiwai properti rotasi dalam 1) searah jarum jam, 2) berlawanan arah jarum jam dan 3) dalam jarak terpendek yang dihitung ke tujuan.

Seperti yang sudah Anda duga sekarang, kami menggunakan opsi ketiga untuk memutar jarak terpendek antara tahap saat ini dan tahap baru.

Tinjau CodePen di atas dan Anda akan melihat bagaimana Tahap 01 terus bergerak di sekitar lingkaran, meninggalkan tempat aslinya untuk tahap aktif baru pada sudut 0 derajat.

Pertama, kita perlu mencari sudut stage yang diklik, dan menukar rotasinya dengan Stage 01 . Jadi, bagaimana kita menemukan nilai rotasi dari stage yang diklik? Lihat diagram di bawah ini.

Misalnya, jika Tahap 05 diklik (seperti yang Anda lihat di atas), perjalanan dari Tahap 01 ke Tahap 05 — membutuhkan nilai sudut 4 x.

Dan oleh karena itu, kita bisa mendapatkan sudut yang benar menggunakan, (Active stage Id - 1) * 17 degree, diikuti oleh postfix string '_short' untuk memicu plugin rotasi arah.

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

Fungsi goAnimate() terakhir akan terlihat seperti di bawah ini:

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

Setelah roda belakang siap, roda depan (untuk tim) harus mengikuti logika yang sama dengan beberapa penyesuaian.

Alih-alih panggung, kami akan mengambil data tim dan memperbarui titik pendaftaran atribut transformOrigin untuk mengaktifkan pembuatan jari-jari dari titik pendaftaran yang berlawanan dari roda panggung.

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

Proyek Akhir

Seperti saya, jika Anda telah menulis semua fungsi terkait animasi dan data dalam komponen Vue itu sendiri. Saatnya untuk membersihkannya menggunakan Vuex dan Mixin.

VUEX

Vuex memudahkan pengelolaan data bersama di antara komponen, dan yang lebih penting, itu merampingkan kode Anda, menjaga methods dan data() bersih dan rapi, meninggalkan komponen hanya untuk merender data, bukan untuk menanganinya.

Kait siklus hidup adalah tempat yang sangat cocok untuk melakukan permintaan HTTP apa pun. Kami mengambil data awal di hook yang created , ketika aplikasi Vue telah diinisialisasi, tetapi belum dipasang ke DOM.

Variabel status kosong, stages , dan teams diperbarui menggunakan mutasi pada tahap ini. Kami kemudian, menggunakan watcher (hanya sekali) untuk melacak dua variabel ini, dan segera setelah mereka diperbarui, kami memanggil skrip animasi (dari mixin.js ).

Setiap kali pengguna berinteraksi dengan tahap atau komponen tim, itu akan berkomunikasi dengan Vuex store, mengeksekusi setActiveData , dan memperbarui tahap saat ini dan nilai tim saat ini. Begitulah cara kami mengatur data aktif.

Dan ketika data aktif disetel setelah pembaruan status, goAnimate akan memulai untuk menghidupkan (putar arah) jari-jari menggunakan nilai yang diperbarui.

Bacaan yang disarankan : Membuat Input Kustom Dengan Vue.js

campuran

Sekarang setelah data ditangani oleh Vuex, kami akan memisahkan animasi GreenSock. Ini akan mencegah komponen Vue kita dikotori dengan skrip animasi yang panjang. Semua fungsi GreenSock dikelompokkan bersama dalam file mixin.js .

Karena Anda memiliki akses ke Vuex Store dalam Mixins, semua fungsi GSAP menggunakan variabel state untuk menganimasikan elemen SVG. Anda dapat melihat store.js dan mixin.js yang berfungsi penuh dalam contoh CodeSandbox di sini.

Kesimpulan

Membuat infografis yang interaktif dan menarik mengharuskan Anda untuk analitis dengan data, kreatif dengan visual dan efisien dengan teknologi yang Anda gunakan, yang dalam hal ini adalah Vue.js. Anda selanjutnya dapat menggunakan konsep-konsep ini dalam proyek Anda. Sebagai catatan penutup, saya akan meninggalkan Anda dengan roda warna interaktif melingkar di bawah ini yang menggunakan ide yang mirip dengan yang telah kita bahas di artikel ini.

Tidak diragukan lagi, Vue.js memiliki banyak fitur hebat; kami dapat membuat infografis interaktif hanya dengan beberapa hal, seperti pengamat, properti yang dihitung, mixin, arahan (lihat contoh roda warna) dan beberapa metode lainnya. Vue.js adalah perekat yang menyatukan animasi SVG dan GreenSock secara efisien, memberi Anda banyak kesempatan untuk berkreasi dengan sejumlah materi pelajaran dan interaktivitas khusus secara bersamaan.