Heatmap.js Nedir?

Isı (veya yoğunluk) haritasına kısaca değindiğim giriş yazısının ardından, Hotjar ve diğer heatmap özelliği sunan uygulamaların yanı sıra kolaylıkla web sayfası veya web uygulamalarına entegre edilebilecek ve kullanılabilecek heatmap.js adındaki bir javascript kütüphanesinden (kurulum ve kullanım) temel bir şekilde bahsetmek istiyorum.

Destek

Kullanıcı Davranışı Analizi ve Kullanıcı Deneyimi Tasarımı konuları ile ilgili desteğe mi ihtiyacın var? Danışmanlık için destek talebinde bulunabilirsin.

Heatmap.js

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 (harita1, görsel veya sayfa/canvas vb.) için de kullanılabilir bir yapı2 sağlamakta. Örneğin, FIFA.com kütüphaneyi futbol maçlarında, topun saha üzerindeki yoğunluğunun gösteriminde kullanmakta.

Saha içi ısı haritası

Kütüphanenin ilk adımları Patrick Wied3 tarafından atılmış. Bu sebeple uygulamanın ana sayfası olarak heatmap.js yolunu öne çıkarmak mümkün4. Diğer yandan, uygulama gelişimine GitHub5 ü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ümantasyona6 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ümantasyonuna6 göz atabilirsiniz.

Heatmap.js

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.