D3.js - Menggambar Grafik

D3.js digunakan untuk membuat grafik SVG statis. Ini membantu untuk menggambar grafik berikut -

  • Grafik batang
  • Diagram Lingkaran
  • Pie chart
  • Bagan Donat
  • Bagan Garis
  • Bagan Gelembung, dll.

Bab ini menjelaskan tentang menggambar grafik di D3. Mari kita pahami masing-masing secara rinci.

Grafik batang

Bagan batang adalah salah satu jenis grafik yang paling umum digunakan dan digunakan untuk menampilkan dan membandingkan jumlah, frekuensi, atau ukuran lain (misalnya rata-rata) untuk berbagai kategori atau grup diskrit. Grafik ini dibuat sedemikian rupa sehingga tinggi atau panjang batang yang berbeda sebanding dengan ukuran kategori yang diwakilinya.

Sumbu x (sumbu horizontal) mewakili kategori berbeda yang tidak memiliki skala. Sumbu y (sumbu vertikal) memang memiliki skala dan ini menunjukkan satuan pengukuran. Batang dapat digambar secara vertikal atau horizontal tergantung pada jumlah kategori dan panjang atau kompleksitas kategori.

Gambarlah Diagram Batang

Mari kita buat diagram batang di SVG menggunakan D3. Untuk contoh ini, kita bisa menggunakanrect elements untuk bar dan text elements untuk menampilkan nilai data kami yang sesuai dengan bilah.

Untuk membuat diagram batang di SVG menggunakan D3, mari kita ikuti langkah-langkah yang diberikan di bawah ini.

Step 1 - Adding style in the rect element - Mari kita tambahkan gaya berikut ke elemen persegi.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Tambahkan kelas CSS berikut untuk menerapkan gaya ke nilai teks. Tambahkan gaya ini ke elemen teks SVG. Ini didefinisikan di bawah -

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

Di sini, Isi digunakan untuk menerapkan warna. Jangkar teks digunakan untuk memposisikan teks ke arah ujung kanan bilah.

Step 3 - Define variables- Mari kita tambahkan variabel dalam skrip. Ini dijelaskan di bawah.

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

Sini,

  • Width - Lebar SVG.

  • Scalefactor - Diskalakan ke nilai piksel yang terlihat di layar.

  • Barheight - Ini adalah ketinggian statis batang horizontal.

Step 4 - Append SVG elements - Mari kita tambahkan elemen SVG di D3 menggunakan kode berikut.

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

Di sini, pertama-tama kita akan memilih badan dokumen, membuat elemen SVG baru, lalu menambahkannya. Kami akan membangun grafik batang kami di dalam elemen SVG ini. Kemudian, atur lebar dan tinggi SVG. Tinggi dihitung sebagai tinggi batang * jumlah nilai data.

Kita mengambil tinggi batang 30 dan panjang data array 4. Kemudian tinggi SVG dihitung sebagai tinggi batang * datalength yaitu 120 px.

Step 5 - Apply transformation - Mari kita terapkan transformasi dalam bar menggunakan kode berikut.

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

Di sini, setiap bilah di dalamnya sesuai dengan elemen. Oleh karena itu, kami membuat elemen grup. Setiap elemen grup kita harus ditempatkan satu di bawah yang lain untuk membuat diagram batang horizontal. Mari kita ambil indeks rumus transformasi tinggi batang *.

Step 6 - Append rect elements to the bar- Pada langkah sebelumnya, kami menambahkan elemen grup. Sekarang tambahkan elemen persegi ke bilah menggunakan kode berikut.

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

Di sini, lebarnya adalah (nilai data * faktor skala) dan tinggi adalah (tinggi batang - margin).

Step 7 - Display data- Ini langkah terakhir. Mari kita tampilkan data pada setiap batang menggunakan kode berikut.

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

Di sini, lebar didefinisikan sebagai (nilai data * faktor skala). Elemen teks tidak mendukung padding atau margin. Untuk alasan ini, kita perlu memberikan offset “dy”. Ini digunakan untuk meratakan teks secara vertikal.

Step 8 - Working example- Daftar kode lengkap ditunjukkan pada blok kode berikut. Buat halaman webbarcharts.html dan tambahkan perubahan berikut.

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>

Sekarang minta browser Anda, Anda akan melihat respon berikut.

Diagram Lingkaran

Bagan lingkaran adalah grafik statistik melingkar, yang dibagi menjadi beberapa bagian untuk menggambarkan proporsi numerik.

Gambarlah Diagram Lingkaran

Mari kita buat diagram lingkaran di SVG menggunakan D3. Untuk melakukan ini, kita harus mematuhi langkah-langkah berikut -

Step 1 - Define variables- Mari kita tambahkan variabel dalam skrip. Itu ditunjukkan pada blok kode di bawah ini.

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

Sini,

  • Width - lebar SVG.

  • Height - ketinggian SVG.

  • Data - array elemen data.

  • Colors - terapkan warna ke elemen lingkaran.

Step 2 - Append SVG elements - Mari kita tambahkan elemen SVG di D3 menggunakan kode berikut.

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

Step 3 - Apply transformation - Mari kita terapkan transformasi dalam SVG menggunakan kode berikut.

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

Sini,

var g = svg.selectAll(“g”) - Membuat elemen grup untuk menahan lingkaran.

.data(data) - Mengikat array data kita ke elemen grup.

.enter() - Membuat placeholder untuk elemen grup kami.

.append(“g”) - Menambahkan elemen grup ke halaman kami.

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

Di sini, translate digunakan untuk memposisikan elemen Anda sehubungan dengan asalnya.

Step 4 - Append circle elements - Sekarang, tambahkan elemen lingkaran ke grup menggunakan kode berikut.

g.append("circle")

