Chart.js VS D3.js

Displaying your data as graphs and charts not only make them more easy to understand, it also makes dealing with data not so boring. As a web developer / programmer you either worked with or going to work with data. Chart.js and D3.js are the two most popular data visualization libraries that you can use with JavaScript. In this post I am going to be sharing with you some general information about each of them and my personal opinion using both of these libraries.

Verilerinizi grafikler ve çizelgeler olarak görüntülemek, yalnızca onların anlaşılmasını kolaylaştırmakla kalmaz, aynı zamanda verilerle uğraşmayı çok sıkıcı hale getirmez. Bir web geliştiricisi / programcısı olarak veriyle ya şimdiye kadar çalıştınız ya da kısa zaman içinde çalışacaksınız. Chart.js ve D3.js, JavaScript ile kullanabileceğiniz en popüler iki veri görselleştirme kitaplığıdır (library). Bu yazıda, her biri hakkında bazı genel bilgileri ve bu iki kütüphane hakkında kişisel görüşlerimi sizlerle paylaşacağım.

§Kütüphaneler Hakkında Genel Bilgiler

Web geliştiricileri olarak, her bir projenin ihtiyaçlarını değerlendirmek ve kullanacağımız doğru araçları seçmek bize kalıyor. Bu nedenle, arada sırada farklı kütüphaneler, çerçeveler ve yazılımlar kullanarak denemeler yapmak çok önemli.

Öncelikle bu iki veri görselleştirme kütüphanesi arasında farklılıklar olsa da aynı amaca hizmet ediyorlar. Hem Chart.js hem de D3.js, farklı kullanım durumları ve veri türleri için çeşitli örneklere sahip. Her ikisi de yeterince popüler, bu yüzden bir çizelge (grafik) oluşturmaya çalışırken başınız belaya girerse, size yardımcı olacak başka programcılar olacağından emin olabilirsiniz.

§D3.js Hakkında

Tamam, öncelikle bunu bir freeCodeCamp mezunu olarak eklemeliyim ki D3.js, tanıştığım ilk veri görselleştirme kitaplığıydı. Öğrenme eğrisi biraz dik olabilir ama d3.js öğrenmek kesiblike bütün çabalarınıza değecek.

D3.js, çok spesifik (ve hatta tuhaf) bir ihtiyaca hizmet eden çizelgeler oluşturmak söz konusu olduğunda çok çeşitli ve güçlü bir kütüphanedir. Çok sayıdaki örnek eminim sizi de şaşırtacaktır. Gerçekten çok yaratıcı insanlar var!

d3.js ile DOM üzerinde SVG öğelerini (d3.js'nin üzerinde grafiği oluşturduğu) kolayca ekleyebilir (append), kaldırabilir ve güncelleyebilirsiniz. Sunduğunuz bilgilerin daha kolay sindirilmesini sağlamak için grafiklerinizi canlandırabilir ve interaktif hale getirebilirsiniz. D3.js, coğrafi verilerle çalışmak da mümkün ve hatta alternatiflerine göre görece daha kolay. Harita ile de verilerinizi etkili bir şekilde görüntüleyebilirsiniz.

§Chart.js Hakkında

Beni bu yazıyı yazmaya gerçekten motive eden, çok yeni bir proje için, hızlı bir şekilde basit bir çok satırlı grafik oluşturmam gerekmesiydi. Bu yüzden Chart.js'yi denemeye karar verdim. Duyarlı (responsive), hareketli ve etkileşimli basit çizelgeler ve grafikler oluşturmanın ne kadar az zaman aldığından çok etkilendim diyebilirim. Grafikler, üzerine gelindiğinde etkinleşen bir açılır pencere (hover), bir gösterge de içeriyor.

Konfigürasyonları da kavramak çok kolay. Tablodaki renkleri, genişlikleri veya boyutları değiştirirken sorun yaşamayacaksınız. Chart.js SVG yerine, içeriği oluşturmak için bir Canvas öğesi kullanır.

§Sonuç

Her iki kütüphanenin de zayıf ve güçlü yönleri var. Minimum konfigürasyonla kutudan çıktığı gibi çalışan ve iyi görünen basit bir grafiğe ihtiyacınız varsa, Chart.js tam size göre. Ancak daha spesifik bir grafiğe ihtiyacınız varsa veya verileri bir harita üzerinde görselleştirmek istiyorsanız D3.js kullanmalısınız.

Daha deneyimli geliştiricilerin neden Chart.js yerine D3.js kullanmayı tercih ettiğini tahmin edebilirsiniz. Karmaşıklık çok büyük bir sorun olmadığında, daha fazla yapılandırma gerektiren bir araçları da seçebilirsiniz. Daha fazla konfigürasyon, daha fazla iş anlamına gelir, ancak aynı zamanda, mükemmel görünen ve projelerinizin ihtiyaçlarına uygun, aklınızdaki görselleştirmeyi yaratmış olacaksınız.

Elbette, oluşturmanız gereken tüm çizelgeler karmaşık almayacaktır. Bazen, neredeyse hiç yapılandırma olmadan iyi görünen basit bir grafik oluşturmanız yeterli olacaktır. Chart.js ile 5 dakikada gerekli grafiği oluşturabildim, oysa d3.js ile aynı sonucu elde etmek kesinlikle daha uzun sürecekti.

Bu kadar, web sitelerinizde kullanabileceğiniz en popüler iki veri görselleştirme kütüphanesi hakkındaki görüşlerimi paylaştım sizinle. Umarım bu yazıda sizin için değerli bir şey bulabilmişsinizdir. Öğrenmeye devam et!