<svg xmlns="http://www.w3.org/2000/svg"></svg>
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));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.1/d3.min.js