D3.js - Çizim Grafikleri

D3.js, statik bir SVG grafiği oluşturmak için kullanılır. Aşağıdaki çizelgeleri çizmeye yardımcı olur -

  • Grafik çubuğu
  • Daire Grafik
  • Yuvarlak diyagram
  • Halka Grafik
  • Çizgi grafik
  • Kabarcık Grafiği vb.

Bu bölüm, D3'teki çizim çizelgelerini açıklar. Bunların her birini ayrıntılı olarak anlayalım.

Grafik çubuğu

Çubuk grafikler en yaygın kullanılan grafik türlerinden biridir ve farklı ayrı kategoriler veya gruplar için sayı, frekans veya diğer ölçüleri (örneğin ortalama) görüntülemek ve karşılaştırmak için kullanılır. Bu grafik, farklı çubukların yükseklikleri veya uzunlukları temsil ettikleri kategorinin boyutlarıyla orantılı olacak şekilde oluşturulmuştur.

X ekseni (yatay eksen), ölçeği olmayan farklı kategorileri temsil eder. Y ekseninin (dikey eksen) bir ölçeği vardır ve bu, ölçü birimlerini gösterir. Çubuklar, kategori sayısına ve kategorinin uzunluğuna veya karmaşıklığına bağlı olarak dikey veya yatay olarak çizilebilir.

Çubuk Grafik çizin

D3 kullanarak SVG'de bir çubuk grafik oluşturalım. Bu örnek için kullanabilirizrect elements barlar için ve text elements çubuklara karşılık gelen veri değerlerimizi görüntülemek için.

D3 kullanarak SVG'de bir çubuk grafik oluşturmak için, aşağıda verilen adımları takip edelim.

Step 1 - Adding style in the rect element - rect elemanına aşağıdaki stili ekleyelim.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Metin değerlerine stil uygulamak için aşağıdaki CSS sınıfını ekleyin. Bu stili SVG metin öğesine ekleyin. Aşağıda tanımlanmıştır -

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

Dolgu burada renkleri uygulamak için kullanılır. Metin bağlantısı, metni çubukların sağ ucuna doğru konumlandırmak için kullanılır.

Step 3 - Define variables- Betiğe değişkenleri ekleyelim. Aşağıda açıklanmıştır.

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

Buraya,

  • Width - SVG'nin genişliği.

  • Scalefactor - Ekranda görünen bir piksel değerine ölçeklendi.

  • Barheight - Bu, yatay çubukların statik yüksekliğidir.

Step 4 - Append SVG elements - Aşağıdaki kodu kullanarak D3'teki SVG öğelerini ekleyelim.

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Burada önce belge gövdesini seçeceğiz, yeni bir SVG öğesi oluşturacağız ve sonra onu ekleyeceğiz. Çubuk grafiğimizi bu SVG öğesinin içinde oluşturacağız. Ardından, SVG'nin genişliğini ve yüksekliğini ayarlayın. Yükseklik, çubuk yüksekliği * veri değerlerinin sayısı olarak hesaplanır.

Çubuk yüksekliğini 30 olarak aldık ve veri dizisi uzunluğu 4'tür. Ardından SVG yüksekliği, 120 piksel olan çubuk yüksekliği * veri uzunluğu olarak hesaplanır.

Step 5 - Apply transformation - Aşağıdaki kodu kullanarak dönüşümü çubuğa uygulayalım.

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

Burada, içindeki her çubuk bir öğeye karşılık gelir. Bu nedenle, grup öğeleri oluşturuyoruz. Yatay bir çubuk grafik oluşturmak için grup öğelerimizin her birinin birbirinin altına yerleştirilmesi gerekir. Bir dönüşüm formülü indeksi * çubuk yüksekliği alalım.

Step 6 - Append rect elements to the bar- Önceki adımda grup öğelerini ekledik. Şimdi, aşağıdaki kodu kullanarak rect elemanlarını çubuğa ekleyin.

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

Burada genişlik (veri değeri * ölçek faktörü) ve yükseklik (çubuk yüksekliği - kenar boşluğu).

Step 7 - Display data- Bu son adım. Aşağıdaki kodu kullanarak her çubuktaki verileri görüntüleyelim.

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

