D3.js - Grafik

Grafik adalah ruang datar 2 dimensi yang direpresentasikan sebagai persegi panjang. Grafik memiliki ruang koordinat di mana koordinat x = 0 dan y = 0 berada di kiri bawah. Menurut ruang koordinat kartesius matematis, grafik memiliki koordinat X yang tumbuh dari kiri ke kanan dan koordinat Y tumbuh dari bawah ke atas.

Ketika kita berbicara tentang menggambar lingkaran dengan koordinat x = 30 dan y = 30, kita pergi 30 unit dari kiri bawah ke kanan dan kemudian kita naik 30 unit.

Ruang Koordinat SVG

SVG Koordinat Ruang bekerja dengan cara yang sama seperti grafik matematika ruang koordinat bekerja, kecuali untuk dua fitur penting -

Ruang koordinat SVG memiliki koordinat x = 0 dan y = 0 berada di kiri atas.
Ruang Koordinat SVG memiliki koordinat Y yang tumbuh dari atas ke bawah.

Grafik Ruang Koordinat SVG

Ketika kita berbicara tentang menggambar lingkaran dengan koordinat x = 30 dan y = 30 di Ruang Koordinat SVG, kita pergi 30 unit dari kiri atas ke kanan dan kemudian turun 30 unit ke atas. Ini didefinisikan sebagai berikut.

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

Perhatikan, elemen SVG sebagai grafik lebar 200 unit dan tinggi 200 unit. Sekarang kita tahu bahwa koordinat nol X dan Y ada di kiri atas. Sekarang kita juga tahu bahwa seiring dengan bertambahnya koordinat Y, ia akan berpindah dari atas ke bawah grafik kita. Anda dapat mengatur gaya elemen SVG seperti yang ditunjukkan di bawah ini.

var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 200)
   .attr("height", 200)
   .style("border", "1px solid black");

Contoh Grafik

Mari kita perhatikan contoh grafik Garis.

Line Graph- Grafik garis digunakan untuk memvisualisasikan nilai sesuatu dari waktu ke waktu. Ini membandingkan dua variabel. Setiap variabel diplot di sepanjang sumbu. Grafik garis memiliki sumbu vertikal dan sumbu horizontal.

Dalam contoh grafik ini, kita dapat mengambil catatan file csv sebagai bentuk Pertumbuhan Populasi Negara Bagian India tahun 2006 hingga 2017. Mari kita buat dulu a data.csv untuk menunjukkan catatan penduduk.

Buat file csv baru di folder D3 Anda -

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Sekarang, simpan file dan lakukan langkah-langkah berikut untuk menggambar grafik garis di D3. Mari kita bahas setiap langkah secara mendetail.

Step 1 - Adding styles - Mari kita tambahkan gaya ke line kelas menggunakan kode yang diberikan di bawah ini.

.line {
   fill: none;
   stroke: green;
   stroke-width: 5px;
}

Step 2 - Define variables - Atribut SVG ditentukan di bawah ini.

var margin = {top: 20, right: 20, bottom: 30, left: 50},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

Di sini, baris pertama mendefinisikan empat margin, yang mengelilingi blok tempat grafik ditempatkan.

Step 3 - Define line - Buat garis baru menggunakan d3.line() fungsi, yang ditunjukkan di bawah ini.

var valueline = d3.line()
   .x(function(d) { return x(d.year); })
   .y(function(d) { return y(d.population); });

Di sini, Tahun mewakili data dalam catatan sumbu X dan populasi mengacu pada data di sumbu Y.

Step 4 - Append SVG attributes - Tambahkan atribut SVG dan elemen grup menggunakan kode di bawah ini.

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

Di sini, kami telah menambahkan elemen grup dan menerapkan transformasi.

Step 5 - Read data - Sekarang, kita bisa membaca data dari dataset kita data.csv.

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

Di sini, data.csv tidak ada, itu membuat kesalahan.

Step 6 - Format data - Sekarang format datanya menggunakan kode di bawah ini.

data.forEach(function(d) {
   d.year = d.year;
   d.population = +d.population;
});

Kode di atas memastikan bahwa semua nilai yang ditarik dari file csv diatur dan diformat dengan benar. Setiap baris terdiri dari dua nilai - satu nilai untuk 'tahun' dan nilai lainnya untuk 'populasi'. Fungsinya menarik nilai 'tahun' dan 'populasi' satu baris dalam satu waktu.

Step 7 - Set scale range - Setelah data diformat, Anda dapat mengatur rentang skala untuk X dan Y.

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 8 - Append path - Tambahkan jalur dan data seperti yang ditunjukkan di bawah ini.

svg.append("path").data([data])
   .attr("class", "line").attr("d", valueline);

Step 9 - Add X-axis - Sekarang, Anda dapat menambahkan sumbu X menggunakan kode di bawah ini.

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

Step 10 - Add Y-axis - Kami dapat menambahkan sumbu Y ke grup seperti yang ditunjukkan di bawah ini.

svg.append("g")
   .call(d3.axisLeft(y));

Step 11 - Working Example- Kode lengkap diberikan di blok kode berikut. Buat halaman web sederhanalinegraphs.html dan tambahkan perubahan berikut ke dalamnya.

graph.html

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style> 
         .line {
            fill: none;
            stroke: green;
            stroke-width: 5px;
         }
      </style>
   </head>

   <body>
      <script>
         // set the dimensions and margins of the graph
         var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

         // set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);

         // define the line
         var valueline = d3.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d.population); });

         // append the svg obgect to the body of the page
         // appends a 'group' element to 'svg'
         // moves the 'group' element to the top left margin
         var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
               "translate(" + margin.left + "," + margin.top + ")");

         // Get the data
         d3.csv("data.csv", function(error, data) {
            if (error) throw error;
            // format the data
            data.forEach(function(d) {
               d.year = d.year;
               d.population = +d.population;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

            // Add the valueline path.
            svg.append("path")
               .data([data])
               .attr("class", "line")
               .attr("d", valueline);

            // Add the X Axis
            svg.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x));

            // Add the Y Axis
            svg.append("g")
               .call(d3.axisLeft(y));
         });
      </script>
   </body>
</html>

Sekarang minta browser dan kita akan melihat hasil berikut.