morenoh149/index.html

## index.html
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //based on scott murray's tutorial http://alignedleft.com/tutorials/d3/
      //both axis adjust dynamically to fit the data
      //@author Harry Moreno (morenoh149)
      var dataset = [];
      var normalDist = [];  //temporarily holds normally generated numbers
      var numbers = {};     //hash object for finding number frequency
      var numDataPoints = 1000;
      var xRange = Math.random() * 500;
      var distGenerator = d3.random.normal(xRange/2, xRange/10);
      //generate normal distribution
      for (var i = 0; i < numDataPoints; i++){
        var newNumber1 = Math.round(distGenerator());
        normalDist.push(newNumber1);
      }
      //count number frequencies
      for (var i = 0; i < numDataPoints; i++){
        var number = normalDist[i];
        if (typeof(numbers[number]) === "undefined"){
          numbers[number] = 1;
        } else {
          numbers[number]++;
        }
      }
      //pin frequency to corresponding value
      for (var i = 0; i < numDataPoints; i++){
        dataset.push([normalDist[i],numbers[normalDist[i]]]);
      }
      var h = 500;
      var w = 900;
      var padding = 30;
      var xScale = d3.scale.linear()
        .domain([d3.min(dataset, function(d){
          return d[0];
        }), d3.max(dataset, function(d){
          return d[0];
        })])
        .range([padding, w - padding]);
      var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){
          return d[1];
        })])
        .range([h - padding, padding]);
      var rScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){
          return d[1];
        })])
        .range([3, 3]);
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(5);
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d){
          return xScale(d[0]);
        })
        .attr("cy", function(d){
          return yScale(d[1]);
        })
        .attr("r", function(d){
          return rScale(d[1]);
        });
      svg.append("g")
        .attr("class", "axis") //Assign "axis" class
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
   </script>
  </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	//based on scott murray's tutorial http://alignedleft.com/tutorials/d3/
	//both axis adjust dynamically to fit the data
	//@author Harry Moreno (morenoh149)
	var dataset = [];
	var normalDist = []; //temporarily holds normally generated numbers
	var numbers = {}; //hash object for finding number frequency
	var numDataPoints = 1000;
	var xRange = Math.random() * 500;
	var distGenerator = d3.random.normal(xRange/2, xRange/10);
	//generate normal distribution
	for (var i = 0; i < numDataPoints; i++){
	var newNumber1 = Math.round(distGenerator());
	normalDist.push(newNumber1);
	}
	//count number frequencies
	for (var i = 0; i < numDataPoints; i++){
	var number = normalDist[i];
	if (typeof(numbers[number]) === "undefined"){
	numbers[number] = 1;
	} else {
	numbers[number]++;
	}
	}
	//pin frequency to corresponding value
	for (var i = 0; i < numDataPoints; i++){
	dataset.push([normalDist[i],numbers[normalDist[i]]]);
	}
	var h = 500;
	var w = 900;
	var padding = 30;
	var xScale = d3.scale.linear()
	.domain([d3.min(dataset, function(d){
	return d[0];
	}), d3.max(dataset, function(d){
	return d[0];
	})])
	.range([padding, w - padding]);
	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){
	return d[1];
	})])
	.range([h - padding, padding]);
	var rScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){
	return d[1];
	})])
	.range([3, 3]);
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5);
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d){
	return xScale(d[0]);
	})
	.attr("cy", function(d){
	return yScale(d[1]);
	})
	.attr("r", function(d){
	return rScale(d[1]);
	});
	svg.append("g")
	.attr("class", "axis") //Assign "axis" class
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);
	</script>
	</body>
	</html>