Diagram Batang Sederhana Menggunakan d3.js pada halaman HTML
Pengertian D3.js
D3.js adalah library JavaScript yang dipakai untuk memanipulasi dokumen HTML dan menggambar diagram berdasarkan data yang diberikan. Library ini menggunakan HTML, CSS, dan SVG Untuk membuat representasi visual dari kumpulan data yang bisa dilihat diberbagai browser modern. D3.js juga memiliki fitur untuk membuat diagram yang interaktif dengan animasi - animasi menarik.
Tutorial Membuat Diagram Batang Sederhanan menggunakan D3.js Pada Laman HTML
- Langkah pertama menentukan folder tempat untuk menyimpan pada device.
- Setelah itu, membuat file html dengan nama bebas. Saya menamakan filenya diagram.html.
- Langkah selanjutnya, gunakan teks editor sebagai tempat menulis kode. Teks editor yang digunakan bebas seperti visual studio code, notepad++, sublime text, atau teks editor lainnya. Saya menggunakan teks editor sublime text.
- Langkah selanjutnya, mendownload data yang ingin ditampilkan pada diagram batang.
- Setelah membuka teks editor, kemudian menuliskan kode programnya. Seperti contoh gambar di bawah ini :
- Ada dua elemen penting (tag) di dalam file yang dicontohkan di atas, yaitu <script> dengan atribut
srcdimana kita memanggil modul d3.js yang tidak berada di komputer kita, dan juga<div>dengan atributidbernamamy_dataviz. - Langkah terakhir simpan kode program tersebut, lalu membuka file tersebut di browser yang terdapat pada device. Contoh hasil gambarnya seperti di bawah ini :
Source code lengkap :
<!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>
// ...
// 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")
})
</script>
</body>
</html>
Komentar
Posting Komentar