Bubble map with button transition

<!doctype html>
<html lang='en-GB'>
<head></head>
<style>
	p {
		font-family: sans-serif;
		font-size: 14px;
	}
	/*template styles*/
	.gia-chart-wrapper {
		max-width: 620px;
		margin: 0 auto;
	}
	/*map styles */
	.states {
	 	fill: #e2e2e2;
	  	stroke: #ffffff;
	  	stroke-linejoin: round;
	}
	.circle {
		fill: #4bc6df;
		opacity: 0.5;
	}
	button {
	    background-color: #ffffff;
	    border: 1px solid #dcdcdc;
	    border-radius: 15px;
	    color: #333333;
	    padding: 5px 8px;
	    cursor: pointer;
	    display: inline-block;
	    margin-right: 10px;
	    text-align: center;
	    text-decoration: none;
	    font-size: 12px;
	    line-height: 20px;
	    font-family: sans-serif;
	}
	button:focus {
	    outline: 0;
	}
	.active {
	    background-color: #333333;
	    border: 1px solid #333333;
	    color: #ffffff;
	}

</style>

//Tells the map what projection to use
		var projection = d3.geo.albersUsa()
		  	.scale(width *1.25)
		  	.translate([width / 2, height / 2]);

//Tells the map how to draw the paths from the projection
		var path = d3.geo.path()
		  	.projection(projection);

//Sets the color scale
		var color_domain = [10, 20, 30, 40, 50, 100];
		var ext_color_domain = [0, 10, 20, 30, 40, 50, 100]; 
		var color = d3.scale.threshold()

.domain(color_domain)
		.range(['#ecf8fb', '#d9f1f7', '#c5eaf3', '#b1e2ef', '#9cdbeb', '#4bc6df']);

//Appened svg to page
		var map = d3.select(".gia-chart").append("svg")
		  	.style('height', height + 'px')
		  	.style('width', width + 'px');

//Load the files
		queue()
		  	.defer(d3.json, "usmap.json")
		  	.defer(d3.csv, "points.csv")
		  	.await(ready);

function ready(error, us, points) {
		  	if (error) throw error;

//Organizes buttons data
		  	var types = points.map(function(d) { return d.type;});   
		  	var uniq = d3.set(types).values();

//Buttons
		  	var button = d3.select(".gia-key").selectAll("button")
		  		.data(uniq)
			    .enter()  
			    .append("button")
			    .attr("class", function (d) {
			    	if ( d === "first" ) { return 'active'; }
			      	else { return 'not-active'; }
			    })
			    .text(function(d) {return d;})
			    .on("click", function(d) {
			    	updateChartForType(d);
			      	d3.select(".active").classed("active", false);
			      	d3.select(this).classed("active", true);
			    });

//Filters the data
			initialType = points.filter(function(d) { return d.type === "first";});

//Append states
			map.append("g")
			  	.attr("class", "states")
			    .selectAll("path")
			    .data(topojson.feature(us, us.objects.states).features)
			    .enter().append("path")
			    .attr("d", path);

//Append circles
			var circle = map.selectAll("circle")
			    .data(initialType)
			    .enter()
			    .append("circle")
			    .attr("class", "circle")
			    .attr("cx", function(d) { return projection([d.longitude, d.latitude])[0];})
			    .attr("cy", function(d) { return projection([d.longitude, d.latitude])[1];})
			    .attr("r", function(d) { return Math.sqrt(d.count)*7;})

//Update chart on click
			function updateChartForType(typeId) {

var typeData = points.filter(function(d) { return d.type === typeId;});

console.log(typeData);

var circle = map.selectAll("circle")
			    	.data(typeData);

circle.exit().remove();
			    circle.enter().append("circle")
			      	.attr("r", 0);

circle.transition()
			      	.duration(500)  
			      	.attr("cx", function(d) { return projection([d.longitude, d.latitude])[0];})
			      	.attr("cy", function(d) { return projection([d.longitude, d.latitude])[1];})
			      	.attr("r", function(d) { return Math.sqrt(d.count)*7;})
			}

//RESPONSIVENESS
			d3.select(window).on('resize', resize);

function resize() {

var w = d3.select(".gia-chart").node().clientWidth;

//Adjust things when the window size changes
			    width = w - margin.left - margin.right;
			    height = width * mapRatio;
			    
			    //Update projection
			    var newProjection = d3.geo.albersUsa()
			    	.scale(width*1.25)
			      	.translate([width / 2, height / 2]);

//Update path
			    path = d3.geo.path()
			      	.projection(newProjection);

//Update circles
			    map.selectAll("circle")
			      	.attr("cx", function(d) {
			        	return newProjection([d.longitude, d.latitude])[0];
			      	})
			      	.attr("cy", function(d) {
			        	return newProjection([d.longitude, d.latitude])[1];
			      	})

//Resize the map container
			    map
			      	.style('width', width + 'px')
			      	.style('height', height + 'px');

//Resize the map
			    map.selectAll("path").attr('d', path); 
	  		}
		}
	</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js