Bangun Grafik Dinamis dengan Cepat di D3 dengan Plottable.js

Bebas Pustaka D3.js hanyalah salah satu dari banyak yang memungkinkan Anda buat grafik interaktif di halaman. Meskipun D3 mungkin yang paling populer di antara banyak orang, belajar untuk menggunakannya bukanlah tugas yang mudah.

Itu sebabnya Plottable.js adalah perpustakaan yang sangat berharga. Ini adalah proyek open-source gratis dibangun di atas D3.js, membuatnya lebih mudah bagi siapa pun untuk membuat grafik data interaktif dari awal.

Perpustakaan ini menangani semua pekerjaan kotor, sehingga Anda dapat fokus pada spesifik seperti data. Plottable menghasilkan kode yang tepat untuk ukuran dan posisi grafik apa pun yang Anda pilih.

Setiap bagan memiliki Komponen sendiri di Plottable di mana Anda bisa salin / tempel kode templat untuk membangun kembali bagan Anda sendiri. Pada tulisan ini, Anda dapat memilih dari 10 gaya grafik plot, termasuk grafik batang, diagram lingkaran pie, plot sebar, dan plot area.

Kamu bisa membangun kembali Komponen secara individual dan sesuaikan pengaturannya secara dinamis. Dengan cara ini, Anda dapat dengan mudah mengubah elemen interaktif, warna, animasi, posisi, ukuran, dan apa pun yang Anda butuhkan.

Itu perpustakaan penuh tersedia di GitHub jika Anda ingin menelusuri kode sumber dan mengunduh salinannya.

Namun, cara terbaik untuk belajar adalah melalui contoh. Itu sebabnya Anda harus melihat mereka grafik sampel menjalankan Plottable untuk melihat cara kerjanya dalam tindakan.

Setiap grafik adalah sepenuhnya interaktif, dengan kode sumber untuk boot. Jika Anda ingin membangun kembali grafik yang sama, cukup salin / tempel kode JS dan format ulang sesuai kebutuhan.

Saya punya dua favorit pribadi dari situs mereka: the Kalender Heatmap dimodelkan setelah papan aktivitas GitHub dan Grafik yang Disinkronkan dengan fitur pilihan dinamis.

Jika Anda belum pernah menggunakan D3.js sebelumnya maka Anda akan kesulitan untuk belajar perpustakaan ini. Terutama, karena itu ditulis dalam TypeScript, jadi Anda mungkin ingin mengambilnya juga. Kode terakhirnya adalah dikompilasi ke dalam JavaScript ES5, seharusnya begitu bekerja di semua browser utama.

Jika Anda ingin menyelam melihat mereka Halaman tutorial penuh dengan sumber daya berguna. Anda akan mempelajari semua yang Anda butuhkan untuk memulai dengan Plottable dan buat grafik berbasis web yang dinamis dari awal.