D3 Examples - Visualization Implementation VI1

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    <title> D3 Bar chart for random values</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.js"></script> 
        <style type="text/css">
        
            div.bar {
                display: inline-block;
                width: 30px;
                height: 75px;
                margin-right: 2px;
                background-color: teal;
            }
        
        </style>
    </head>
    <body>
        <script type="text/javascript">
​
            var dataset = [];                        //Initialize array
            for (var i = 0; i < 25; i++) { //Loop 25 times
                var newNumber = 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>
    