Ağ Verisi Görselleştirme: Düğüm, Kenar ve Ölçek Sorunu
Ağ verisi görselleştirme rehberlerinin çoğu düğüm rengiyle kenar kalınlığında biter. Asıl sorun oradan sonra başlıyor: birkaç yüz düğümü geçtiğiniz anda diyagram bilgi taşımayı bırakıp dekoratif bir yumağa dönüşüyor. Bu yazı o eşiğin nerede olduğunu ve eşiği geçtikten sonra neyi bırakmak gerektiğini konu alıyor.
Görsel değişken bütçesi
Rehberlerin çoğu düğümleri birbirinden ayırmak için renk, boyut ve şekli birlikte önerir. Üçü aynı anda kullanıldığında okuyucu her kanalı ayrı ayrı çözmek zorunda kalır ve diyagram hızlı bakışta anlaşılır olmaktan çıkar. Pratikte iki kanal yetiyor: biri kategori için renk, diğeri büyüklük için boyut ya da derece. Ayırt edilmesi gereken üçüncü bir boyut varsa onu şekle yüklemek yerine ayrı bir görünüme taşımak daha okunur bir sonuç veriyor.
Kenarlarda da aynı bütçe geçerli. Kalınlık ağırlığı taşır, ok yönü ilişkinin yönünü; ikisi zaten bir çizginin taşıyabileceğinin sınırı. Renkli, kesikli ve etiketli kenarları üst üste bindirmek bağlantı türünü açıklamıyor, sadece çizimi kalabalıklaştırıyor.
Yumak eşiği
Kırılma nokta sayısında. 200 düğümlü, düğüm başına ortalama altı komşusu olan bir ağda 600 kenar vardır; kuvvet tabanlı yerleşim bu ölçekte hâlâ iş görür. Aynı ağı 1.000 düğüme çıkarıp ortalama dereceyi sabit tuttuğunuzda 3.000 kenara ulaşırsınız ve ekranda gördüğünüz şey artık bir ağ değil, gri bir yumaktır. Tam bağlı bir grafta kenar sayısı n(n-1)/2 ile büyür, yani düğümü iki katına çıkarmak kenarı yaklaşık dört katına çıkarır. Görselleştirmenin ölçeklenmemesi bir tasarım hatası değil, kombinatorik.
Yoğun ama küçük ağlarda komşuluk matrisi düğüm-kenar çiziminden daha okunaklı: kesişme yok, her hücre tek bir ilişkiyi gösteriyor. Karşılığında yol takibi zorlaşıyor, iki düğüm arasındaki dolaylı bağlantıyı matriste gözle izleyemezsiniz. Seçim buradan yapılmalı. Yol ve aracı düğüm arıyorsanız çizim, yoğunluk ve küme arıyorsanız matris.
SVG'nin sınırı
Ağ şeması için SVG önerisi yaygın ve küçük şemalarda doğru: ölçeklenebilir, metni seçilebilir, her düğüme olay bağlanabilir. Ama SVG'de her düğüm ve her kenar birer DOM elemanıdır. Yukarıdaki 200 düğümlü örnek 800 eleman demek, tarayıcı bunu rahat taşır. 1.000 düğümlü örnekte 4.000 elemana çıkarsınız ve yakınlaştırma sırasında her karede bu elemanların yeniden konumlandırılması gerekir; etkileşim tam da veri büyüdüğü için ona ihtiyaç duyduğunuz anda takılmaya başlar. Birkaç bin elemanı geçtiğinizde çizimi canvas'a ya da WebGL'e taşımak gerekiyor (SVG'yi tümden bırakmak şart değil, etiket katmanını üstte SVG olarak tutmayı tercih ediyorum).
Kavram haritası ile zihin haritası aynı şey değil
İkisi de ağ diyagramı başlığı altında sayılıyor ama yapıları farklı. Zihin haritası bir ağaçtır: tek kök, her düğümün tek ebeveyni, döngü yok. Kavram haritasında ilişkiler çapraz kurulabilir, iki dal birbirine bağlanabilir, döngü mümkündür.
Fark akademik değil, araç seçimini belirliyor. Ağaç yerleşimi radyal ya da katmanlı biçimde deterministik ve tekrarlanabilir bir çıktı verirken, kavram haritasında çapraz bağlar yüzünden genel graf yerleşimine ihtiyaç duyarsınız. Zihin haritası aracıyla kavram haritası çizmeye kalkmak, çapraz ilişkileri elle sürüklenen süs çizgilerine dönüştürür ve veriyi orada kaybedersiniz.
Etkileşim, filtre demek
Etkileşimli öğeler genelde yakınlaştırma ve kaydırma olarak anlaşılıyor. Yumaklaşmış bir grafiği yakınlaştırmak onu okunur yapmaz, sadece yumağın küçük bir parçasını gösterir. İşe yarayan etkileşim eleyici olandır: dereceye göre eşikleme, tek bir düğümün iki adım komşuluğunu ayırma, kenar türüne göre katman açıp kapatma.
Varsayılan görünümü de buna göre kurmak gerekiyor. Her şeyi gösterip kullanıcıdan daraltmasını beklemek yerine anlamlı bir alt kümeyle açmak ve genişletme imkânı vermek, daha az bilgiyi çok daha anlaşılır kılıyor.