D3 Examples - CS 725 Information Visualization

Christos Tsolakis

R - Language R Example

# Generate 25 Random number in the interval 0-30 data <- runif(25, 0, 30) #Create a filename to save the plot png(height=800,width=1500,filename="./figure.png") #Make barplot barplot(data,width=100,axes=FALSE,col=rgb(0,128,128,255,maxColorValue=255),space=0.08,border=NA,xlim=c(0,2800)) #Save image dev.off()

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <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: 34px;
    height: 75px;
    background-color: teal;
        margin-right: 2px;
   }
        
</style>
</head>
​
<body>
  <script>
     <!-- Drawing divs-->
        var dataset = [];
    //Create 25 random number in [0,30]
    for (var i=0; i<25;i++){
      var newNumber = Math.random()*30;
      dataset.push(newNumber);
    }
    
    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>
​
    