HTML: D3 scatter, data from cartodb

<!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>

.newsvg{ /* the border box*/
    border-width:3px;
    border-color:black;
    border-style:solid;
  }

</style>
</head>
<body>

</body>
<script>
var xscale;
var w = 600;
var h = 600;
var padding = 20;
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")
.done(function(data) {
  for (var i = 0; i < data.total_rows; i++) {
    dataset.push([data.rows[i].systempopulation, parseInt(data.rows[i].totalconnections)]);

}

var Xmax = d3.max(dataset.map(function(d){return d[0]}));
  var Xmin = d3.min(dataset.map(function(d){return d[0]}));

var Ymax = d3.max(dataset.map(function(d){return d[1]}));
  var Ymin = d3.min(dataset.map(function(d){return d[1]}));

var xscale = d3.scale.linear()
  .domain([Xmin, Xmax])
  .range([padding,w-padding])

var yscale = d3.scale.linear()
  .domain([Ymin, Ymax])
  .range([h-padding,padding])

console.log(dataset)
  svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d,i){
    return xscale(d[0])
  })
  .attr("cy", function(d){
    return yscale(d[1])
  })
  .attr("r", function(d){
    return 5
  })
  .attr("fill", "red")
  .attr("opacity", "0.5");

});

</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