hyonschu/gist:d2909d7eebac1199933a0aca7e2b61bc

## gistfile1.txt
<!DOCTYPE html>
<html>
	<head><meta charset="UTF-8">
		<title>Page Titles</title>
		<script src='lib/d3.min.js'>
		</script>
		<style>
			div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;
				margin-right: 2px;
				background-color: teal;
			}

		</style>
	</head>
	<body>
		<script>
		var h = 400
		var w = 800
		var max = h
		var canvas = d3.select("body")
						.append('svg')
						.attr("width", w)
						.attr('height', h);
		colorarray = ['blue', 'red', 'purple','pink','orange','silver','green', 'DarkSlateGray','cornflowerblue','blueviolet','brown','burlywood','aqua']
		var numarray = []
		for (var i = 0; i < 25; i++) {
			var tmp = Math.random()*max
			numarray.push(tmp)
		}

		canvas.selectAll('thisisthename')
			.data(numarray)
			.enter()
			.append('rect')
			.attr({
				'x': function(d, i) { return i*22; },
				'y': function(d) { return h-d; },
				'width': 20,
				'height': function(d, i) {
						if (i >= 10){return h; }
						else { return (d/max)*h; }
					},
				'fill': function() {
					return colorarray[Math.round(Math.random()*colorarray.length)]
				}
			});


		</script>

 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head><meta charset="UTF-8">
	<title>Page Titles</title>
	<script src='lib/d3.min.js'>
	</script>
	<style>
	div.bar {
	display: inline-block;
	width: 20px;
	height: 75px;
	margin-right: 2px;
	background-color: teal;
	}

	</style>
	</head>
	<body>
	<script>
	var h = 400
	var w = 800
	var max = h
	var canvas = d3.select("body")
	.append('svg')
	.attr("width", w)
	.attr('height', h);
	colorarray = ['blue', 'red', 'purple','pink','orange','silver','green', 'DarkSlateGray','cornflowerblue','blueviolet','brown','burlywood','aqua']
	var numarray = []
	for (var i = 0; i < 25; i++) {
	var tmp = Math.random()*max
	numarray.push(tmp)
	}

	canvas.selectAll('thisisthename')
	.data(numarray)
	.enter()
	.append('rect')
	.attr({
	'x': function(d, i) { return i*22; },
	'y': function(d) { return h-d; },
	'width': 20,
	'height': function(d, i) {
	if (i >= 10){return h; }
	else { return (d/max)*h; }
	},
	'fill': function() {
	return colorarray[Math.round(Math.random()*colorarray.length)]
	}
	});
















	</script>

	</body>
	</html>