D3 : Random Number Generation - Column Chart

Random Number Generation - Column Chart

In this simple D3 example we demonstrate 3 possible methods to generate a dataset of random numbers.

Manual Random Number Generation. This is not really random number generation code but more a demonstration of the structure of the data array which is to be produced.
JavaScript Random Number Generation. Using a traditional JavaScript for loop and Math.random() function to generate the data array of random numbers.
D3 Random Number Generation. Using D3's built range / map functions to build the array.

For a laugh, the code then proceeds to concatinate the 3 random datasets into a single array and displays a simple column chart of the numbers.

<!DOCTYPE html>
<html>
<head>
	<title>D3 : Random Number Generation - Column Chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<style type="text/css">
		#chartholder {
			height: 400px;
			width: 600px;
		}
		.bar {
			display: inline-block;
			width: 15px;
			height: 10px; /* Gets overridden by D3 height below */
			margin-right: 2px;
			background-color: teal;
		}
	</style>
</head>
<body>
	<div id="chartholder"></div>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js