Visualization Implementation (VI1)

Name: Erika Siregar
Assignment : Visualization Implementation (VI1)
Course: Information Visualization (CS725)
Semester : Spring 2015

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

Built with blockbuilder.org

Graph created with R:

rplot4

The R syntax to create the graph above:

# Define values
var <- c(20,60,65,95,115,15,35,35,95,130,20,145,55,70,80,60,110,115,140,90,115,105,130,30,145)

# create bar graph
bp = barplot(var, col="mediumseagreen", axes=FALSE, ann=FALSE)
text(bp, par("usr")[3], labels = 1:25, srt = 0, adj = c(0.5,2), xpd = TRUE, cex=.7)
axis(1, labels=FALSE, line=TRUE, pos = bp)
axis(2, las=1, cex.axis=0.8)

#adj = the x,y position of the label on the graph
#srt = the tilt of the x-axis label

<!DOCTYPE html>
<html>
  <head>
    <title> D3 Demo: Bar chart with random values </title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> 
    <style>
      div.bar {
        display: inline-block;
        position: center;
        width: 30px;
        height:80px;
        background-color:teal;
        margin-right:2px;
      }
    </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);  //New random integer (0-30)
				while (newNumber <= 0) {
					newNumber = Math.round(Math.random() * 30);  //rerandomize if the newNumber is equal to 0
				}
				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;  //Scale up by factor of 15
          return barHeight + "px";
        });
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title> D3 Demo: Bar chart with random values </title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <!-- can we put something between the tag? -->
    <style>
      div.bar {
        display: inline-block;
        position: center;
        width: 30px;
        height:80px;
        background-color:teal;
        margin-right:2px;
      }
    </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);  //New random integer (0-30)
                while (newNumber <= 0) {
                    newNumber = Math.round(Math.random() * 30);  //rerandomize if the newNumber is equal to 0
                }
                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;  //Scale up by factor of 15
          return barHeight + "px";
        });
    </script>
  </body>
</html>
​
​
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js