D3 Bar Chart Tutorial

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

Built with blockbuilder.org

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.

R image

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")

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

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