Kita hidup di masa pertumbuhan eksplosif dalam jumlah data yang dihasilkan dan dikonsumsi oleh umat manusia. Di hampir setiap aplikasi yang dikembangkan saat ini, data dapat digunakan di suatu tempat di dalamnya atau divisualisasikan. Dengan menggunakan data, programmer berusaha membuat bekerja dengan program mereka senyaman mungkin.
Terkadang mungkin terjadi bahwa hal yang paling berharga dan menarik yang dapat diberikan suatu aplikasi kepada pengguna adalah beberapa data. Namun, jika Anda mewakili mereka dalam bentuk sesuatu seperti daftar atau tabel, bekerja dengan data seperti itu cenderung membosankan. Selain itu, jika ada banyak data, hanya melihat representasi mereka yang paling sederhana, pengguna akan mengalami kesulitan dalam menganalisis mereka dan membuat keputusan berdasarkan pada mereka.
Data yang mewakili pengguna aplikasi, tidak hanya bernilai bagi dirinya sendiri. Mereka harus dirancang sehingga cepat, nyaman dan menyenangkan untuk bekerja dengan mereka.
Hari ini kami sajikan kepada Anda terjemahan dari bahan yang membahas pustaka JavaScript open source untuk visualisasi data.
1. D3
Perpustakaan D3Mungkin pustaka sumber terbuka
D3 (juga disebut D3.js) dapat disebut paling populer dari pustaka JS yang ada untuk visualisasi data. Proyek ini, khususnya, telah mengumpulkan hampir 80 ribu bintang di GitHub. Perpustakaan dibuat untuk memvisualisasikan data menggunakan teknologi seperti HTML, SVG dan CSS.
Berkat perhatian pencipta perpustakaan terhadap standar web, D3 memberi pengembang lingkungan holistik yang cocok untuk digunakan di peramban modern untuk memvisualisasikan data, menghilangkan kebutuhan untuk mencari beberapa solusi berbayar. Pustaka D3 menggabungkan komponen untuk visualisasi data dan pendekatan untuk bekerja dengan DOM, yang, sekali lagi, didasarkan pada data. D3 memungkinkan Anda untuk mengeluarkan data sewenang-wenang ke DOM, dan kemudian menerapkan transformasi yang sesuai ke dokumen. Berikut adalah
galeri contoh penggunaan perpustakaan ini.
Omong-omong, perhatikan pendapat bahwa D3
bukan perpustakaan untuk visualisasi data sama sekali. Kami percaya bahwa Anda sendiri dapat memutuskan apa yang harus dipertimbangkan, dan apakah akan menggunakannya dalam proyek Anda.
2. Chart.js
Chart.jsPustaka
Chart.js , yang telah mengumpulkan sekitar 40 ribu bintang di GitHub, adalah solusi yang sangat populer untuk membuat grafik dan diagram HTML5 berdasarkan
<canvas> , yang dirancang untuk mengembangkan aplikasi web yang responsif. Versi kedua perpustakaan saat ini mendukung kombinasi grafik dari berbagai jenis (ada 8 tipe dasar grafik), berbagai sistem koordinat. Chart.js dapat digunakan bersama dengan perpustakaan
moment.js . Perpustakaan, jika perlu, dapat diunduh dari
cdnjs .
3. Three.js
Three.jsPerpustakaan
Three.js adalah solusi yang sangat populer (sekitar 45 ribu bintang di GitHub; lebih dari 1000 orang berkontribusi pada proyek) untuk membuat animasi 3D menggunakan WebGL. Fleksibilitas dan abstrak proyek berarti bahwa Three.js dapat digunakan untuk memvisualisasikan data dalam
2 dan 3 dimensi. Sebagai contoh,
berikut adalah modul khusus untuk Three.js, yang dirancang untuk membuat grafik tiga dimensi. Berikut adalah
kotak pasir online untuk eksperimen visualisasi data. Jika Anda berpikir tentang memvisualisasikan data menggunakan WebGL, Anda pasti akan melihat Three.js.
4. ECharts dan Highcharts JS
Contoh bekerja dengan ECharts (gambar diambil dari sini )ECharts adalah proyek Baidu, yang telah mengumpulkan sekitar 30 ribu bintang di GitHub, adalah perpustakaan untuk visualisasi data dan grafik di browser. Itu ditulis dalam JavaScript murni menggunakan perpustakaan
zrender yang dirancang untuk bekerja dengan elemen
<canvas> .
Perpustakaan mendukung grafik menggunakan
<canvas> , SVG (4.0+) dan VML. ECharts dapat digunakan tidak hanya dalam pengembangan halaman yang dirancang untuk browser desktop atau mobile, tetapi juga untuk organisasi rendering server yang efektif.
Berikut adalah galeri contoh penggunaan perpustakaan ini yang dapat Anda coba dalam lingkungan interaktif.
Highcharts jsPerpustakaan
Highcharts JS cukup banyak digunakan, itu mengumpulkan sekitar 8 ribu bintang di GitHub. Mekanisme utama yang digunakan olehnya untuk visualisasi data adalah teknologi SVG, dengan kemampuan untuk beralih ke VML dan
<canvas> untuk versi browser yang lebih lama. Dinyatakan bahwa 72 dari 100 perusahaan terbesar di dunia menggunakan perpustakaan ini, yang, jika benar, menjadikan perpustakaan ini solusi pembuatan bagan paling populer di antara perusahaan besar seperti Facebook dan Twitter.
5. MetricsGraphics.js
MetricsGraphics.jsPustaka
MetricsGraphics.js (sekitar 7.000 bintang di GitHub) adalah solusi yang dioptimalkan untuk visualisasi seri waktu. Ini dibedakan oleh ukurannya yang relatif kecil (80 Kb dalam bentuk yang diperkecil) dan memberikan pengembang seperangkat alat yang sangat khusus tetapi sangat bijaksana, di antaranya adalah alat untuk membuat grafik garis, diagram sebar, histogram, grafik batang, dan tabel data.
Berikut adalah galeri interaktif contoh bekerja dengan perpustakaan ini.
6. Mengisi ulang
Isi ulangPustaka
Recharts , dengan hampir 10.000 bintang di GitHub, adalah solusi bagan React dan D3 yang terlihat seperti bekerja dengan komponen Bereaksi deklaratif. Perpustakaan memberi dukungan pengembang untuk SVG. Pohon ketergantungannya yang ringan (berdasarkan pada submodula D3) sangat dapat dikustomisasi melalui properti komponen.
Di sini Anda dapat menemukan contoh penggunaannya.
7. Raphaël
RaphaëlPerpustakaan "vektor"
Raphaël (sekitar 10 ribu bintang di GitHub) dirancang untuk bekerja dengan grafik vektor di lingkungan web. Dia, sebagai teknologi dasar untuk membuat objek grafik, menggunakan SVG dan VML. Akibatnya, objek grafis juga objek DOM yang dapat Anda sambungkan, menggunakan JavaScript, penangan acara. Perpustakaan saat ini mendukung browser seperti Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, dan Internet Explorer 6.0+.
7. C3
Contoh perpustakaan C3Perpustakaan
C3 (sekitar 8 ribu bintang di GitHub) didasarkan pada D3, ini memberikan pengembang kemampuan untuk menggunakan kelas untuk semua elemen mereka, yang memungkinkan Anda untuk menentukan gaya Anda sendiri menggunakan kelas dan menggunakan kemampuan D3. Selain itu, mendukung berbagai API dan panggilan balik untuk mengatur interaksi interaktif dengan grafik. Dengan menggunakannya, Anda dapat memperbarui grafik bahkan setelah grafik ditampilkan di halaman.
Berikut adalah contoh penggunaan perpustakaan ini.
8. React-Vis, React Virtualized, Victory
React-Vis Component KitHimpunan komponen
React-Vis (sekitar 4 ribu bintang di GitHub) dikembangkan oleh Uber dan dirancang untuk mengatur sistem visualisasi data yang seragam dalam aplikasi Bereaksi. Solusi ini mendukung penyajian data dalam berbagai bentuk, khususnya, dalam bentuk peta panas dan sebar. Untuk bekerja dengan perpustakaan ini tidak memerlukan kenalan awal, katakanlah, dengan sesuatu seperti D3. Ini memberikan pengembang dengan blok bangunan modular tingkat rendah seperti sumbu X / Y.
Bereaksi set komponen tervirtualisasiRangkaian komponen
virtual Bereaksi (sekitar 12 ribu bintang di GitHub) dirancang untuk mengatur render yang efektif dari kumpulan besar data tabel. Bereaksi ES6 tervirtualisasi, CommonJS dan UMD tersedia, proyek mendukung Webpack 4. Jika Anda bermaksud menggunakan set komponen ini, perhatikan bagian
Ketergantungan dalam dokumentasinya.
Pengumpulan Komponen KemenanganVictory adalah kumpulan komponen Bereaksi yang dirancang untuk memvisualisasikan data dengan kemampuan interaktif. Proyek ini dibuat oleh Formidable Labs, mengumpulkan sekitar 6 ribu bintang di GitHub. Victory menggunakan API yang sama untuk aplikasi Bereaksi reguler dan lingkungan Bereaksi Asli, yang memfasilitasi pengembangan solusi lintas platform. Victory menawarkan cara fleksibel dan indah kepada para pengembang untuk menggunakan kemampuan komponen-komponen React untuk visualisasi data.
9. CartoDB
Layanan CartoDBPlatform
Carto (sekitar 2 ribu bintang di GitHub) dirancang untuk visualisasi dan analisis geodata. Pada platform ini, Anda dapat mengunduh geodata (misalnya, dalam format Shapefile atau GeoJSON), memvisualisasikannya, meletakkannya di peta, memberinya gaya menggunakan CartoCSS, Anda dapat mencarinya menggunakan SQL.
Ada tutorial video tentang cara bekerja dengan platform ini.
10. RAWGraphs
RAWGraphsPustaka
RAWGraphs dengan sekitar 5.000 bintang di GitHub menyediakan alat yang memungkinkan Anda untuk mengaitkan tabel yang berisi data dengan alat visualisasi. RAWGraphs didasarkan pada D3, memungkinkan pengembang untuk membuat visualisasi data vektor mereka sendiri. Ini bekerja dengan data tabular dalam berbagai format, dan mendukung data yang dapat disalin dari aplikasi lain. Hasil RAWGraphs disajikan dalam format SVG, mereka dapat diedit menggunakan aplikasi yang sesuai, atau digunakan pada halaman web tidak berubah.
Berikut adalah contoh penggunaan perpustakaan ini.
11. Metabase
MetabasePustaka
Metabase , yang telah mengumpulkan lebih dari 11 ribu bintang di GitHub, menawarkan cara yang cukup cepat dan mudah untuk membuat panel kontrol yang berisi data yang divisualisasikan yang tidak memerlukan pengetahuan SQL. Pada saat yang sama, perpustakaan memiliki mode SQL khusus yang dirancang untuk analis dan untuk orang-orang yang secara profesional terlibat dalam pemrosesan data. Metabase memungkinkan Anda untuk
mengelompokkan data dengan membuat filter atau set filter, perpustakaan mendukung pembuatan metrik - indikator terhitung yang harus Anda akses cukup sering. Fitur-fitur lain dari Metabase termasuk dukungan untuk mengirim data ke Slack dan menyediakan kemampuan untuk bekerja dengannya di lingkungan ini menggunakan
MetaBot . Pustaka ini, mungkin, dapat dianggap sebagai alat yang sangat baik untuk memvisualisasikan data di dalam perusahaan, meskipun harus dicatat bahwa untuk menguasainya, diperlukan upaya.
Perpustakaan Bonus: Taucharts
TauchartsPerpustakaan visualisasi data Taucharts (sekitar 2 ribu bintang di GitHub) didasarkan pada perpustakaan D3. Ini menyediakan pengembang dengan antarmuka deklaratif untuk dengan cepat mengatur koneksi bidang data dengan properti visual. Arsitekturnya memungkinkan Anda membuat bagan di mana variabel dikelompokkan menggunakan koordinat X dan Y (
bagan segi ). Taucharts memungkinkan Anda untuk memperluas perilaku bagan dengan plugin yang cocok untuk digunakan kembali.
Ringkasan
Kami melihat perpustakaan JavaScript untuk memvisualisasikan data yang dapat digunakan dalam mengembangkan aplikasi web. Mengingat apa yang kita bicarakan tentang peran data di dunia modern, tidak mengherankan bahwa ada sejumlah besar solusi untuk visualisasi data. Oleh karena itu, berikut adalah beberapa perpustakaan yang serupa (ketika mempelajarinya, perhatikan fakta bahwa beberapa dari mereka belum diperbarui untuk waktu yang lama):
Pembaca yang budiman! Pustaka apa yang Anda gunakan untuk memvisualisasikan data dalam proyek web Anda?
