Data

Heatmap.js Nedir?

Yayın:
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 ...
GÖRSEL

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.

Heatmap.js Nedir?

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.

Heatmap.js

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.

Heatmap.js

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.

Gelelim Bulma CSS üzerinden hazırlanan örneğe. Öncelikle, ilgili örneği Git aracılığıyla edinmek için GitLab reposunu inceleyebilir ve git clone ile bilgisayarınıza indirebilirsiniz.

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.

Son Olarak

Heatmap Nedir?” başlıklı yazı ile işe başlayıp heatmap.js kütüphanesi üzerinden örneklendirdiğim süreci bir ısı haritasını nasıl okuyacağımıza dair bir anlatı ile bir sonraki yazıda sonlandıracağım. Yeni eklenen yazılardan haberdar olmak için twitter üzerinden profilimi takibe alabilirsiniz.

Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.