HTML: working D3 with SQL: CartoDB, create rects

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=650, user-scalable=yes">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://libs.cartocdn.com/cartodb.js/v2/cartodb.js">
</script>
<style>
  div.bar{
    display:inline-block;
    width: 10px;
    height: 75px;
    background-color:teal;
    margin-right: 6px;
 
  }
 
 
  .newsvg{
 
  border-width:3px;
  border-color:black;
  border-style:solid;
 
  }
 
  .circle {
   width:20px;
  }
 
</style>
  </head>
  <body>
 
 
 
  </body>
  <script>
  
  var w = 500;
  var h = 500;
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height",h)
    .attr("class", "newsvg");
 
 
    var dataset=[];
    var sql = new cartodb.SQL({user:'cehtp'});
 
sql.execute("SELECT * FROM inventory LIMIT 40", {id:4})
  .done(function(data) {
    for (var i = 0; i < data.total_rows; i++) {
      dataset.push(5*Math.log(data.rows[i].systempopulation));
      console.log(data.rows[i]);
    }
    
    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",function(d,i){
      return 10+i*(w-20)/dataset.length
    })
    .attr("y", function(d,i){
      return h-d*5;
    })
    .attr("width", (w/dataset.length)-1)
    .attr("height", function(d,i){
      return d*5
 
    })
    .attr("fill", "#4C706A");
 
    svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .attr("x",function(d,i){
      return i*w/dataset.length
    })
    .attr("y", 50)
    .text(function(d,i){
      return i
    });

});

</script>
</html>

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

Modified http://libs.cartocdn.com/cartodb.js/v2/cartodb.js to a secure url

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

https://libs.cartocdn.com/cartodb.js/v2/cartodb.js