D3 : Basic DIV Height and Width

DIV Height using Scale / Range

<!DOCTYPE html>
<html>
<head>
    <title>D3 : DIV Height using Scale / Range</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/gh/mbostock/d3/lib/colorbrewer/colorbrewer.js"></script>
    <style type="text/css">
        .bar {
            display: inline-block;
            width: 25px;
            height: 75px;
            margin-right: 2px;
            background-color: teal;
        }
    </style>
</head>
<body>
	<div id="chartholder"></div>
	
	<script type="text/javascript">
		var height = 400;
		var width = 600;

var data = d3.range(10).map(function () {
			return Math.random();
		});

var colors = colorbrewer.Set2[5];
		var colorIndex = d3.scale.linear()
			.domain([0, 1, 2, 3, 4, 5])
			.range(colors);

var yScale = d3.scale.linear()
			.domain([0, d3.max(data)])
			.range([0, height]);

var svg = d3.select("#chartholder")
			.style('width', width + 'px')
			.style('height', height + 'px');

svg.selectAll('div')
			.data(data)
			.enter()
			.append('div')
			.attr('class', 'bar')
			.style('height', function (d) {
				return yScale(d) + 'px';
			})
			.style('width', function () {
				return (width / 10) * 0.95 + 'px';
			})
			.style('background-color', function (d) {
				return colorIndex(Math.round(d * 5));
			});
	</script>
</body>
</html>

Updated missing url https://raw.githubusercontent.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js to https://cdn.jsdelivr.net/gh/mbostock/d3/lib/colorbrewer/colorbrewer.js

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

https://raw.githubusercontent.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js