D3 Examples - D3 : Basic DIV Height and Width

xxxxxxxxxx
 
<!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>
    