Odd colour transitions

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Map</title>
        <script src="https://d3js.org/d3.v3.js"></script>
    </head>
	
	
	
	
	<body>
		
		<div id = "n2"> Option #1
		</div>
		
		<div id = "n1"> Option #2
		</div>

</div>

<br>

svg.selectAll("path")
					.data(json.features)
					.enter()
					.append("path")
					.attr("d", path)
					.attr({
						"fill": "black",
						"stroke": "White",
						"stroke-width": 0.3,
						"opacity": 0.6
					});
			});

d3.csv("SO_city_pop.csv", function(data){
					console.log(data);
				var rScale = d3.scale.linear()
								.domain([0, d3.max(data, function(d){
									return parseFloat(d.x1);
								})])
								.range([5,15]);
				
				var circleXCoord;	
				var circleYCoord;	
						
				dataset = data;
	
				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.x1));}
				})
				.style({
					"fill": "#0000FF",
					"opacity": 0,
					"stroke-width":0.7,
					"stroke":"white"
				})
				.transition()
				.duration(1000)
				.ease("circle")
				.style("opacity",0.9)
 			   
			  
			});
		</script>
			
			
			
			
			
			
			
			
			
		<script> //CHANGING CIRCLE COLOUR AND SHAPE
			d3.select("#n1")
			.on("click", function(){
				
			var rScale = d3.scale.linear()
							.domain([0, d3.max(dataset, function(d){
								return parseFloat(d.x2);
							})])
							.range([5,15]);

var circleXCoord;	
			var circleYCoord;	
			
			svg.selectAll("circle")
				.transition()
	 		    .delay(300)
				.duration(1000)
				.ease("circle")
				.style({
					"fill": "DeepPink",
					"stroke": "white",
					"opacity": 0.9,
					"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.x2));}
				})
				;
		});
		
		
		
		
		
		d3.select("#n2")
		.on("click", function(){
			
		// svg.selectAll("circle")
		// 	.transition()
		// 	.duration(500)
		// 	.style("opacity", 0);
			
		var rScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d){
							return parseFloat(d.x1);
						})])
						.range([5,15]);

var circleXCoord;	
		var circleYCoord;	
		
		svg.selectAll("circle")
			.transition()
 		    .delay(300)
			.duration(1000)
			.ease("circle")
			.style({
				"fill": "#0000FF",
				"stroke": "white",
				"opacity": 0.9,
				"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.x1));}
			});	
		
		
	});
		
		
		</script>	
			
	</body>
</html>

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

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