Burada genişlik (veri değeri * ölçeklendirme) olarak tanımlanır. Metin öğeleri, dolgu veya kenar boşluğunu desteklemez. Bu nedenle ona bir "dy" ofseti vermemiz gerekiyor. Bu, metni dikey olarak hizalamak için kullanılır.

Step 8 - Working example- Tam kod listesi aşağıdaki kod bloğunda gösterilir. Bir web sayfası oluşturunbarcharts.html ve aşağıdaki değişiklikleri ekleyin.

barcharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

Şimdi tarayıcınızı isteyin, aşağıdaki yanıtı göreceksiniz.

Daire Grafik

Daire grafiği, sayısal bir oranı göstermek için dilimlere bölünmüş dairesel bir istatistiksel grafiktir.

Daire Grafiği Çizin

SVG'de D3 kullanarak bir daire grafiği oluşturalım. Bunu yapmak için aşağıdaki adımlara uymalıyız -

Step 1 - Define variables- Betiğe değişkenleri ekleyelim. Aşağıdaki kod bloğunda gösterilmektedir.

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

Buraya,

  • Width - SVG'nin genişliği.

  • Height - SVG'nin yüksekliği.

  • Data - veri öğeleri dizisi.

  • Colors - daire elemanlarına renkleri uygulayın.

Step 2 - Append SVG elements - Aşağıdaki kodu kullanarak D3'teki SVG öğelerini ekleyelim.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Apply transformation - Aşağıdaki kodu kullanarak dönüşümü SVG'de uygulayalım.

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

Buraya,

var g = svg.selectAll(“g”) - Daireleri tutmak için grup öğesi oluşturur.

.data(data) - Veri dizimizi grup elemanlarına bağlar.

.enter() - Grup öğelerimiz için yer tutucular oluşturur.

.append(“g”) - Grup öğelerini sayfamıza ekler.

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

Burada, öğelerinizi orijine göre konumlandırmak için çeviri kullanılır.

Step 4 - Append circle elements - Şimdi, aşağıdaki kodu kullanarak çember öğelerini gruba ekleyin.

g.append("circle")

Şimdi, aşağıdaki kodu kullanarak öznitelikleri gruba ekleyin.

.attr("cx", function(d, i) {
   return i*75 + 50;
})

Burada, her dairenin merkezinin x koordinatını kullanıyoruz. Dairenin indeksini 75 ile çarpıyoruz ve dairelerin arasına 50'lik bir dolgu ekliyoruz.

Ardından, her dairenin merkezinin y koordinatını belirliyoruz. Bu, tüm daireleri tekdüze etmek için kullanılır ve aşağıda tanımlanmıştır.

.attr("cy", function(d, i) {
   return 75;
})

Ardından, her dairenin yarıçapını ayarlayın. Aşağıda tanımlanmıştır,

.attr("r", function(d) {
   return d*1.5;
})

Burada, yarıçap, dairenin boyutunu artırmak için sabit bir "1,5" ile birlikte veri değeriyle çarpılır. Son olarak, aşağıdaki kodu kullanarak her daire için renkleri doldurun.

.attr("fill", function(d, i){
   return colors[i];
})

Step 5 - Display data- Bu son adım. Aşağıdaki kodu kullanarak her daire üzerindeki verileri görüntüleyelim.

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

Step 6 - Working Example- Tam kod listesi aşağıdaki kod bloğunda gösterilir. Bir web sayfası oluşturuncirclecharts.html ve aşağıdaki değişiklikleri ekleyin.

circlecharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

Şimdi, tarayıcınızı isteyin ve ardından yanıt alınacaktır.

Yuvarlak diyagram

Pasta grafik, dairesel bir istatistiksel grafiktir. Sayısal orantıyı göstermek için dilimlere bölünmüştür. D3'te bir pasta grafiğin nasıl oluşturulacağını anlayalım.

Pasta Grafik Çizin

Bir pasta grafiği çizmeye başlamadan önce, aşağıdaki iki yöntemi anlamamız gerekir -

  • D3.arc () yöntemi ve
  • D3.pie () yöntemi.

Bu yöntemlerin ikisini de ayrıntılı olarak anlayalım.

