htmls/90-the-power-of-data-5.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 Demo: Bar chart with random values</title>
		<script type="text/javascript" src="../d3/d3.v3.min.js"></script>
		<style type="text/css">
		
			div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;	/* Gets overriden by D3-assigned height below */
				margin-right: 2px;
				background-color: teal;
			}
		
		</style>
	</head>
	<body>
		<script type="text/javascript">

			var dataset = [];  						 //Initialize empty array
			for (var i = 0; i < 25; i++) {			 //Loop 25 times
				var newNumber = Math.round(Math.random() * 30);  //New random integer (0-30)
				dataset = dataset.concat(newNumber); //Add new number to array
			}
			
			d3.select("body").selectAll("div")
				.data(dataset)
				.enter()
				.append("div")
				.attr("class", "bar")
				.style("height", function(d) {
					var barHeight = d * 5;
					return barHeight + "px";
				});
			
		</script>
	</body>
</html>