Bubble chart w/ mouse over

bubble.js

/*
                ____________________________________
               I___|___|___|___|___|__|____|___|__|_I
               I_|___|___|               |___|___|__I
         )\    I___|__ | ..,a@@@a,a@@@a,.. |___|____I      /(
        ( ))   I_|__  .,;*;;@@@@@a@@@@@;;;;,. ___|__I     (( )
         :     I__|  ;;;;;;;;;a@@^@@a;;;*;;;;;  __|_I       :
        ,uU    I_|  ;;;;*;;;a@@@   @@@a;;;;*;;;  |__I      Uu.
        :Uu    I__|;;;;;;;a@@@@   .@@@@@;;;;;;;; __|I      uU:
        | |    I_| ;;*;;;a@@@@@   @@'`@@@;;;;;*; _|_I      | |
        |_|    I__ ;;;;;;@@;;@@   `@  `@;;;*;;;; ___I      |_|
     _ (___) _ I_|_ ;;;*;;@;;;;@;;;;;*;;;;;;;;; _|__I___  (___)
   ,-' )   (   ~~~~~ `;;;;;;*;;;;;;;;;;;*;;;;'  ~~~~~     )   (`-.
 ,-____=====_____________`;;;;;;;;*;;;;;;;'_______________=====___`.
 |~~|  _________________________________________________/o\___   |~~|
 |_||  ||____|____|____|____|____|____|____|____|____|_/ /,\__|  ||_|
 |__|  |___|____|____|____|____|____|____|____|____|__/ /,,,\||  ||_|
 |_||__||____|____|____|____|____|____|____|____|____|\/,,,,,\|__|__|
 |____|____|____|____|____|____|____|____|____|____|___\,,,,,,\___|_|
 |_|____|__I####I..........  /%%%%%%%%%%%\ ..........I##\,,,,( )|___|
 |____|____I####I.......... .%%%%%( )%%%%%. .........I###\,,,,\/__|_|
 |_|____|__I####I.......... @@%%%%0%0%%%%@@  ........I## /,,,,/_|___|
 |____|____I####I.......... `@@@@@@@@@@@@@@' ........I# /,,,,/____|_|
 |_|____|__I####I............ \\\\\\\\\\\\\) ........I ( \,,/___|___|
 |____|____I####I.............  `\\\\\\\\\\) ........I  \_)/_|____|_|
 |_|____|__I####I............  A   `\\\\\\\' ..   .. I#  :_|____|___|
 |____|____I####I.........    AAA  .. `\\\' ..  A.  .I###I___|____|_|
 |_|____|__I####I......   .A  `AAA ....  *  ..  AAA. I ##I_|____|___|
 |____|____I####I....    AAA  AA;AA  ...   ...  `AAA.I ##I___|____|_|
 |_|____|__I####/~~~,-.A;;A'-A;;;;;A-----A-----,A;;;A  ##I_|____|___|
 |____|____I###/    I.;;;;;  ;;;;;;;   AAA     I;;;A'\###I___|____|_|
 |_|____|__I##/     I;;;;;; ;;;;;;;   A;;;A    I;;;;  \##I_|____|___|
 |____|____I#/     !~;;;;;;~~~~~~~~~~~;;;;;;~~~~~!;'   \#I___|____|_|
 |_|____|__I/______!  ::::;;           ;;;;;;    !______\I_|____|___|
 ~~~~~~~~~/       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~       \~~~~~~~~~~
         /_______________________________________________\
                        /\____/\    __
                      .'  """"  `,-'  `--.__
                 __,- :   -  -  ;  " ::     `-. -.__
              ,-sssss `._  `' _,'"     ,'~~~::`.sssss-.
             |ssssss ,' ,_`--'_    __,' ::  `  `.ssssss|
            |sssssss `-._____~ `,,'_______,---_;; ssssss|
             |ssssssssss     `--'~{__   ____   ,'ssssss|
              `-ssssssssssssssssss ~~~~~~~~~~~~ ssss.-'
                   `---.sssssssssssssssssssss.---'

*/

var	w = 800;				// width	
var	h = 600; 				// height
var margin = 100;			// margin	
var xlabel = "murder";		// what we want on the x axis
var ylabel = "robbery";		// what we want on the y axis
var rlabel = "population";	// what we want for the bubble area

d3.select(".container").append("svg:svg")
	.attr("width", w+margin)
	.attr("height", h+margin)
	.attr("class","chart");

