xxxxxxxxxx
<html>
<head>
<title> D3 Test </title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
margin-right: 2px;
}
</style>
</head>
<body>
<h1>Simple Barchart</h1>
<p>I'm hosted with GitHub Pages.</p>
<script type="text/javascript">
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];
d3.select("body").selectAll("div")
.data(dataset) // <-- The answer is here!
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js