jonahx · December 16, 2015 08:48
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
  	<meta charset="utf-8">
 		<title>yguyghggjkgh</title>
 		<script src="http://d3js.org/d3.v3.min.js"></script>
 		<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>
 	
 		<div>
 		  <input type="text" id="count" name="howmany">
 		  <input type="button" id="drawbtn" value="draw">
 		</div>

 	
 		<script type="text/javascript">

 			//Width and height
 			var w = 500;
 			var h = 300;
 			var padding = 30;
 			
 			//Dynamic, random dataset
 			var dataset = [];											//Initialize empty array
 			var numDataPoints = 50;
 			console.log("so we are here.")										
 			var maxRange = Math.random() * 1000;						//Max range of new values
 			for (var i = 0; i < numDataPoints; i++) {					//Loop numDataPoints times
 				var newNumber1 = Math.floor(Math.random() * maxRange);	//New random integer
 				var newNumber2 = Math.floor(Math.random() * maxRange);	//New random integer
 				dataset.push([newNumber1, newNumber2]);					//Add new number to array
 			}

 			//Create scale functions
 			var xScale = d3.scale.linear()
 								 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
 								 .range([padding, w - padding * 2]);

 			var yScale = d3.scale.linear()
 								 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
 								 .range([h - padding, padding]);

 			//Define X axis
 			var xAxis = d3.svg.axis()
 							  .scale(xScale)
 							  .orient("bottom")
 							  .ticks(5);

 			//Define Y axis
 			var yAxis = d3.svg.axis()
 							  .scale(yScale)
 							  .orient("left")
 							  .ticks(5);

 			//Create SVG element
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);

 			//Create circles
 			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", 2);
 			
 			//Create X axis
 			svg.append("g")
 				.attr("class", "axis")
 				.attr("transform", "translate(0," + (h - padding) + ")")
 				.call(xAxis);
 			
 			//Create Y axis
 			svg.append("g")
 				.attr("class", "axis")
 				.attr("transform", "translate(" + padding + ",0)")
 				.call(yAxis);


 			//On click, update with new data			
 			d3.select("#drawbtn")
 				.on("click", function() {
 					//New values for dataset
 					var numValues = parseInt(document.getElementById('count').value, 10);
 					console.log(numValues);
 					var maxRange = Math.random() * 1000;						
 					dataset = [];  						 				 		//Initialize empty array
 					for (var i = 0; i < numValues; i++) {				 		//Loop numValues times
 						var newNumber1 = Math.floor(Math.random() * maxRange);	//New random integer
 						var newNumber2 = Math.floor(Math.random() * maxRange);	//New random integer
 						dataset.push([newNumber1, newNumber2]);					//Add new number to array
 					}
 					
 					//Update scale domains
 					xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
 					yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);

 					//Update all circles
 					svg.selectAll("circle")
 					   .data(dataset)
 					   .transition()
   					   .duration(1000)
 					   .attr("cx", function(d) {
 					   		return xScale(d[0]);
 					   })
 					   .attr("cy", function(d) {
 					   		return yScale(d[1]);
 					   });

 					//Enter new circles
 					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", 2);

 					// Remove old
 					svg.selectAll("circle")
 					   .data(dataset)
             .exit()
             .remove()

 				});


 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>yguyghggjkgh</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<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>

	<div>
	<input type="text" id="count" name="howmany">
	<input type="button" id="drawbtn" value="draw">
	</div>


	<script type="text/javascript">

	//Width and height
	var w = 500;
	var h = 300;
	var padding = 30;

	//Dynamic, random dataset
	var dataset = []; //Initialize empty array
	var numDataPoints = 50;
	console.log("so we are here.")
	var maxRange = Math.random() * 1000; //Max range of new values
	for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
	var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
	var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
	dataset.push([newNumber1, newNumber2]); //Add new number to array
	}

	//Create scale functions
	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[0]; })])
	.range([padding, w - padding * 2]);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([h - padding, padding]);

	//Define X axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5);

	//Define Y axis
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Create circles
	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", 2);

	//Create X axis
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

	//Create Y axis
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);


	//On click, update with new data
	d3.select("#drawbtn")
	.on("click", function() {
	//New values for dataset
	var numValues = parseInt(document.getElementById('count').value, 10);
	console.log(numValues);
	var maxRange = Math.random() * 1000;
	dataset = []; //Initialize empty array
	for (var i = 0; i < numValues; i++) { //Loop numValues times
	var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
	var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
	dataset.push([newNumber1, newNumber2]); //Add new number to array
	}

	//Update scale domains
	xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
	yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);

	//Update all circles
	svg.selectAll("circle")
	.data(dataset)
	.transition()
	.duration(1000)
	.attr("cx", function(d) {
	return xScale(d[0]);
	})
	.attr("cy", function(d) {
	return yScale(d[1]);
	});

	//Enter new circles
	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", 2);

	// Remove old
	svg.selectAll("circle")
	.data(dataset)
	.exit()
	.remove()

	});


	</script>
	</body>
	</html>