var chart = d3.select(".chart").append("svg:g")		
	.attr("class","content")
	.attr("transform", "translate(" + margin/2 + "," + margin/2 + ")");		// The transform with trasnlate will shift our group down and to the right	


/*
	The following statement creates a line for our x axis
*/

chart.append("svg:line")
	.attr("stroke-width", 1)
	.attr( "stroke","gray")
	.attr("x1", 0)
	.attr("y1", h)
	.attr("x2", w)
	.attr("y2", h); 

/*
	The following statement creates a line for our y axis
*/

chart.append("svg:line")
	.attr("stroke-width", 1)
	.attr( "stroke","gray")
	.attr("x1", 1)
	.attr("y1", 0)
	.attr("x2", 1)
	.attr("y2", h-1); 

d3.csv( "data.csv", function(csv) {

	var xMax = d3.max( csv.map( function(d) {
        	return parseFloat(d[xlabel]);
    	}));
	var yMax = d3.max( csv.map( function(d) {
		return parseFloat( d[ylabel] );
	}));
	
	var xgrid = d3.scale.linear()
		.domain([0.0,xMax])		// range of data
		.range([0.0,w]);		// range of width
		// 0 in, 0 out
		// 10 in, w out

	var ygrid = d3.scale.linear()
		.domain([0.0,yMax]) 	// range of data
		.range([h,0.0]); 		// range of height
		// 0 in, h out
		// 260 in, 0 out
		
	// I didn't want mine to change colors, but left this here for just in case 
	var colorScale = d3.scale.linear()
		.domain([0,500])
		.range(["steelblue", "steelblue"]);
	
	var radius = function(d,i) {
		return Math.sqrt( d[rlabel] ) / 150; // FUN FACT: we could use another scale function here instead of arbitrarily using 150
	}

	var xpos = function(d,i) {
		return xgrid( d[xlabel] );	// d.murder in, corresponding x value out
	}

	var ypos = function(d,i) {
		return ygrid( d[ylabel] );	// d.robbery in, corresponding x value out
	}
	
	var color = function(d,i) {
		return colorScale( d["aggravated_assault"] );
	}
	

	var mouseMove = function() {
		var infobox = d3.select(".infobox");
		var coord = d3.svg.mouse(this)
                // now we just position the infobox roughly where our mouse is
                infobox.style("left", coord[0] + 15  + "px" );
                infobox.style("top", coord[1] + "px");
	}

	var mouseOver = function(d) {
		var bubble = d3.select(this);
		bubble.attr("stroke", "#000")
			.attr("stroke-width", 4 );
		var infobox = d3.select(".infobox")
			.style("display", "block" );
		infobox.select("p.state")
			.text( d.state );
		infobox.select("p.xdata")
			.text( xlabel + ": " + d[xlabel] );
		infobox.select("p.ydata")
			.text( ylabel + ": " + d[ylabel] );
	}

	var mouseOut = function() {
		var infobox = d3.select(".infobox");
		infobox.style("display", "none" )
		var bubble = d3.select(this);
		bubble.attr("stroke", "none")
	}

	// attach function to run when mouse is moved anywhere on svg
	d3.select("svg")
		.on("mousemove", mouseMove );

	// add <p> elements to our infobox. later we will enter our crime data there
	var infobox = d3.select(".infobox");
	infobox.append("p")
		.attr("class", "state" );
	infobox.append("p")
		.attr("class", "xdata" );
	infobox.append("p")
		.attr("class", "ydata" );

	// append bubbles and attach function to run when bubbles moused over and moused out
	chart.selectAll("circle.bubble").data(csv)
		.enter().append("svg:circle")
		.attr("class", "bubble")
		.attr("cx", xpos )
		.attr("cy", ypos )			
		.attr("r", radius )			
		.attr("fill", color )
		.on( "mouseover", mouseOver )
		.on( "mouseout", mouseOut );	
		
});

data.csv

index.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bubble Chart</title>
		<script type="text/javascript" src="https://github.com/mbostock/d3/raw/master/d3.js"></script>
		<script type="text/javascript" src="https://github.com/mbostock/d3/raw/master/d3.csv.js"></script>
		<style type="text/css">
			.container {
				position: relative;
			}
			.infobox {
				position: absolute;
				display: none;
				background-color: rgba(255,255,255,.75);
				width: 200px;
				padding: 10px;
			}	
			p {
				margin: 0;
			}
		</style>
	</head>
	<body>
	<div class="container">
		<div class="infobox">
		</div>
	</div>
	</body>
	<script type="text/javascript" src="bubble.js"></script>
</html>