The d3.arc() Method- d3.arc () yöntemi bir yay oluşturur. Yay için bir iç yarıçap ve bir dış yarıçap ayarlamanız gerekir. İç yarıçap 0 ise, sonuç bir pasta grafik olacaktır, aksi takdirde sonuç bir sonraki bölümde tartışılan halka grafik olacaktır.

The d3.pie()Method- d3.pie () yöntemi, bir pasta grafik oluşturmak için kullanılır. Veri kümesinden bir veri alır ve pasta grafiğin her bir bölümü için başlangıç ​​açısını ve bitiş açısını hesaplar.

Aşağıdaki adımları kullanarak bir pasta grafik çizelim.

Step 1 - Applying styles - Aşağıdaki stili bir yay elemanına uygulayalım.

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

Burada dolgu renkleri uygulamak için kullanılır. Metni bir yayın merkezine doğru konumlandırmak için bir metin bağlantısı kullanılır.

Step 2 - Define variables - Koddaki değişkenleri aşağıda gösterildiği gibi tanımlayın.

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

Buraya,

  • Width - SVG'nin genişliği.

  • Height - SVG'nin yüksekliği.

  • Radius - Math.min (genişlik, yükseklik) / 2 işlevi kullanılarak hesaplanabilir;

Step 3 - Apply Transformation - Aşağıdaki kodu kullanarak SVG'de aşağıdaki dönüşümü uygulayın.

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Şimdi kullanarak renkleri ekleyin d3.scaleOrdinal aşağıda verildiği gibi işlev görür.

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

Step 4 - Generate a pie chart - Şimdi, aşağıda verilen işlevi kullanarak bir pasta grafik oluşturun.

var pie = d3.pie()
   .value(function(d) { return d.percent; });

Burada yüzde değerlerini çizebilirsiniz. Döndürmek için anonim bir işlev gereklidird.percent ve pasta değeri olarak ayarlayın.

Step 5 - Define arcs for pie wedges - Pasta grafiği oluşturduktan sonra, şimdi aşağıda verilen işlevi kullanarak her pasta dilimi için yay tanımlayın.

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

Burada bu yay, yol elemanlarına ayarlanacaktır. Hesaplanan yarıçap, dış yarıçapa, iç yarıçap ise 0'a ayarlanır.

Step 6 - Add labels in wedges- Yarıçapı sağlayarak etiketleri pasta dilimleri halinde ekleyin. Aşağıdaki gibi tanımlanır.

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

Step 7 - Read data- Bu önemli bir adım. Aşağıda verilen işlevi kullanarak verileri okuyabiliriz.

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

Buraya, populations.csvveri dosyasını içerir. d3.csvişlevi, veri kümesinden verileri okur. Veri yoksa, bir hata atar. Bu dosyayı D3 yolunuza ekleyebiliriz.

Step 8 - Load data - Sonraki adım, aşağıdaki kodu kullanarak verileri yüklemektir.

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

Burada, veri kümesindeki veri değerlerinin her biri için grup elemanlarına veri atayabiliriz.

Step 9 - Append path - Şimdi, yolu ekleyin ve aşağıda gösterildiği gibi gruplara bir 'yay' sınıfı atayın.

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

Burada veri rengini uygulamak için dolgu kullanılır. Dan alınırd3.scaleOrdinal işlevi.

Step 10 - Append text - Aşağıdaki kodu kullanarak metni etiketlerde görüntülemek için.

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

Burada, etiketlerde metin görüntülemek için SVG metin öğesi kullanılır. Daha önce kullanarak oluşturduğumuz etiket yaylarıd3.arc()etiketler için bir konum olan bir ağırlık merkezi noktası döndürür. Son olarak, verileri kullanarakd.data.browser.

Step 11 - Append group elements - Metni renklendirmek ve italik yapmak için grup öğeleri niteliklerini ekleyin ve sınıf başlığı ekleyin; bu, Adım 1'de belirtilmiştir ve aşağıda tanımlanmıştır.

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

Step 12 - Working Example- Bir pasta grafiği çizmek için, Hint popülasyonunun bir veri setini alabiliriz. Bu veri kümesi, aşağıdaki gibi tanımlanan sahte bir web sitesindeki popülasyonu gösterir.

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

Yukarıdaki veri kümesi için bir pasta grafik görselleştirmesi oluşturalım. Bir “piechart.html” web sayfası oluşturun ve aşağıdaki kodu içine ekleyin.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>