sfrdmn · November 30, 2011 22:17
diff --git a/index.html b/index.html
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>Mouse Over</title>
 		<script type="text/javascript" src="https://github.com/mbostock/d3/raw/fe671a70e236710412a514fa276e59f875f3c617/d3.js"></script>
 	</head>
 	<body>
 		<script type="text/javascript">
 			// width
 			var w = 800;
 			// height
 			var h = 800;
 			// d3 generated function to make pretty colors
 			var color = d3.scale.category20();
 			// empty list of data
 			var data = [];
 			// random generation of 100 pieces of data
 			for( var i = 0; i < 100; i++ ) {
 				data[i] = Math.floor(Math.random()*100);
 			}

 			// this function will be run everytime we mouse over an element
 			var myMouseoverFunction = function() {
 				// remember how d3 goes through EACH of the selected elements and uses your function for EACH element?
 				// well, everytime the function is used for an element, it has a "secret" variable called 'this' which holds that element.
 				// we use 'this' to increment the current element's radius by 10
 				var circle = d3.select(this);
 				circle.transition().duration(500)
 					.attr("r", circle.attr("r") * 1 + 10 );
 			}
 			// just generates random numbers for the circle positions
 			var myPositionFunction = function() {
 				return Math.random() * w;
 			}
 			
 			// here we append our blank svg to othe html page
 			var chart = d3.select("body")
 				.append("svg:svg")
 				.attr("width", w)
 				.attr("height", h);
 			
 			// the line spacing here is just for clarity. it doesn't matter
 			chart.selectAll("circle").data(data) 		

 				.enter().append("svg:circle")  		// for every piece of data, add a circle

 				.attr("cx", myPositionFunction) 	// use pos function to get x position

 				.attr("cy", myPositionFunction) 	// use pos function to get y position

 				.attr("r", function(d) {		// the radius will depend on our data.

 					return d; 			// this is equivalent to making the functions at the top.
 				})					// we just stick it in directly, rather than save it in a variable.

 				.attr("fill", color)			// use our fancy color function for fancy colors

 				.on("mouseover", myMouseoverFunction);	// this says "every time one of these circles is moused over, use this function
 		</script>
 	</body>
 </html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Mouse Over</title>
	<script type="text/javascript" src="https://github.com/mbostock/d3/raw/fe671a70e236710412a514fa276e59f875f3c617/d3.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	// width
	var w = 800;
	// height
	var h = 800;
	// d3 generated function to make pretty colors
	var color = d3.scale.category20();
	// empty list of data
	var data = [];
	// random generation of 100 pieces of data
	for( var i = 0; i < 100; i++ ) {
	data[i] = Math.floor(Math.random()*100);
	}

	// this function will be run everytime we mouse over an element
	var myMouseoverFunction = function() {
	// remember how d3 goes through EACH of the selected elements and uses your function for EACH element?
	// well, everytime the function is used for an element, it has a "secret" variable called 'this' which holds that element.
	// we use 'this' to increment the current element's radius by 10
	var circle = d3.select(this);
	circle.transition().duration(500)
	.attr("r", circle.attr("r") * 1 + 10 );
	}
	// just generates random numbers for the circle positions
	var myPositionFunction = function() {
	return Math.random() * w;
	}

	// here we append our blank svg to othe html page
	var chart = d3.select("body")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h);

	// the line spacing here is just for clarity. it doesn't matter
	chart.selectAll("circle").data(data)

	.enter().append("svg:circle") // for every piece of data, add a circle

	.attr("cx", myPositionFunction) // use pos function to get x position

	.attr("cy", myPositionFunction) // use pos function to get y position

	.attr("r", function(d) { // the radius will depend on our data.

	return d; // this is equivalent to making the functions at the top.
	}) // we just stick it in directly, rather than save it in a variable.

	.attr("fill", color) // use our fancy color function for fancy colors

	.on("mouseover", myMouseoverFunction); // this says "every time one of these circles is moused over, use this function
	</script>
	</body>
	</html>