Tutorial Visualisasi Data : Membuat Diagram Batang menggunakan D3.js pada laman HTML

Nadira Raihanah
Jul 22, 2022
2 min read

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.

Berikut adalah tutorial untuk membuat diagram batang dengan library D3.js :

Buat sebuah folder yang digunakan untuk menampung 2 file yang akan dibutuhkan. File pertama adalah file .csv yang dapat diakses pada link berikut : ( http://gprasetyadi.staff.gunadarma.ac.id/Downloads/files/104568/data.csv ) Untuk file kedua, pastikan mempunyai sebuah code editor (Notepad++, Sublime Text, Visual Studio Code). Buka code editor kemudian kemudian buat sebuah dokumen index.html isi dengan kode berikut ini :

<!DOCTYPE html>
<html lang="id">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">       <metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Diagram Batang</title>
</head>

<body>
<!-- Muat modul d3.js -->
<scriptsrc="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>

Selanjutnya, sisipkan kode berikut ini diantara tag <script>...</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")  

})