Written by Tahirhan YILDIZOĞLU

D3.js : Javascript Veri Görselleştirme Kütüphanesi

d3 js ile ilgili görsel sonucu

D3.js, javascript kullanarak veri görselleştirme işlemlerini gerçekleştirebileceğiniz bir kütüphane. Bu kütüphane yardımıyla, herhangi bir modern browser üzerinde HTML-CSS-SVG kullanarak görsel sunumlar hazırlayabilirsiniz.

Aynı zamanda D3.js kütüphanesinin özellikleri ile sunumlarınıza animasyonlar ekleyebilir, etkileşimli hale getirebilirsiniz.

Kısaca D3.js ile DOM nasıl manipüle edilir, basit bir bar grafiği nasıl oluşturulur inceleyelim.

Kütüphane Ekleme

D3.js, JavaScript kütüphanesi olduğu için tek bir satır ile HTML dosyanızın içerisine dahil edebilirsiniz.

https://d3js.org/d3.v4.min.js

D3.js GitHub linki => https://github.com/d3/d3

DOM Manipülasyonu

D3.js ile herhangi bir element oluşturabilir veya var olan elementi manipüle edebiliriz.

Örnek olarak başlık elementinin rengini ve yazı boyutunu değiştirelim.

<html>
<head>
    <title>5 dakikada D3 ogren</title>
</head>
<body>

<h3>Today is a beautiful day!!</h3>

https://d3js.org/d3.v4.min.js


    d3.select('h3').style('color', 'darkblue');
    d3.select('h3').style('font-size', '24px');

</body>
</html>

Yukarıdaki kod bloğunda basitçe, d3 objesi üzerinden “h3” tag ini seçiyoruz ve “style” yardımı ile renk ve yazı boyutunu değiştiriyoruz. Sonuç :

Veri Ekleme

D3.js ile eş zamanlı olarak DOM elementleri oluşturabiliriz.

HTML dosyası içerisine liste oluşturmak için “unordered list” yani “ul” tag i ekleyelim.

<ul> </ul>

ardından kısa bir script ile d3.js yardımıyla veri objelerimizi listeye ekleyelim.


    var fruits = ['apple', 'mango', 'banana', 'orange'];
    d3.select('ul')
        .selectAll('li')
        .data(fruits)
        .enter()
        .append('li')
        .text(function(d) { return d; });

Kodu açıklayalım. d3 objesi üzerinde önce “ul” tag’li listeyi seçiyoruz. Henüz eklemeden yani append etmeden “li” objelerin seçmek biraz saçma gelebilir ancak d3.js in çalışma mantığı bu şekilde. veri olarak tanımladığımız “fruits” dizisini zincire ekliyoruz. ardından döngü görevi gören “enter” ile dizideki elemanları sırayla listeye ekliyoruz. Sonuç :

SVG Elementleri Oluşturma

SVG ile DOM içerisinde grafik ve görsel oluşturulabilir. D3 kütüphanesi tüm görsel oluşturma işlemlerinde SVG kullandığından, bu yapı kütüphanenin temel yapı taşıdır diyebiliriz.

Basitçe D3 ile kare oluşturma script’i :

//SVG elementini sec
var svg = d3.select('svg');

//SVG icerisinde kare olustur
svg.append('rect')
   .attr('x', 50)
   .attr('y', 50)
   .attr('width', 200)
   .attr('height', 100)
   .attr('fill', 'green');

Kod üzerinde de anlaşılacağı üzere “svg” elementini seçiyoruz ve içerisine “rect” (rectangle) yani kare ekliyoruz. “attr” yardımı ile konum ve boyut bilgilerini zincire ekleyerek işlemi tamamlıyoruz. Sonuç :

Bar Grafiği Oluşturma

D3 ile birçok grafik türünü oluşturabilir, bunlara animasyon ekleyebilir, dilediğiniz şekilde yapısını değiştirebilirsiniz.

Örnek olması açısından basit bir bar grafiği oluşturalım. Öncelikle HTML içerisine SVG elementini ekleyelim.

<svg width='200' height='500'></svg>

Aşağıdaki script ile SVG içerisine grafiğimizi ekleyebiliriz.

var data = [80, 120, 150, 200];
var barHeight = 20;
var bar = d3.select('svg')
          .selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('width', function(d) {  return d; })
          .attr('height', barHeight - 1)
          .attr('transform', function(d, i) {
            return "translate(0," + i * barHeight + ")";
          });

Kodu inceleyelim.

“data” dizisinde tam sayı türünde verilerimiz var. “barHeight” yani bar yüksekliği 20 px olarak tanımladık.

“data” dizisindeki her veriyi ayrı bir bar olarak ekliyoruz. aslında bu barların herbiri bir kare. Bu arada “height” tanımlama kısmında 1 çıkarmanın sebebi padding. bar’ların yani karelerin üst üste çakışmaması için y eksenindeki pozisyonlarını “i” indekslerine bağlı biçimde ayarlıyoruz. Grafik yatay olacağı için bar’ların genişliklerine verinin büyüklüğünde bir piksel ataması yapıyoruz. Sonuç :

Event Kontrolü

Son olarak D3 ile event kontrolünden bahsedip yazıyı tamamlayalım. D3, halihazırda var olan ve özel oluşturulabilecek eventleri desteklemektedir. Örnek olarak bir buton üzerinde tıklama durumunda yapılacak işlemleri D3 ile tanımlayalım.

d3.select('#btn')
        .on('click', function () {
            d3.select('body')
               .append('h3')
               .text('Today is a beautiful day!!');
        });

Öncelikle d3 üzerinden “id” si “btn” olan element seçiliyor. bu elemente tıklama durumunda girilecek olan fonksiyon tanımlanıyor. Tıklama durumunda yine d3 yardımı ile “body” içerisine “h3” başlığı ekleniyor. Sonuç :

Umarım faydalı olmuştur. İyi Çalışmalar !

Eğitim – Danışmanlık – Proje istekleri için tahirhanyildizoglu2@gmail.com adresine mail atabilirsiniz.

Yorum bırakın