<!DOCTYPE html>
<html lang="en">
<head>
<title>Margins</title>
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<script>
const w = 400;
const h = 300;
const margin = {top: 25, right: 0, bottom: 25, left: 25};
const innerWidth = w - margin.left - margin.right;
const innerHeight = h - margin.top - margin.bottom;
const bardata = [5, 6, 10, 3, 2, 12];
const xScale = d3.scaleBand()
.domain(d3.range(bardata.length))
.range([0, innerWidth])
.paddingInner(.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(bardata)])
.range([innerHeight, 0])
// add svg
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// add background rectangle
svg.append("rect")
.attr("x", "0")
.attr("y", "0")
.attr("width", w)
.attr("height", h)
.attr("fill", "aliceblue");
// create inner plot group
svg.append("g")
.attr("id", "plot")
.attr("transform", `translate (${margin.left}, ${margin.top})`)
// create bars
d3.select("g#plot")
.selectAll("rect")
.data(bardata)
.enter()
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => innerHeight - yScale(d))
.attr("fill", "lightgreen");
// create text labels
d3.select("g#plot")
.selectAll("text")
.data(bardata)
.enter()
.append("text")
.attr("x", (d, i) => xScale(i) + .5*xScale.bandwidth())
.attr("y", d => yScale(d) + 25)
.text(d => d)
.attr("fill", "blue")
.attr("text-anchor", "middle");
</script>
</body>
</html>