<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST-3</title>
<!-- <script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script> -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
let dataset = [30, 20, 45, 12, 21];
let svg = d3.select("body").append("svg").attr("width", 1200).attr("height", 1200);
let xScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 500]);
let axis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
svg.append("g").attr("transform", "translate(10, 160)").call(axis);
svg.selectAll("rect").data(dataset)
.enter().append("rect")
.attr("x", 10)
.attr("y", function(d,i){
return i * 30;
})
.attr("width", function(d,i){
return d * 10
})
.attr("height", 28)
.attr("fill", "red");
</script>
</body>
</html>