D3 With <svg>

Test

<!DOCTYPE html>
<html>
<head>
	<title> D3 Test </title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
	<h1>SVG's Barchart</h1>
	<p>I'm hosted with GitHub Pages.</p>

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
						11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
    var yScale = h / d3.max(dataset)

//Create SVG element
		var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);

svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("x", function(d, i) {
				return i * (w / dataset.length);  //Bar width of 20 plus 1 for padding
			})
			.attr("y", function(d) {
				return h - (d*yScale);  //Height minus data value
			})
			.attr("width", w / dataset.length - barPadding)
			.attr("height", function(d) {
				return d*yScale;
			})
			.attr("fill", function(d) {
				return "rgb(0, 0, " + (d * 10) + ")";
			});
    
    svg.selectAll("text")
			.data(dataset)
      .enter()
      .append("text")
    	.text(function(d) {
				return d;
			})
    	.attr("x", function(d, i) {
        return i * (w / dataset.length) + ((w / dataset.length - barPadding)/2);
   		})
   		.attr("y", function(d) {
        return h - (d * yScale) + 15;
   		})
    	.attr("font-family", "sans-serif")
   		.attr("font-size", "11px")
   		.attr("fill", "white")
    	.attr("text-anchor", "middle");
	</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js