D3 Examples - VI1 - James Eanes

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Tutorial</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style type="text/css">
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;
            margin-right: 2px;
            background-color: teal;
        }
    </style>
    </head>
    <body>
        <script type="text/javascript">
            var dataset = [];
        for (var i = 0; i < 25; i++) {  //Loop 25 times
        var newNumber = Math.random() * 30;  //New random number (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;  //Scale up by factor of 5
                return barHeight + "px";
            });
​
        </script>
    </body>
</html>
​
    