Diagram Sederhana Menggunakan D3.JS
Diagram Sederhana Menggunakan D3.JS
Adellia nur adyna putri irawan
10119137
Pemodelan & Visualisasi Data
1. Buatlah sebuah folder pada manager file pribadi
2. open folder menggunakan visual studio code
3. Download file data.csv pada link berikut :
http://gprasetyadi.staff.gunadarma.ac.id/Downloads/files/104568/data.csv
4. Lakukan coding dengan nama index.html berikut codingan program :
<!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>
5. setelah itu download live server pada marketplace visual studio code
6. jika sudah, maka klik kanan pada index.html lalu pilih open with live server
7. maka akan muncul diagram batang berikut :
Komentar
Posting Komentar