Photo by Clay Banks on Unsplash

VISUALIZATION-SERIES

Visualization — Heatmap 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 20, 2023

--

Bugün Heatmap yani sıcaklık haritaları üzerine yaptığımız örnekler hakkında bir yazı yazacağım. Ve zaman içerisinde bu örnekleri çoğaltmayı düşünüyorum.

Heatmap bir alan üzerinde sizin farklı yoğunlukları algılamanıza olanak sağlayan renklendirme/gölgelendirme görselleştirlmelidir.

Bu alan harita üzerindeki bir ülkenin popülasyonu, seçim sonuçları, gelir durumu olabildiği gibi.

bir ekran üzerindeki kullanım sıklığı da olabilir

Veya belli kategori veya sayısal gruplamalar içerisindeki verinin bir grid içerisinde renklendirmeside olabilir.

Tüm yukarıdaki görselleştirmelerin amacı yoğunluk olan yerlerin daha net anlaşılması , gerekiyor ise renkler ile farklılaştırmanın sağlanmasıdır.

1. Color Range Bar

Bu örnekte renk skalasının aralıklarının nasıl render edildiğini gösterecek bir bileşen geliştirdik.

https://onurdayibasi.dev/color-range-bar

2. HeatMap

Bu örnekte elimizde bulunan veriyi Heatmap Layout/Chart ile görselleştirdik..

https://onurdayibasi.dev/heatmap

3. HeatMap Events

Heatmap üzerinde MouseEventleri ile kompleks eventleri gerçekleştirebilecek altyapıyı oluşturmaya çalışıyoruz.

  • Alan Seçimi
  • Bir tane grid karesinin seçimi

Bu kompleks eventler için öncelikle mouse eventlerini doğru şekilde anlamamız gerekiyor.

https://onurdayibasi.dev/heatmap-events

4. HeatMap Selection

Bu örnekte aşağıdaki 2 seçimi yapmayı ve bu seçimler sırasında etkileşimi anlatacak görsel değişiklikleri gerçekleştiriyoruz.

  • Alan Seçimi
  • Bir tane grid karesinin seçimi
https://onurdayibasi.dev/heatmap-selection

Okumaya Devam Et 😃

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

--

--