Bar plot Implementation (Visual Implementation1)

Problem statement:

D3 - Work through Scott Murray's D3 tutorial from the beginning through "The power of data()". The goal is to produce a visualization similar to http://alignedleft.com/content/03-tutorials/01-d3/90-the-power-of-data/5.html. Use BlockBuilder to produce a block for this.

R - Use R to generate a bar chart similar to the D3 one above. You do not have to randomize your data, just graph a set of values that are generated in by your D3 example.

Name: Srinivas Havanur

Assignment: CS 725 - VI1 submission

Course: Information Visualization

Semester: Spring 2016

R image

Embedding R code in Markdown:

# Define the vector B with 25 different values
B <- c(25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3)

# Plot the bargraph with using color red
barplot(B, col="red")

# Create a title as "Visualization Implementation (VI1)" with a bold/italic font and a border around the graph
title(main="Visualization Implementation (VI1)", col.main="black", font.main=4)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 Demo: Bar chart with random values</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: 35px;
				height: 74px;											/* Gets overriden by D3-assigned height below */
        margin-right: 2px;
        border:1px solid black;
				background-color: red;
     
			}
		
		</style>
	</head>
	<body>
		<script type="text/javascript">

var dataset = [];  						 													//Initialize empty array
			for (var i = 0; i < 25; i++) {			 										//Loop 25 times
				var newNumber = Math.round(Math.random() * 30 + 15);  //New random integer (15-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 * 15;
					return barHeight + "px";
				});
      
		</script>
	</body>
</html>

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Demo: Bar chart with random values</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: 35px;
                height: 74px;                                           /* Gets overriden by D3-assigned height below */
        margin-right: 2px;
        border:1px solid black;
                background-color: red;
     
            }
        
        </style>
    </head>
    <body>
        <script type="text/javascript">
​
            var dataset = [];                                                                           //Initialize empty array
            for (var i = 0; i < 25; i++) {                                                  //Loop 25 times
                var newNumber = Math.round(Math.random() * 30 + 15);  //New random integer (15-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 * 15;
                    return barHeight + "px";
                });
      
        </script>
    </body>
</html>
    

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