Grid fade-out

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Geo</title>
        <script src="https://d3js.org/d3.v3.js"></script>
		<link rel="stylesheet" type="text/css" href="map_and_scatter_d2.css">
    </head>
	
	
	
	
	<body>
		<div id = "plot"> Ranks
		</div>
		
		<div id = "pop"> Pop

<div id = "tooltip" class="hidden">
			<p><center><strong><span id="city">  </span></strong></center></p>
			<p>Population: <span id="popvalue">  </span></p>
			
		</div>
		
		
		<div id = "tooltip2" class="hidden">
			<p><center><strong><span id="city2">  </span></strong></center></p>
			<p>Ratio: <span id="value2">  </span></p>

</div>

<rect width="100%" height="100%" fill="url(#grid)" />
		  </svg>
		</div>
		
    <script type="text/javascript">
      
	
	
		// Global D3 variables:
		
		var dataset;
		
		var padding = 45;
		var h = 500;
		var w = 700;
		
		var projection =  d3.geo.albersUsa()
							.translate([w/2,h/2])
							.scale([900]);	
							
		var svg = d3.select("body").select("svg")

var population;
		
		var path = d3.geo.path()
							.projection(projection);

d3.json("us-states.json", function(json){

svg.selectAll("path")
					.data(json.features)
					.enter()
					.append("path")
					.attr("d", path)
					.attr({
						"fill": "#B0B0B0",
						"stroke": "White",
						"stroke-width": 0.3,
						"opacity": 1
					});
					
					
					
					d3.csv("cities_pop.csv", function(data){
							console.log(data);
						var rScale = d3.scale.linear()
										.domain([0, d3.max(data, function(d){
											return parseFloat(d.estimate_2014);
										})])
										.range([5,15]);

var circleXCoord;	
						var circleYCoord;	
						
						dataset = data;
						
						svg.selectAll("text")
								.data(dataset)
								.enter()
								.append("text")
								.text(function(d){
									return d.city_shrt;
								})
								.attr("opacity", 0)
	
						svg.selectAll("circle")
						.data(dataset)
						.enter()
						.append("circle")
						.attr({
							"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
							"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
							"r": function (d) { return rScale(parseFloat(d.estimate_2014));}
						})
						.style({
							"fill": "#43a2ca",
							"opacity": 0,
							"stroke-width":0.7,
							"stroke":"white",
						})
						.transition()
						.duration(1000)
						.ease("circle")
						.style("opacity", 1)

svg.selectAll("circle").on("mouseover", function(d) {

//Get this bar's x/y values, then augment for the tooltip
		 					var xPosition = parseFloat(d3.select(this).attr("cx"));
		 					var yPosition = parseFloat(d3.select(this).attr("cy"));

//Update the tooltip position and value
		 					d3.select("#tooltip")
		 						.style("left", xPosition + "px")
		 						.style("top", yPosition + "px")

d3.select("#tooltip")
								.select("#popvalue")
								.text(d.estimate_2014);
						
		 					d3.select("#tooltip")				
		 						.select("#city")
							   .text(d.city);

//Show the tooltip
		 					d3.select("#tooltip").classed("hidden", false);

})
		 			   .on("mouseout", function() {
			   
		 					//Hide the tooltip
		 					d3.select("#tooltip").classed("hidden", true)	
		 			   });	
					});	
			});

</script>
			
			
			
			
			
			
			
			
		<script> 
		
		
		
		
		d3.select("#pop")
		.on("click", function(){
			
		d3.selectAll("path")
			.transition()
			.delay(10)
			.duration(1000)
			.attr({
				"stroke-width": 0.5,
				"opacity": 1
			});
			
		d3.selectAll("text")
			.attr("opacity", 0);
			
		d3.selectAll("g")
			.attr("opacity", 0);
	
			
		var rScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d){
							return parseFloat(d.estimate_2014);
						})])
						.range([5,15]);

var circleXCoord;	
		var circleYCoord;	
		
		svg.selectAll("circle")
			.transition()
 		    .delay(300)
			.duration(1000)
			.ease("circle")
			.style({
				"fill": "#43a2ca",
				"stroke": "white",
				"opacity": 1,
				"stroke-width": 0.7
			})
			.attr({
				"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
				"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
				"r": function (d) { return rScale(parseFloat(d.estimate_2014));}
			})
		
	   svg.selectAll("circle").on("mouseover", function(d) {

//Get this bar's x/y values, then augment for the tooltip
			var xPosition = parseFloat(d3.select(this).attr("cx"));
			var yPosition = parseFloat(d3.select(this).attr("cy"));

//Update the tooltip position and value
			d3.select("#tooltip")
				.style("left", xPosition + "px")
				.style("top", yPosition + "px")

d3.select("#tooltip")
			   .select("#popvalue")
			   .text(d.estimate_2014);
				
			d3.select("#tooltip")				
				.select("#city")
			   .text(d.city);

//Show the tooltip
			d3.select("#tooltip").classed("hidden", false);

})
	   .on("mouseout", function() {
	   
			//Hide the tooltip
			d3.select("#tooltip").classed("hidden", true)	
	   });	
		
		;
	});
		
		
		</script>	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<script>//PLOTTING THE SCATTERPLOT
			
		d3.select("#plot")
			.on("click", function(){

d3.selectAll("path")
				.transition()
				.delay(10)
				.duration(1000)
				.attr({
					"stroke-width": 0,
					"opacity": 0
				});

// Creating axes

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom");

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(0,"+ 150+")")
				.call(xAxis);
	/*
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + padding+",0)")
				.call(yAxis);	
				*/
				
	  	 	  svg.selectAll("circle").on("mouseover", function(d) {

//Get this bar's x/y values, then augment for the tooltip
	  	 			var xPosition = parseFloat(d3.select(this).attr("cx"));
	  	 			var yPosition = parseFloat(d3.select(this).attr("cy"));

//Update the tooltip position and value
	  	 			d3.select("#tooltip2")
	  	 				.style("left", xPosition + "px")
	  	 				.style("top", yPosition + "px")						
	  	 				.select("#value2")
	  	 			   .text(d.ratio.toString().substr(0,4));
				   
	  				   console.log("bueno!");
	
				
	  	 			d3.select("#tooltip2")				
	  	 				.select("#city2")
	  	 			   .text(d.city);

//Show the tooltip
	  	 			d3.select("#tooltip2").classed("hidden", false);

})
	  	 	   .on("mouseout", function() {
	   
	  	 			//Hide the tooltip
	  	 			d3.select("#tooltip2").classed("hidden", true)	
	  	 	   });	
				
			})
			;
			
		</script>
			
	</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js