zross/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=650, user-scalable=yes">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://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>
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=650, user-scalable=yes">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://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>