Visualization-Series

Visualization Layouts- ICicle, Flame Graph ve Sunburst

Hiyerarşik veri gösteriminde TreeMap'dan bahsetmiştik. TreeMap bütünü kompakt gösterme konusunda başarılı iken bir sıra dahilinde hiyerarşiyi sıralı birbirini takip eden yığıtlar halinde görmek isteyebiliriz.

Onur Dayıbaşı
Frontend Development With JS
2 min readMar 11, 2021

--

İşte bu birbirine bağlı yapıları ICicle (Buz Sarkıtı) yönteminde Cluster ve Hiyerarşik veriyi göstermek Buz sarkıtından esinlenerek kaynaktan aşağıya olan uzantılarda detaylara inilerek olayın kaynağı ve ilerlemesi çok rahat bir şekilde görselleştirebilmiştir. Bu teknik 1983 ‘te Kruskal ve Landwher tarafından geliştirilmiştir. (Makale)

https://www.cs.middlebury.edu/~candrews/showcase/infovis_techniques_s16/icicle_plots/icicleplots.html

Yukarıdaki grafiği tersine çevirerek Flame Graph elde ederiz. FlameGraph CPU Profiling sırsında İşlemcinin zaman harcadığı kısımları Stack (Yığıt) olarak gösterebilmemizi ve bir yerde bottleneck(darboğaz) varsa bunu anlamamamızı ve sorunun kaynağı (root cause) hemen ulaşmamızı sağlar.

https://github.com/brendangregg/FlameGraph

Artaşık ICicle veya FlameGraph belli bir merkezden 2 köşesini birleştirirsek elimize Sunburt dediğimiz Radial olan Donut Chart katman katman hali ortaya çıkar .. Radial görselleştirmenin sağladıklarını bu yazıdan okuyabilirsiniz.

https://observablehq.com/@observablehq/why-use-a-radial-data-visualization

Sunburts bize kartezyen ekseninde olan görselliği polar eksene taşıyarak açılar üzerinden daha rahat karşılaştırma yapmamızı sağlar. Bu sayede hem en çok yer kaplayanı, hemde kaynaktan en çok alt dallanma yapanı tek bakışta görebilmemize olanak sağlar.

Örneğin aşağıdaki görselde Sunburst ile kullanıcıların web sitesi ziyaretlerinin nasıl olduğu görselleştirilmiş .. Buna göre kullanıcı davranışları çok rahat bir şekilde analiz edilebiliyor..

https://observablehq.com/@kerryrodden/sequences-sunburst

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--