Unemployment rate in Wales 2014

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Choropleth</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

h1 {margin: auto;
				font-size: 2.0em;
				font-weight: 200;
                color: #00ab39;         
			}
            
            h3 {
				margin: 0;
                padding-top: 5px;
				font-size: 1.00em;
				font-weight: 600;
			}
            
            p {
                padding-top: 5px;
			    font-size: 14px;
			    line-height: 1.5em;
				margin: auto;	
			}
            
			body {
                padding-top: 30px;
				background-color: #fff1e0;
		     	font-family: Helvetica, Arial, sans-serif;
		     	color: #74736C;
			}
            
            #container {
                width: 700px;
				margin-left: auto;
				margin-right: auto;
                padding-top: 10px;
				padding: 30px;
				background-color: #fff9f0;
				box-shadow: 1px 1px 2px 2px #ccc;
			}

path {
               stroke-width: 0.3;
               stroke: #c2ebd0;
			}

svg {
				background-color: #fff9f0;
			}
            
            path:hover {
                cursor:pointer
			}
            
            legend {
             padding: 1.5em 0 0 1.5em;
            }

li.key {
            border-top-width: 15px;
            border-top-style: solid;
            font-size: .75em;
            width: 10%;
            padding-left: 0;
            padding-right: 0;
        }
    
		</style>
	</head>
	<body>
         <div id="container">
		  <h1>WALES</h1>
          <h3>Wales (‘Cymru’ in Welsh) constituency map)</h3>
            <p><strong>Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</strong> is a town on Anglesey (the largest island in Wales, known as ‘Ynys Mon’ in Welsh) which has the longest place name in Europe. The name translates to English as ‘St. Mary's Church in the hollow of the white hazel near the rapid whirlpool and the church of St.Â Tysilio with a red cave’.
            
                <pr>The highest mountain in Wales is Snowdon (known in Welsh as ‘Yr Wyddfa’), which stands at 1,085 metres (3,560 feet) above sea level and is part of the Snowdonia National Park. Its summit is the highest point in the British Isles outside of Scotland. <strong>Mount Everest</strong> was named after the Welsh geographer and surveyor <strong>Colonel Sir George Everest</strong>.</pr></p>
        </div>
		<script type="text/javascript">
            
            var year = "unemployment_rate_2014";
            
			//Width and height
			var width = 700;
			var height = 630;

//Define map projection
			var projection = d3.geo.mercator()
								   .center([ -3, 53.65])
								   .translate([ width/1.3,1])
								   .scale([ 9500 ]);
            
            var color = d3.scale.quantize()
								.range([ "cdecd1","#97d9a3", "#63c673", "#34ad49", "#257c34", "#184a1f" ]);

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

//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", width)
						.attr("height", height);
            //creates an array for the legend scales
            var colorRange = [ "cdecd1","#97d9a3", "#63c673", "#34ad49", "#257c34", "#184a1f" ];

//Load in GeoJSON data
			d3.json("wales.json", function(json) {
				
				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path);		
			});

//Load in CO2 data
			d3.csv("countyWales.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("wales.json", function(json) {
					
					//Merge the CO2 data and GeoJSON into a single array
					//
					//Loop through once for each unemployment rate data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab country name
						var dataStateName = data[i].countryName;
						
						//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 jsonStateName = json.features[j].properties.NAME;
				
                            if (dataStateName == jsonStateName) {
						
								//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";
							}

});
			
				});  //End d3.json()

});  //End d3.csv()
            
            //Attach title and Legend
            svg.append("text")
                .attr("x",0)
                .attr("y",40)
                .attr("font-size",18)
                .text("Unemployment rate 2014 (%)")
                .style("fill", "#00ab39");
            
             var colors = d3.scale.quantize()
//             .range(colorbrewer.Greens[6]);
                            
		     var legend = d3.select('#legend')
                 .append('ul')
                 .attr('class', 'list-inline');

var keys = legend.selectAll('li.key')
                  .data(colors.range());

keys.enter().append('li')
                   .attr('class', 'key')
                   .style('border-top-color', String)
                   .text(function(d) {
                        var r = colors.invertExtent(d);
                        return formats.percent(r[0]);
                    });
		</script>
	</body>
</html>

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