D3 Examples - d3-02

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">
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
        
      div.bar {
        display:inline-block;
        width: 20px;
        height: 75px;
        background-color: teal;
        margin-right:2px;
        
     }
 
      div.bar2 {
        display:inline-block;
        width: 20px;
        height: 75px;
        background-color: yellow;
        margin-right:2px;
        
     }
​
    </style>
  </head>
​
  <body>
     <script type="text/javascript">  
       var dataset = [];
      for (var i = 0; i < 25; i++) {
          var newNumber = Math.floor(Math.random()*100);
          dataset.push(newNumber);
      }
       
       
     
     d3.select("body").selectAll("div")
         .data(dataset)
         .enter()
         .append("div")
         .attr("class","bar")
         .style("height",function(d){
            var barHeight = d *5;
            return barHeight + "px";})
        
       .style("background-color", function(d){
              if(d<60){
                 return"red";
              }});
         
       var dataset2= [25,7,5,70,34,20,3,12,34,56];   
    d3.select("body").selectAll("div.bar2")
         .data(dataset2)
         .enter()
         .append("div")
         .attr("class","bar2")
           .style("height",function(d){
            var barHeight = d *5;
            return barHeight + "px";
        
            
         });
​
    
    </script>
  </body>
  
    