- . , visx . , .
- , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
- Ini bukan kumpulan elemen yang "diasah" untuk pembuatan grafik. Jika Anda menggunakan visualisasi primitif untuk membuat grafik, pada akhirnya Anda akan membuat perpustakaan Anda sendiri yang memecahkan masalah ini. Selain itu, ini akan menjadi perpustakaan yang dioptimalkan untuk kebutuhan Anda. Dia akan berada di bawah kendali penuh Anda.
Kekuatan terpenting dari visx adalah bahwa pada dasarnya ini adalah sekumpulan komponen React yang biasa. Mengetahui cara bekerja dengan perpustakaan React berarti Anda dapat menggunakan visx untuk membuat visualisasi. Ia menggunakan API dan pola standar yang akrab bagi pengembang React. Dalam proyek React apa pun, visx akan terasa seperti di rumah sendiri. Kami sangat tertarik untuk melihat apa yang Anda buat dengan visx!
Tantangan: visualisasi data dalam pengembangan front-end
Visualisasi data dibutuhkan oleh spesialis dari berbagai bidang. Oleh karena itu, perlu adanya framework untuk membuat elemen grafis. Kerangka seperti itulah yang mampu memecahkan masalah orang-orang tersebut. Jenis yang benar-benar bisa dikuasai orang-orang ini.
Salah satu grup tersebut adalah pengembang front-end yang terus-menerus harus membuat visualisasi data untuk proyek web. Ada banyak sekali perpustakaan dan kerangka kerja yang bagus untuk membuat grafik web. Dari D3 , Highcharts , Plotly , Echarts , Victory , G2 , Recharts , react-vis , vega ,vega-lite , hingga Semiotic dan proyek serupa lainnya. Terlepas dari keragaman ini, kami menganalisis lebih dari selusin perpustakaan yang ada dan mempertimbangkan untuk menggunakannya di Airbnb dan menemukan bahwa kebanyakan dari mereka memiliki cacat setidaknya di satu dari tiga area yang penting bagi pengembang front-end kami:
- ( ?). - . API D3 vega. , -.
- ( , ?). , ? ( — airbnb.com), . ? .
- . -, , -, , airbnb.com, . , , , , , .
Tercatat bahwa sering kali ada hubungan langsung antara ekspresi alat visualisasi data dan kemampuan untuk menjelajahinya dengan cepat. Semakin baik salah satu karakteristik ini, semakin buruk sifat lainnya. Semua ini membawa kami pada pertanyaan tentang bagaimana membuat perpustakaan yang dapat dieksplorasi dengan cepat, perpustakaan yang cukup ekspresif, dan pada saat yang sama - kinerja tinggi. Jawaban atas pertanyaan ini terdiri dari satu kata: "Bereaksi".
Solusi: primitif visual tingkat rendah berdasarkan React
Dalam beberapa tahun terakhir, perpustakaan React telah menjadi arus utama pengembangan web. Hal ini sebagian disebabkan oleh fakta bahwa ia memiliki API deklaratif yang membantu Anda menulis kode yang bersih dan dapat dibaca yang mudah dipelihara. Pustaka ini akrab bagi banyak pengembang front-end, ada banyak materi di luar sana tentang mengoptimalkan kinerja aplikasi React. Kami mendasarkan proyek pada React dan ekosistem perpustakaan ini, yang berarti kami membuatnya mudah untuk dipelajari dan produktif. Implementasi API modular tingkat rendah di dalamnya menjadi kunci ekspresifnya.
Ketika kita berbicara tentang visi proyek ini, biasanya kita ditanyai dua pertanyaan.
Ini yang pertama: "Mengapa tidak menggunakan D3, perpustakaan yang sangat ekspresif di aplikasi React?"
Intinya adalah Anda bisa melakukan itu. Tetapi karena D3 dan React ingin memanipulasi DOM sendirian, kami telah menemukan bahwa yang terbaik adalah ketika D3 digunakan murni untuk komputasi dan React digunakan untuk DOM. Jika tidak, dua model mental yang bersaing untuk memperbarui DOM membuka pintu bagi bug untuk menyusup ke proyek. Tetapi menggunakan D3 hanya untuk komputasi berarti bahwa sebagian besar fungsionalitas pustaka ini (yang terkait dengan DOM) tidak akan digunakan. Ini tentang selection.join , zoom , drag , brush dan transisi... Juga, seperti yang disebutkan, D3 membutuhkan waktu untuk dikuasai. Dan kami ingin para pengembang merasa seperti mereka sedang menulis kode React asli saat melakukan visualisasi data yang menggunakan API standar dan pola yang sudah dikenal.
Inilah pertanyaan kedua: Mengapa tidak menggunakan salah satu dari banyak pustaka rendering yang dibuat untuk React?
Penelitian kami (hasilnya disajikan pada gambar berikut) menunjukkan bahwa library React yang ada untuk visualisasi data seringkali merupakan abstraksi tingkat tinggi dan dioptimalkan untuk kemudahan penggunaan (yaitu, berfokus pada pengurangan jumlah kode yang diperlukan untuk menggunakannya). Ini dilakukan dengan mengorbankan ekspresi mereka. Tak satu pun dari mereka menawarkan kepada pengembang ekspresif primitif D3, dan banyak yang tidak memungkinkan pengoptimalan yang kami butuhkan untuk proyek produksi, karena komputasi, animasi, manajemen status, gaya, dan rendering terkait erat satu sama lain.
- , , . visx , React-
Dengan menganalisis ruang masalah yang disajikan pada gambar sebelumnya, Anda dapat dengan jelas melihat peluang untuk keberhasilan pengembangan perpustakaan React dengan tingkat ekspresi yang tinggi. Dengan membuat primitif rendering tingkat rendah yang dirancang dari awal untuk menggunakan React API yang umum, kami berharap dapat membuat perpustakaan yang mudah dipelajari, ekspresif, dan berkinerja tinggi. Kami pikir pustaka seperti itu akan berguna untuk pengembang front-end mana pun. Begitulah proyek visx lahir.
Detail tentang visx
Kumpulan komponen visx (sebelumnya dikenal sebagai vx) menyembunyikan kata "komponen visualisasi" dalam namanya. Terdiri dari lebih dari 30 paket terpisah yang berisi primitif visualisasi data React, dibagi menjadi beberapa kategori (lihat gambar berikut). Siapa pun yang menggunakan primitif ini tidak dipaksa ke dalam semacam skema pengelolaan negara aplikasi. Pengembang dapat memilih pendekatan animasi elemen dan gaya mereka. Ini semua berarti bahwa visx primitif dapat diintegrasikan ke dalam basis kode berbasis React. Dan fakta bahwa saat membuat visx, penekanan ditempatkan pada modularitas (ini membuat visx mirip dengan D3) memungkinkan Anda membuat bundel aplikasi dengan ukuran yang ringkas, termasuk dalam komposisinya hanya apa yang diperlukan untuk mengimplementasikan perpustakaan Anda sendiri untuk visualisasi data yang dimaksudkan untuk penggunaan yang dapat digunakan kembali, atau ,apa yang diperlukan untuk membentuk beberapa jadwal unik yang ada dalam satu salinan.
Visx adalah kumpulan modular lebih dari 30 paket yang menangani tugas visualisasi data umum dalam aplikasi React.
Pertanyaan dan jawaban
▍Bagaimana D3 digunakan dalam visx?
Beberapa paket yang disertakan dengan visx menggunakan D3 untuk melakukan berbagai kalkulasi, seperti penempatan elemen pada halaman. Mereka secara fungsional menduplikasi paket D3 yang mereka gunakan, melengkapi mereka dengan API React deklaratif. Contoh paket tersebut termasuk @ visx / axis, @ visx / geo, @ visx / hierarchy, dan @ visx / shape. Paket lain menggantikan fungsionalitas manajemen DOM D3 dan menyediakan pengembang primitif React untuk berinteraksi dengan elemen. Ini adalah, misalnya, @ visx / brush, @ visx / drag dan @ visx / zoom.
▍Apa yang dapat dilakukan visx yang tidak bisa dilakukan D3?
Banyak paket yang sama sekali tidak terkait dengan D3, mereka mengabstraksi solusi untuk masalah umum yang kami hadapi saat membuat tata letak desain di React yang mereproduksi tata letak dengan presisi piksel. Banyak dari alat ini mengabstraksi dan menyederhanakan masalah ukuran objek yang kompleks dan menyederhanakan API SVG. Berikut ini beberapa contohnya.
@ visx / tooltip
Berikut contoh interaktifnya.
Tooltips
Tooltips adalah elemen yang sering digunakan dalam proyek web. Tetapi menyadari semua interaksi mikro dengan elemen-elemen seperti itu bukanlah tugas yang mudah. Paket @ visx / tooltip mengabstraksi manajemen status tooltip. Ini membantu untuk mengelola isinya, koordinatnya, menunjukkan dan menyembunyikannya. Ini dilakukan dengan menggunakan React hooks (useTooltip) dan menggunakan komponen urutan yang lebih tinggi (withTooltip). Menggunakan paket @ visx / tooltip juga mempermudah penyelesaian tugas yang terkait dengan rendering tooltips, seperti pemosisian otomatis (sebagai hasilnya, tooltip tidak terpotong oleh penampungnya), dan seperti rendering opsional dalam portal.untuk memecahkan masalah hamparan pintasan
@ visx / teks
Contoh interaktif dapat ditemukan di sini .
Bekerja dengan Teks
Dalam SVG 1.1. tidak ada kemungkinan untuk bekerja dengan teks multi-baris, mirip dengan yang ada di HTML, di mana, misalnya, Anda dapat dengan mudah, menggunakan CSS, menerapkan representasi multi-baris dari teks panjang. Menerapkan mekanisme seperti itu di React (atau bahkan JavaScript murni) biasanya membutuhkan rendering elemen DOM tak terlihat yang digunakan untuk mengukur ukuran teks dan untuk menemukan parameter untuk memecah teks menjadi baris. Paket @ visx / text mengabstraksi semua tugas ini dan membuatnya lebih mudah untuk mendukung teks panjang dalam visualisasi.
@ visx / responsif
Berikut contoh interaktifnya.
Aplikasi Web Responsif Aplikasi
web responsif mudah dibuat menggunakan HTML. Jika diagram dibuat dengan mengandalkan grafik SVG dan kemampuan elemen kanvas, maka pengukuran presisi piksel harus dilakukan untuk membuatnya responsif, yang tidak begitu mudah di React. Paket @ visx / responsive menyediakan pengembang dengan berbagai alat bantu yang memudahkan untuk mendapatkan informasi tentang dimensi piksel elemen sehingga Anda dapat dengan mudah membuat bagan yang responsif.
@ visx / gradien, @ visx / pola
Berikut adalah contoh interaktif.
Gradien dan Pola
Isi pola dan gradien warna sangat meningkatkan kapabilitas mereka yang mendesain bagan. Efek grafis ini memungkinkan Anda membuat gambar menarik yang menonjol dari latar belakang. Tetapi mendeskripsikan gambar seperti itu menggunakan SVG membutuhkan banyak kode dan bisa menjadi tugas yang menakutkan. Paket @ visx / gradient dan @ visx / pattern sangat menyederhanakan sintaks untuk mendeklarasikan gaya yang sesuai, memungkinkan siapa saja untuk membuat diagram yang lucu.
▍Apa yang bisa dibuat menggunakan visx?
Kami telah menggunakan visx selama 2,5 tahun terakhir, menggunakan kumpulan elemen ini di lusinan alat data internal dan di airbnb.com.
Visualisasi yang dibuat menggunakan visx
Gambar sebelumnya menunjukkan contoh apa yang kita buat menggunakan visx. Ini adalah, jika Anda pergi searah jarum jam, mulai dari sudut kiri atas, proyek-proyek berikut: Gantt chart dengan dependensi, diagram lingkaran organisasi, diagram radial, laporan metrik bisnis, ikhtisar interaksi layanan.
Kami juga menggunakan visx untuk membuat perpustakaan tingkat tinggi untuk membuat diagram yang dapat digunakan kembali. Ini memungkinkan kami untuk mengurangi jumlah kode boilerplate saat membuat elemen grafis sederhana.
Visx adalah kumpulan elemen tingkat rendah. Ini dirancang untuk pembuatan sistem tingkat yang lebih tinggi atas dasar itu. Ini harus digunakan untuk membuat perpustakaan tingkat tinggi Anda sendiri dan untuk membuat visualisasi kustom untuk aplikasi web.
▍Visx terlihat menarik, tetapi bagaimana jika saya sangat menyukai D3?
Kami juga menyukai D3!
▍Bagaimana visx berkembang?
Selama 3 tahun bekerja di visx, kami telah mengembangkan koleksi primitif ini dalam tiga arah berikut:
- . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
- . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
- . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .
Dokumentasi visx menggunakan contoh-contoh bergaya blocks.org yang Anda dapat bereksperimen dengan platform CodeSandbox. Semua contoh terkait erat dengan paket koleksi terkait
Apakah Anda pernah menggunakan visx?