var w = 300,
h = 200,
padding = 20;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13];
var data = [];
dataset.forEach((d,i)=>data.push({index: i, value:d}));
data.sort((a,b)=>d3.descending(a.value, b.value));
var xScale = d3.scaleBand()
.range([30, w])
.domain(data.map(d=>d.index))
.padding(0.2);
var yScale = d3.scaleLinear()
.range([h - padding, padding])
.domain([0, d3.max(data, d=>d.value)]);
var bars = svg.selectAll("foo")
.data(data)
.enter()
.append("rect")
.attr("x", (d) => xScale(d.index))
.attr("width", xScale.bandwidth())
.attr("height", d => h - padding - yScale(d.value))
.attr("y", d => yScale(d.value))
.attr("fill", "teal");
var gX = svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(d3.axisBottom(xScale));
var gY = svg.append("g")
.attr("transform", "translate(30,0)")
.call(d3.axisLeft(yScale));
<script src="https://d3js.org/d3.v4.min.js"></script>