Heatmap.js Nedir?

Heatmap.js

Heatmap.js, üç boyutlu verilerin görselleştirilmesine ve bu sayede kullanıcı davranışlarının anlamlandırılabilmesine yardımcı olmak amacıyla geliştirilmiş, hafif ve kullanımı kolay bir JavaScript kütüphanesidir. Elbette kütüphane daha pek çok çılgınca fikir (harita¹, görsel veya sayfa/canvas vb.) için de kullanılabilir bir yapı² sağlamakta. Örneğin, FIFA.com kütüphaneyi futbol maçlarında, topun saha üzerindeki yoğunluğunun gösteriminde kullanmakta.

Kütüphanenin ilk adımları Patrick Wied³ tarafından atılmış. Bu sebeple uygulamanın ana sayfası olarak heatmap.js yolunu öne çıkarmak mümkün⁴. Diğer yandan, uygulama gelişimine GitHub⁵ üzerinden sürdürmekte.

Heatmap.js Kurulum ve Kullanımı

Kütüphaneyi yukarıdaki belirttiğim kaynak web sitelerinin yanı sıra npm ve yarn paket yöneticileri aracılığıyla da edinmek mümkün.

yarn add heatmap.js
# ya da
npm install heatmap.js

Ancak ben örneklendirme sürecinde CDN aracılığıyla ilgili kütüphaneyi çalışma dosyası ile ilişkilendireceğim. Bu amaçla unpkg veya jsdelivr servislerinden faydalanabiliriz. Çoğu durumda unpkg’in daha güncel olduğunu bilmenizde fayda var.

https://unpkg.com/heatmap.js@2.0.5/build/heatmap.js
https://cdn.jsdelivr.net/npm/heatmapjs@2.0.2/heatmap.js

Kurulum işlemlerine de değinildiğine göre temel olarak heatmap.js’in nasıl kullanılabileceğine bir bakalım. Bilinmesi gereken ilk konu, “h337” ile heatmap.js için bir global nesne tanımlandığıdır. Bu nesne aracılığıla ısı haritası örnekleri oluşturmak mümkün hale gelmektedir.

var heatmapContainer = document.querySelector('.heatmap');

var heatmapInstance = h337.create({
  container: heatmapContainer,
});

h337.create(configObject) bize `heatmapInstance`‘i döndürür. Heatmap’i `configObject` ile özelleştirebiliriz; backgroundColor, gradient, radius, opacity vb.

var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75
};
var heatmapInstance = h337.create(config);

Daha detaylı bilgi için ilgili dokümantasyona⁶ göz atabilirsiniz.

Yukarıdaki tanımların ardından, container ile (configObject parametresi zorunludur) canvas olarak nitelendirilecek alanın (element, class, id) belirtilmesi gerekir. Örnek olarak aşağıdaki tanıma göz atabilirsiniz .heatmap class’ı body etiketiyle ilişkilendirdiğimizi varsayalım. Bu aşamada artık ısı haritasının nasıl oluşturulacağına karar vermemiz gerekmekte.

heatmapInstance.setData({
  max: 5,
  data: [{
    x: 120,
    y: 120,
    value: 20,
    radius: 250
  }, {
    x: 450,
    y: 100,
    value: 5
  }]
});

Yukarıda heatmapInstance.setData() için data içeriğinde x ve y pozisyonları, ısı yoğunluğu ve bu yoğunluğun derecesini ifade edebiliriz. Bu tanımların sonucunda şu görüntüyü elde ederiz.

Yukarıdaki işlemi heatmapInstance.addData() ile de gerçekleştirebilirdik. Ancak, bu durumda anında veri noktaları belirtmemiz gerekirdi.

var dataPoint = {
  x: 5,
  y: 5,
  value: 100
};
heatmapInstance.addData(dataPoint);

Çoklu veri noktaları için ise kullanım şu şekilde olacaktır.

var dataPoints = \[dataPoint, dataPoint, dataPoint, dataPoint\];
heatmapInstance.addData(dataPoints);

heatmapInstance.setData() ile heatmapInstance.addData() arasındaki en önemli fark, setData() için “min”, “max” ve “data” özelliklerinin gerekli olmasının yanı sıra, setData‘nın önceden var olan tüm veri noktalarını heatmap örneğinden kaldırıp ve veri deposunu yeniden başlatacağı ve kendi içeriğindeki veri kümesini uygulayacak olmasıdır.

var data = {
  max: 100,
  min: 0,
  data: [
    dataPoint, dataPoint, dataPoint, dataPoint
  ]
};
heatmapInstance.setData(data);

Yukarıdaki temel tanımlar işimizi fazlasıyla görecektir. Ancak, harici diğer bilgiler için heatmap.js dokümantasyonuna⁶ göz atabilirsiniz.

Az önce de bahsettiğim gibi, örnekte config tanımını body class’ı ile gerçekleştirdim. Ek olarak, addData ile anlık olarak mouse pozisyonunun işleme alınmasını istedim. Örneği uyguladığınızda, tarayıcınızın JavaScript console’unu açarak ilgili pozisyon bilgilerini görüntüleyebilirsiniz.

<body class="heatmap">
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">My first website with <strong>Bulma</strong>!</p>
    </div>
  </section>

  <script src="https://unpkg.com/heatmap.js@2.0.5/build/heatmap.js"></script>

  <script>
    window.onload = function () {
      var heatmapContainer = document.querySelector('.heatmap');

      var heatmapInstance = h337.create({
        container: heatmapContainer,
        radius: 50
      });

      heatmapContainer.onmousemove = heatmapContainer.ontouchmove = function (e) {
        e.preventDefault();
        var x = e.layerX;
        var y = e.layerY;
        if (e.touches) {
          x = e.touches[0].pageX;
          y = e.touches[0].pageY;
        }

        heatmapInstance.addData({
          x: x,
          y: y,
          value: 1
        });

        console.log('X:' + x + ',Y:' + y);
      };

    };
  </script>

Yukarıdaki örnek elbette en temel yaklaşımlardan biri. Daha kapsamlı örnekler için heatmapjs > examples sayfasına göz atmanızda fayda var. Özellikle harita ve fotoğraf örneklerinin e-ticaret uygulamaları için ayrı bir fayda sağlayacağını düşünüyorum.