Plottable.js ile D3’te Hızlı Dinamik Grafikler Oluşturun
Ücretsiz D3.js kütüphanesi, sayfada etkileşimli grafikler oluşturmanıza olanak tanır. D3 kütüphanesi bu alanda en popüler kütüphanelerden biridir. Ancak öğrenilmesi o kadar da kolay değil.
Bu yüzden Plottable.js çok değerli bir kütüphanedir. D3.js’nin üzerine inşa edilmiş, ücretsiz bir açık kaynak projesi olup, herkesin etkileşimli veri grafikleri sıfırdan oluşturmasını kolaylaştırır.
Bu kütüphane tüm sıkıntılı işleri halleder, bu nedenle veriler gibi ayrıntılara odaklanabilirsiniz. Plottable, seçtiğiniz herhangi bir grafiğin boyutu ve konumu için uygun kodu üretir.
Her grafiğin kendi Plottable Bileşeni vardır; burada grafiği kendi başınıza yeniden inşa etmek için şablon kodunu kopyalayıp yapıştırabilirsiniz. Şu anda, çubuk grafikler, pasta grafikleri, dağılım grafikleri ve alan grafikleri dahil olmak üzere 10 grafik stilinden birini seçebilirsiniz.
Bileşenleri tek tek yeniden inşa edebilir ve ayarlarını dinamik olarak kişiselleştirebilirsiniz. Bu şekilde etkileşimli unsurları, renkleri, animasyonları, pozisyonlamaları, boyutları ve ihtiyacınız olan her şeyi kolayca değiştirebilirsiniz.
Kaynak kataloğuna göz atmak ve bir kopyasını indirmek istiyorsanız, tam kütüphane GitHub‘da mevcuttur.
Ancak, öğrenmenin en iyi yolu örnektir. Bu nedenle, Plottable çalıştıran örnek grafiklerden bir tanesine bakarak nasıl çalıştığını ayrıntılı bir şekilde inceleyin.
Her grafik tamamen etkileşimli, önyükleme yapmak için kaynak kodu var. Benzer bir grafiği yeniden oluşturmak isterseniz JS kodunu kopyalayıp yapıştırın ve gerektiğinde yeniden biçimlendirin.
Sitelerinden iki tane favorim var. Bunlardan ilki Github’un etkinlik takviminin göründüğü kısım ve ikincisi de dinamik seçimler için senkronize grafikler.
Daha önce hiç D3.js kullanmadıysanız, bu kütüphaneyi öğrenmek için biraz çaba harcamanız gerekir. Özellikle, TypeScript ile yazıldığı için, muhtemelen bunu da almak isteyeceksiniz. Final kod ES5 JavaScript ile derlendiğinden tüm popüler tarayıcılarda çalıştığını da belirtelim.
Bu kütüphaneyi öğrenmek için istekliyseniz, kaliteli kaynakların bulunduğu Tutorials sayfasına göz atmanızı tavsiye ederim. Plottable ile çalışmaya başlamak ve sıfırdan dinamik web tabanlı grafikler oluşturmak için ihtiyacınız olan her şeyi öğrenirsiniz.
Bu makalede dinamik web tabanlı grafik oluşturmanızı sağlayan Plottable kütüphanesini tanıttık. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilir, Mutfağa Katkıda Bulunabilirsiniz.
