Italian emitters (choropleth map with circles)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Emissions in Italian Regions</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

body {
				margin: 0;
				background-color: #eff3ff;
				font-family: Helvetica, Arial, sans-serif;
			}

#container {
				width: 580px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 60px;
				padding: 10px;
				background-color: white;
				box-shadow: 5px 5px 6px 6px #ccc;
			}

h1 {
				font-size: 30px;
				margin: 10;
			}

p {
				font-size: 14px;
				margin: 14px 0 0 0;
			}

a:link {
				text-decoration: none;
				color: gray;
			}

a:hover {
				text-decoration: underline;
			}

a:visited {
				color: gray;
			}

a:active {
				color: steelBlue;
			}

svg {
				background-color: white;
			}

</style>
	</head>
	<body>
			<div id="container">

<h1>CO2 Emissions in Italian Regions (2010)</h1>
			<h4>Circles indicate top ten provinces in carbon intensity level (CO2 emitted per GDP)</h4>

</div>

//Year of CO2 data to map
			var year = "2010";

//Width and height
			var w = 480;
			var h = 640;

//Define map projection
			var projection = d3.geo.conicEqualArea()
								   .center([ 20, 40 ])
								   .translate([ w/0.9, h/1.65 ])
								   .scale([ 3000 ]);

//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

//Define quantize scale to sort data values into buckets of color
			//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
			var color = d3.scale.quantize()
								.range([ "#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c" ]);

//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Load in CO2 data
			d3.csv("ispra_regioni_co2_2010.csv", function(data) {

//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return +d[year]; }), 
					d3.max(data, function(d) { return +d[year]; })
				]);

//Load in GeoJSON data
				d3.json("italy.json", function(json) {
				
					//Merge the CO2 data and GeoJSON into a single array
					//
					//Loop through once for each CO2 data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab country name
						var dataREGIONE = data[i].id;
						
						//Grab data value, and convert from string to float
						var dataValue = +data[i][year];
				
						//Find the corresponding country inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {
						
							//We'll check the official ISO country code
							var jsonid = json.features[j].properties.id;
				
							if (dataREGIONE == jsonid) {
						
								//Copy the data value into the GeoJSON
								json.features[j].properties.co2 = dataValue;
								
								//Stop looking through the JSON
								break;
								
							}
						}		
					}

//Bind data and create one path per GeoJSON feature
					svg.selectAll("path")
					   .data(json.features)
					   .enter()
					   .append("path")
					   .attr("d", path)
					   .style("fill", function(d) {

//Get data value
							var value = d.properties.co2;

if (value) {
								//If value exists…
								return color(value);
							} else {
								//If value is undefined…
								return "#ccc";
							}

});

//Load in cities data
					d3.csv("top10city_lonlat_2.csv", function(data) {
						
						//Create a circle for each city
						var circles = svg.selectAll("circle")
						   .data(data)
						   .enter()
						   .append("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) {
						   	   //Use Math.sqrt to scale by area (not radius)
							   return Math.sqrt(+d.co2_pil_2010 * 20);
						   })
						   .style("fill", "orange")
						   .style("opacity", 0.75);
						   
					//Append a title with the PROVINCIA name (so we get easy tooltips)
							circles.append("title")
							.text(function(d) {
							return d.name;
							});
						});

});  //End d3.json()

});  //End d3.csv()
		
		</script>
	</body>
</html>

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