Photo by Kolby Milton on Unsplash

VISUALIZATION-SERIES

Visualization — FlameGraph Samples

Bu blog yazılarında Visualization Kapsamında yazdığımız yazılar ile ilgili örnekler üzerinden ilgili Layout ve Chart’ları nasıl kullandığımızı anlatacağım.

Onur Dayıbaşı
Frontend Development With JS
2 min readFeb 15, 2023

--

Bu konuda daha önceden Visualization Layouts- ICicle, Flame Graph ve Sunburst blog yazısını anlatmıştık. Ağaç görünümünde köklerden çıkan dallar gibi Bellek Kullanımı, CPU Kullanımı’nı CallStack bazında gösteren grafik türüdür.

1. Flame Graph

Bu örnekte farklı FlameGraph verisi üretebilecek bir Veri Üretim yapısı oluşturdum. 2 tane kontrol değişkeni bulunuyor.

  • Dividing Count: X eksenin maks bölünme sayısı
  • Level Count: Y eksenindeki maks bar sayısı
https://onurdayibasi.dev/flame-graph

2. Flame Graph With Custom Tooltip

FlameGraph üzerinde gezerken ekstra veri göstermek istiyorsak kendi Custom Tooltip geliştirmemiz gerekiyor. Bu örnekte CustomTooltip deneyebilirsiniz.

https://onurdayibasi.dev/flame-graph-custom-tooltip

3. Flame Graphs Coloring

Bu örnekte FlameGraph farklı renk paletleri ile görüp, deneyebilirsiniz. Farklı renk tonları sizin uygulamanız için daha ayırt edici olup, görsellerinizin daha anlaşılır olmasını sağlar.

  • Native Colors
  • Color Temperatures
  • Brewer
https://onurdayibasi.dev/flame-graph-coloring

4. Flame Graphs Auto Sizing (Responsive)

Bu örnekte farklı genişlikteki Layout’lara FlameGraph yerleştirdiğimizde ona göre FlameGraph otomatik resize olmasını analiz ediyoruz.

https://onurdayibasi.dev/flame-graph-auto-size

Okumaya Devam Et 😃

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

--

--