presemi-02

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      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;
     }
		</style>
  </head>

<body>
    <script>
       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";
              } else {
                return "blue";
              }
         });
      
    </script>
  </body>

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