const DATA = [
  {
    "id": 1,
    "value": 100
  },
  {
    "id": 2,
    "value": 70
  },
  {
    "id": 3,
    "value": 150
  },
  {
    "id": 4,
    "value": 50
  },
  {
    "id": 5,
    "value": 200
  },
  {
    "id": 6,
    "value": 130
  }
]

const MARGIN = { top: 20, right: 20, bottom: 50, left: 50 };
const WIDTH = 300 - MARGIN.left - MARGIN.right;
const HEIGHT = 500 - MARGIN.top - MARGIN.bottom;

const chart = d3
  .select("svg")
  .attr("width", WIDTH + MARGIN.left + MARGIN.right)
  .attr("height", HEIGHT + MARGIN.top + MARGIN.bottom)
  .append("g")
  .attr("transform", "translate(" + MARGIN.left + "," + MARGIN.top + ")");

const getY = d3.scaleLinear().domain([0, 200]).range([HEIGHT, 0]);

const getX = d3
  .scaleBand()
  .rangeRound([0, WIDTH])
  .padding(0.2)
  .domain(
    DATA.map(function (d) {
      return d.id;
    })
);

const bar = chart
  .selectAll("g")
  .data(DATA)
  .enter()
  .append("g")
  .attr("transform", function (d, i) {
    return "translate(" + getX(d.id) + ",0)";
});

bar
  .append("rect")
  .attr("fill", "skyblue")
  .attr("y", function (d) {
    return getY(d.value);
  })
  .attr("height", function (d) {
    return HEIGHT - getY(d.value);
  })
  .attr("width", getX.bandwidth())

chart.append("g").call(d3.axisLeft(getY));

chart
  .append("g")
  .attr("transform", "translate(0," + HEIGHT + ")")
  .call(d3.axisBottom(getX));