Membuat Diagram Batang Sederhana Pada Halaman HTML Menggunakan d3.js ~ Informasi Teknologi

Membuat Diagram Batang Sederhana Pada Halaman HTML Menggunakan d3.js

1. Tentukan direktori di komputer kalian untuk mengerjakan praktik ini.

2. Selanjutnya buatlah sebuah file HTML, dengan nama bebas dan menggunakan text editor Visual Studio atau semacam text editor lainnya.

3. Setelah itu terdapat tag didalam file index.html tersebut, yaitu <script> dimana tag tersebut ada 3 di dalamh file index.html.

4. Ada sebuah tag <script> kosong dengan satu komntar, nanti kita akan tulis kode disitu.

5. Berikut code yang di tulis pada script kosong tersebut.

// 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")

})