Sekarang, tambahkan atribut ke grup menggunakan kode berikut.

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

Di sini, kami menggunakan koordinat x dari pusat setiap lingkaran. Kami mengalikan indeks lingkaran dengan 75 dan menambahkan bantalan 50 di antara lingkaran.

Selanjutnya, kami mengatur koordinat y dari pusat setiap lingkaran. Ini digunakan untuk menyamakan semua lingkaran dan itu didefinisikan di bawah.

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

Selanjutnya, tentukan jari-jari setiap lingkaran. Ini didefinisikan di bawah,

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

Di sini jari-jari dikalikan dengan nilai data dengan konstanta “1,5” untuk menambah ukuran lingkaran. Terakhir, isi warna untuk setiap lingkaran menggunakan kode berikut.

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

Step 5 - Display data- Ini langkah terakhir. Mari kita tampilkan data pada setiap lingkaran menggunakan kode berikut.

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- Daftar kode lengkap ditunjukkan pada blok kode berikut. Buat halaman webcirclecharts.html dan tambahkan perubahan berikut di dalamnya.

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>

Sekarang, minta browser Anda dan berikut akan menjadi tanggapannya.

Pie chart

Diagram lingkaran adalah grafik statistik melingkar. Ini dibagi menjadi beberapa irisan untuk menunjukkan proporsi numerik. Mari kita pahami cara membuat diagram lingkaran di D3.

Gambarlah Diagram Lingkaran

Sebelum mulai menggambar diagram lingkaran, kita perlu memahami dua metode berikut -

  • Metode d3.arc () dan
  • Metode d3.pie ().

Mari kita pahami kedua metode ini secara mendetail.

The d3.arc() Method- Metode d3.arc () menghasilkan busur. Anda perlu menetapkan radius dalam dan radius luar untuk busur. Jika jari-jari dalam adalah 0, hasilnya adalah diagram lingkaran, jika tidak, hasilnya adalah diagram donat, yang akan dibahas di bagian selanjutnya.

The d3.pie()Method- Metode d3.pie () digunakan untuk membuat diagram lingkaran. Ini mengambil data dari kumpulan data dan menghitung sudut awal dan sudut akhir untuk setiap irisan diagram lingkaran.

Mari kita menggambar diagram lingkaran menggunakan langkah-langkah berikut.

Step 1 - Applying styles - Mari kita terapkan gaya berikut ke elemen busur.

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

.arc path {
   stroke: #fff;
}

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

Di sini, isi digunakan untuk mengaplikasikan warna. Jangkar teks digunakan untuk memposisikan teks ke arah tengah busur.

Step 2 - Define variables - Tentukan variabel dalam skrip seperti yang ditunjukkan di bawah ini.

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

Sini,

  • Width - Lebar SVG.

  • Height - Ketinggian SVG.

  • Radius - Dapat dihitung menggunakan fungsi Math.min (lebar, tinggi) / 2;

Step 3 - Apply Transformation - Terapkan transformasi berikut di SVG menggunakan kode berikut.

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

Sekarang tambahkan warna menggunakan d3.scaleOrdinal berfungsi seperti yang diberikan di bawah ini.

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

Step 4 - Generate a pie chart - Sekarang, buat diagram lingkaran menggunakan fungsi yang diberikan di bawah ini.

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

Di sini, Anda dapat memplot nilai persentase. Fungsi anonim diperlukan untuk kembalid.percent dan menetapkannya sebagai nilai pai.

Step 5 - Define arcs for pie wedges - Setelah membuat diagram lingkaran, sekarang tentukan busur untuk setiap potongan lingkaran menggunakan fungsi yang diberikan di bawah ini.

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

Di sini, busur ini akan diatur ke elemen jalur. Radius yang dihitung diatur ke radius luar, sedangkan radius dalam diatur ke 0.

Step 6 - Add labels in wedges- Tambahkan label pada irisan pai dengan memberikan radius. Ini didefinisikan sebagai berikut.

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

Step 7 - Read data- Ini adalah langkah penting. Kita dapat membaca data menggunakan fungsi yang diberikan di bawah ini.

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

Sini, populations.csvberisi file data. Itud3.csvfungsi membaca data dari dataset. Jika data tidak ada, itu membuat kesalahan. Kami dapat menyertakan file ini di jalur D3 Anda.

Step 8 - Load data - Langkah selanjutnya adalah memuat data menggunakan kode berikut.

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

Di sini, kita dapat menetapkan data ke elemen grup untuk masing-masing nilai data dari dataset.

Step 9 - Append path - Sekarang, tambahkan jalur dan tetapkan 'busur' kelas ke grup seperti yang ditunjukkan di bawah ini.

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

Di sini, isian digunakan untuk menerapkan warna data. Ini diambil darid3.scaleOrdinal fungsi.

Step 10 - Append text - Untuk menampilkan teks dalam label menggunakan kode berikut.

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

Di sini, elemen teks SVG digunakan untuk menampilkan teks dalam label. Label busur yang kita buat sebelumnya menggunakand3.arc()mengembalikan titik pusat, yang merupakan posisi untuk label. Terakhir, kami menyediakan data menggunakand.data.browser.

Step 11 - Append group elements - Tambahkan atribut elemen grup dan tambahkan judul kelas untuk mewarnai teks dan membuatnya menjadi miring, yang ditentukan pada Langkah 1 dan ditentukan di bawah.

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- Untuk menggambar diagram lingkaran, kita dapat mengambil kumpulan data penduduk India. Dataset ini menunjukkan populasi di situs dummy, yang didefinisikan sebagai berikut.

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

Mari kita buat visualisasi diagram lingkaran untuk dataset di atas. Buat halaman web “piechart.html” dan tambahkan kode berikut di dalamnya.

<!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>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved