D3 Examples - D3 Bar Chart Tutorial

D3 Bar Chart Tutorial

Hung Do; CS725:Information Visualization; Spring 2016; Computer Science; Old Dominion University

Working through the examples from Scott Murray's tutorial at http://alignedleft.com/tutorials/d3/

R image that using a dataset generated by D3 example. I use console.log(dataset) to get data.

Embedding R code in Markdown:

#Setup a dataset for barchar. dataset <- c(57, 63, 67, 42, 28, 45, 30, 43, 28, 37, 20, 24, 60, 55, 25, 29, 59, 43, 35, 49, 16, 22, 43, 13, 28) #Create a bar chart using above dataset with color "blue" barplot(dataset,col="blue")

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" 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: 30px;
            height: 127px;  /* Gets overriden by D3-assigned height below */
            margin-right: 3px;
            background-color: red;
            }
        </style>
    </head>
    
    <body>
            <script type="text/javascript">
            //location.reload(true);
            var dataset = [];                        //Initialize empty array
            for (var i = 0; i < 25; i++) {           //Loop 25 times
                var newNumber = Math.round(Math.random() * 60 + 10);  //New random number (10-70)
                dataset.push(newNumber);             //Add new number to array
            }
            d3.select("body").selectAll("div")
            //read dataset into elements
                .data(dataset)
                .enter()    
                .append("div")
                .attr("class", "bar")
                .style("background-color","#00a89d") //Hung Do: This function is to overide the color in original style
                .style("height", function(d) {
                    var barHeight = d * 5;
                    return barHeight + "px";
                    }
                );
                console.log(dataset); //Hung Do: Use this JavaScript debug to print out dataset and to use in R chart.
        </script>
    </body>
</html> 
    