Visualization Series
Visualization Layouts- TreeMap
Hiyerarşik veri gösteriminde özellikle klasör ve dosyaların diskte ne kadar yer kapladığı gösterimi üzerine çıkan TreeMap, bu ve benzer hiyerarşik gösterimlerde en verimli gösterim şekli olmuştur.
Treemap, Maryland üniversitesindeki bir araştırma sonucunda ortaya çıkıyor. 1990'larda Ben Shneiderman ağaç veri yapısının daha kompakt şekilde nasıl gösterebilirim üzerine yaptığı araştırmalar ve çalışmalar üzerinde ortaya çıkmıştır..
Örnek bir Ağaç Yapısını biz UI’da Tree(Ağaç) bileşenleri klasör/directory ve yaprak/leaf şeklinde kullandığımız bir yöntem var. Bu yöntem uygulamalarda kullanmak için uygunken
Görselleştirmede bu yapı çok da uygun değildir. Tek seferde bütün veriyi göstermek istediğinizde bu ekran üzerinde bir scroll neden olacaktır.
Ben Shneiderman HCIL(Human Computer Interaction Lab) içerisinde 14 kullanıcın 80 MB Hard disk alanını nasıl ve hangi alanlarını kullandığını göstermek için uğraşmış. Büyük dosyaları veya paylaşılmış en geniş disk alanlarını bu gösterimde nasıl belli edebilirim şeklinde düşünmüş ve ortaya TreeMap Görselleştirmesi çıkmıştır.
Daha sonra bunu Brian Johnson bu algoritmayı daha optimize hale getirerek Macintosh modellerinde çalışır bir uygulama haline getirmiştir.
PhD öğrencisi olan Brian Johnson ilerleyen süreçte bu gerçekleştirime bir sürü özellik eklemiştir.
- Zooming
- Dosya Büyüklüğüne Göre (Ses Farklılıkları, hue/saturation Farklılıkları)
- Farklı çerçeve varyasyonları ve Etiket kontrolleri.
- Küçük dosya büyüklerini belirtmek için ekstra yöntemler vb..
Günümüzde D3.js kütüphanesi ile bu gerçekleştirimlerin benzerlerini Web ortamında yapmak TreeMap gösterimini sağlamak mümkün.
Bu TreeMap gösteriminin farklı farklı kullanım alanları ve türleri bulunur. Bunlardan Örneğin İç içe gösterimi daha anlaşılır, etiketler ve hiyerarşik bölümlemesini daha anlaşılır olmasını sağlatan yöntemdir. Burda Nested-TreeMap kullanılır
Bu iç içe gösterimi Çemberler içerisinde sınırlandırdığımızda Görsel açıdan her bir kendi iç hiyerarşik karşılaştırmayı daha kolay görmemize imkan sağlar . Buna Circle Packing görselleştirmesi ile sağlarız.
TreeMap görselliğine Zoom özelliği ekleyince örneğin bu hiyerarşik paketleri daha özet görüp, istediğimizde daha derinlere inebilme özelliği katmıştır. Aşağıdaki görselde ilgili alanların üzerine tıklayarak bir alt hiyerarşiye erişebilmeniz mümkün.
Animated TreeMap ile belli yıllar veya süre arasındaki değişimi kullanıcıya sunmaya çalışırsınız. Bu sayede kullanıcı t(zaman) göre veriler nasıl değişmiş olduğuna odaklanabilir.
Master öğrencisi olan David Turo Sun Workstation üzerinde 1991–1992 NBA sezonunda 453 basketboll oyuncusu 27 Takım ile yaptığı maç istatistiklerini TreeMap üzerinde görselleştirmiştir.
David Turo uygulama gerçekleştirimini Alexander Jungmeiseter New York Stock Exchange verisi üzerinde kullanarak Borsa ve Stock gösteriminde kullanılmasını sağlamıştır.
Ve daha bir çok kullanım yöntemi ve uygulamayı TreeMap Tarihçe Web Sayfasından erişebilirsiniz.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
