D3js [Data-Driven Documents]: Görüntülemek anlamanın yarısıdır!

“Fiziksel objelerin aslında kendilerinden gerçekliklerinin 

olmadığını öğretiyorum, bunların ancak zihnin ürünleri 

olduğunu söylüyorum, aslında hepsi bir hayaldir. 

Bunların duyularla algılandığı ve ayırt edildiği doğrudur

 fakat aslında diğer yandan hiçbirinin kendiliğinden kendi

 doğaları, gerçeklikleri yoktur. Onlar gerçekte görülmüyorlar 

ama zihin tarafından ‘tasarımlanıyorlar’. Bir bakıma 

kavranabiliyorlar ama bir bakıma da gerçekte kavranamıyorlar.”

Buddha

"Kavramak" algısı ne kadar da anlatılamaz birşey değil mi? Beynimizin çalışma prensibi tamamen inanmaya kurulu olduğu sürece bizler zannettiğimize inanmaya, zannettiğimizi gerçek kılmaya devam edeceğiz. Her şeyin bir enerji olduğu evrenimizde var olmayanları var ederken bile aslında sadece düşünce de var ettiğimizi göz ardı ederek ve var ettiğimizi sahiplenerek yaşamaya devam ediyoruz. Ben de bugün kendime ait hissettiğim, var ettiğim, Buddha'nın dediği gibi “tasarladığım” bir şey üzerinden gideceğim.

Duyularımızla algıladığımız milyonlarca veri alıyoruz her an, her saniye... Bu milyonlarca verinin en iyi öğrenme biçiminin görsellik olduğu ise yadsınamaz bir gerçek. Kavrama adına görsellik bir çok verinin mantığımızca daha kolay yorumlanmasını sağlıyor ve böylelikle daha kalıcı bilgiye, öğrenmeye doğru daha hızlı yol alıyoruz.

Yaşam bilimlerinde, özellikle moleküler biyoloji düzeyinde tüm canlıların karmaşık verilerinin algılanması ve bunun üzerinden proje çıkartılıp yarar sağlanması oldukça zor bir durum. Tüm bilim insanlarının en çok zorlandıkları noktaya değinecek olursam, ortaya koyulan bilimsel çalışmaların anlaşılması -özellikle bilim dışı camiada- oldukça istenilen ama zorlanılan bir durum. Tam da şu satırlara uygun şu söz geliyor aklıma; “Senin ne kadar bildiğin önemli değil, sen karşındakinin seni anladığı kadarsın.” Bu sözün gerçekçiliğini ve umutsuzluğunu bir kenara atıp kendi algımı oluşturarak size D3 kütüphanesinden bahsedeceğim.

D3.js verilerin görselliğe dönüşmesiyle anlaşılır olmasını sağlayan bir JavaScript kütüphanesidir. HTML, SVG ve CSS yardımıyla verilerimizin görsel, çekici ve yorumlanabilir olmasını sağlayan bu framework'ün oldukça kullanışlı ve yararlı olduğunu söyleyebilirim. Zaten HTML ve CSS delisi olduğumu söylemeliyim, bunlar sayesinde herşeyin olduğundan daha güzel göründüğünü düşünüyorum ya da var olan güzelliği ortaya çıkarıyor mu demeliyim kararsızım :).

D3 son zamanlarda kullanılan bir çok tarayıcıyı da (Firefox, Chrome, Safari, Opera) destekliyor. Hadi şimdi de nasıl görselleştiriyoruz onu biraz deneyelim. İlk önce http://d3js.org/ web sitesine giriyoruz. Menüden “Examples” seçiyoruz. Sonrasında verilerinizi en iyi ifade edeceğini düşündüğünüz grafik örneğini seçmeniz gerekiyor. Garifiğin üzerine tıkladığınız da hemen altında genellikle kodlar bulunuyor. Örneğin İndex.html başlığı altında verilen kodları kopyalarak bir .txt dosyasına yapıştırabilirsiniz. Kimi zaman tüm kodlar index.html içerisindedir, kimi zamanda css.js, flare.json gibi diğer başlıklar altında da kodlar bulunabiliyor. Kimi zaman grafiğe ait koda ulaşamıyorsunuz, böyle durumlarda da sağ tıklayıp web sayfasının kaynağını görüntüleyerek kodlara ulaşabilirsiniz [view page source]. Tabi her durumda kodları kendi verilerinize göre yorumlamanız gerektiğinden programalama diline aşina olmanız gerekiyor.

Bildiğiniz gibi GenKök'te eğitimimize devam ederken her güne dair yapılanları yazstaji2014.blogspot.com.tr web sitemizde paylaşıyoruz ve her güne dair görüntülenme istatistiklerini görebiliyoruz. Fakat yayınlarımız çoğaldıkça bir blog yazarının tüm istatistiklerine bir çırpıda ulaşabilmek veya diğer blog yazarıyla kıyaslamak ilk bakışta pek mümkün olmuyor. Verilerimizin görülebilir olması adına bir grafikle görselleştirme kararı aldık. Blogdan kopyaladığımız tüm verileri Excel ile düzenledim. Her blog yazarına ait tüm yazılarının görüntülenme sayısının toplamını, ortalamasını ve standart sapmasını Excel fonksiyonları yardımıyla hesapladım. Böylelikle verileri normalize etmiş oldum.

Daha sonra index.html dosyasını text editor'ü ile açalım. İçine de kodları kopyaladıktan sonra verileri kod içine ekleyelim. Kod üzerinde gerçekleştirilen değişiklikleri kaydettikten sonra index.html dosyasını görüntüleyelim. Tarayıcımızda elde ettiğimiz dinamik grafiğimizi görebiliriz. Dinamik grafiklerin stabil grafiklere göre çok daha etkili olduğunu fark ediyorsunuz değil mi?

Pasta grafiğinin her bir parçası tüm blog yazalarının bulunduğu çizgi grafiğinde gösterilmektedir. Pasta grafiğinin üzerine imleç ile geldiğinizde çizgi grafiğindeki sütunların da renklere göre değiştiğini ve verdiği verilerin değiştiğini görebilirsiniz. Bu iki grafiğin birbirine bağlı olması ve dinamik olması gerçekten de verilerin yorumlanması adına harika değil mi? Şimdi ise biyolojik verileri görüntüleme zamanı, merakta kalın :).

Sizlerin bizleri okuyarak görülme istatistiği oluşturmanızla bile biz bir şeyler deniyor, uyguluyor ve öğreniyoruz. Baktığımız her yerde verileri algılıyor ve onu şekillendirmeye ve anlamlandırmaya başlıyoruz. Karşılıklı etkileşimle daha çok gelişiyoruz. Bu yüzden takipte kalın! 

Anlamanın yarısını gerçekleştirdik, şimdi var olan güzellikleri ortaya çıkarma zamanı. Son olarak benim D3'ümle bitiriyorum: Deneyerek, düzelterek, doğrulayarak yaşamınız dileğiyle..
Bihter