Worldwide access to safe drinking water, 2015

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

body {
				background-color: #003c71;
			}

svg {
				background-color: #014785;
			}
			
			h1 {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
					font-size:36px;
					color: #d0f6f8;
				}
				
			p {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
					font-size:16px;
					color: #d0f6f8;
				}
				
			a:link {
				color: #8ec2e9;
			}
			
			/* visited link */
			a:visited {
				color: #00aeef;
			}
			
			/* mouse over link */
			a:hover {
				color: #c7e9c0;
			}
			
			/* selected link */
			a:active {
				color: #74c476;
			}

.citation {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
					font-size:12px;
					color: #d0f6f8;
				}

.legend {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
					font-size:13px;
					color: #d0f6f8;
				}
				
			.legendSVG {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
					padding-right:10px;
				}
				
			.legendItem {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
					font-size:13px;
					color: #d0f6f8;
					line-height:8px;
					padding-left:10px;
				}	
						</style>
	</head>
	<body>

<h1>Worldwide access to safe drinking water, 2015</h1>
               <div style="width:960px">
           		 <div style="width:700px; float:left">
                 <p>This choropleth map examines access by country to improved drinking water sources. Whereas the majority of countries fall in the 90th percentile or higher (with 40 countries scoring 100%), 59 fall below the 80th percentile. Somalis have the least access to improved water sources, scoring 31.7%.</p>
                 <p class="citation"><strong>SOURCE:</strong> <a href="https://data.un.org/Data.aspx?q=population&d=MDG&f=seriesRowID%3a665" target="_blank">Proportion of population using improved drinking water sources</a> (United Nations, Millenial Development Goals, 2015).</p></div>
                 <div style="width:140px; float:right"><p class="legend"><strong>Map legend:</strong></p>
                 
                 <p class="legendItem"><span style="padding-right: 10px"><svg width="9" height="9"><rect x="0" y="0" width="50" height="50" fill="#238b45" />3</svg></span>60% or higher</p>
                 <p class="legendItem"><span style="padding-right: 10px"><svg width="9" height="9"><rect x="0" y="0" width="50" height="50" fill="#74c476" />3</svg></span>40% to 59%</p>

<p class="legendItem"><span style="padding-right: 10px"><svg width="9" height="9"><rect x="0" y="0" width="9" height="9" fill="#e31a1c" />
3</svg></span>39% or less</p>
                 <p class="legendItem"><span style="padding-right: 10px"><svg width="9" height="9"><rect x="0" y="0" width="9" height="9" fill="#49594c" />3</svg></span>No data available</p>
                 </div>

</div>

//Year of improved drinking water data to map
			var year = "2015";

//Width and height
			var w = 1080;
			var h = 600;

//Define map projection
			var projection = d3.geo.mercator()
								   .center([ 0, 40 ])
								   .translate([ w/2, h/2 ])
								   .scale([ w/8 ]);

//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([ "#e31a1c", "#74c476", "#238b45" ]);

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

//Load in improved drinking water data
			d3.csv("drinkingwaterCOPY.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("countries.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 dataCountryCode = data[i].countryCode;
						
						//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 jsonCountryCode = json.features[j].properties.iso_a3;
				
							if (dataCountryCode == jsonCountryCode) {
						
								//Copy the data value into the GeoJSON
								json.features[j].properties.quality = 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.quality;

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

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

});  //End d3.csv()

</script>
	</body>
</html>

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