Membuat Diagram Batang Sederhana pada Laman HTML Menggunakan d3.js

09 Juli 2022 08:01

560

#html #javascript

(Untuk kelas 3KA04 dan 3KA11)

Pertama, tentukan direktori (folder) di komputer kalian tempat kalian akan mengerjakan praktik ini. Bebas.

Kemudian buatlah sebuah file HTML, nama bebas, tapi saya beri nama generic: index.html.

Saran saya, gunakan editor teks semacam Visual Studio Code, Atom, Sublime Text, atau Notepad++. Boleh juga menggunakan sebuah Web IDE, atau bahkan hanya Notepad bawaan Windows. Saya menggunakan VS Code.

Berikut isi file index.html:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diagram Batang</title>
</head>

<body>
    <!-- Muat modul d3.js -->
    <script src="https://d3js.org/d3.v6.js"></script>

    <!-- Div di bawah adalah tempat kita meletakkan diagram pada laman -->
    <div id="my_dataviz"></div>

    <script>
    // ...
    </script>
</body>

</html>

Perhatikan, ada dua elemen penting (tag) di dalam file yang dicontohkan di atas, yaitu <script> dengan atribut src dimana kita memanggil modul d3.js yang tidak berada di komputer kita, dan juga <div> dengan atribut id bernama my_dataviz.

Oiya, ada sebuah <script> kosong dengan satu komentar // ...., nanti kita akan menulis kode di sini.

File HTML di atas adalah dokumen HTML versi 5 standar, kalian lihat ada <!DOCTYPE html> (ini wajib ada di semua dokumen HTML agar browser tahu bahwa ini adalah HTML versi 5).

Juga terdapat penanda bahasa (dalam hal ini Indonesia: <html lang="id">), dan ada beberapa tag yang kalian pasti tidak asing, misalnya <head> dan <body>.

Sampai di sini mudah bukan?

Mengunduh File CSV untuk Latihan

Unduh sebuah file CSV di sini: staffsite

Unduh dan letakkan di tempat yang sama dengan kalian membuat file index.html tadi.

Kode JavaScript

Silakan copy-paste kode di bawah ini ke dalam tag <script> yang ada teks // ... seperti terlihat di atas tadi.

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .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})`);

// Parse the Data
d3.csv("data.csv").then( function(data) {

// X axis
const x = d3.scaleBand()
  .range([ 0, width ])
  .domain(data.map(d => d.Country))
  .padding(0.2);
svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

// Add Y axis
const y = d3.scaleLinear()
  .domain([0, 13000])
  .range([ height, 0]);
svg.append("g")
  .call(d3.axisLeft(y));

// Bars
svg.selectAll("mybar")
  .data(data)
  .join("rect")
    .attr("x", d => x(d.Country))
    .attr("y", d => y(d.Value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d.Value))
    .attr("fill", "#69b3a2")

})

Simpan, lalu buka file index.html menggunakan browser favorit kalian. Apakah outputnya?

Contoh Hasil Praktik

Karena artikel blog ini juga menggunakan HTML, saya pun bisa membuat outputnya dengan langkah-langkah di atas. Perhatikan hasilnya di bawah: