xxxxxxxxxx<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> <script type="text/javascript"> //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