Module 4

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Republic of Korea </title>
		<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">

body {
				background-color: #006ECC;
                font-family: sans-serif;
                color:#ffffff;
			}

</style>
	</head>
	<body>
	<h1> Population in Republic of Korea</h1>
	<p> If you move the mouse on graph, you can see the name of selected area</p>
	<p style="line-height:0">Color : </p>
	<svg width="450" height="30">
	     <rect x="10" y="10" width="30" height="15" style="fill:rgb(55,128,196);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="50" y="10" width="30" height="15" style="fill:rgb(76,138,177);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="90" y="10" width="30" height="15" style="fill:rgb(98,147,161);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="130" y="10" width="30" height="15" style="fill:rgb(116,154,145);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="170" y="10" width="30" height="15" style="fill:rgb(135,159,129);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="210" y="10" width="30" height="15" style="fill:rgb(156,165,113);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="250" y="10" width="30" height="15" style="fill:rgb(180,172,96);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="290" y="10" width="30" height="15" style="fill:rgb(203,178,81);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="330" y="10" width="30" height="15" style="fill:rgb(226,184,66);stroke-width:1;stroke:rgb(255,255,255)"/>
	     <rect x="370" y="10" width="30" height="15" style="fill:rgb(255,201,65);stroke-width:1;stroke:rgb(255,255,255)"/>
	</svg>
	<div class="map"></div>
    <script type="text/javascript">
			
        //Width and height
			var w = 800;
			var h = 700;

//Define map projection
			var projection = d3.geo.mercator()
								   .scale(5500)
                   .translate([-11900,4050]); 
            
			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

//Create SVG
			var svg = d3.select(".map")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
            
            d3.csv("data.csv",function(data){
                
                data.forEach(function(d){
                    d.population = +d.population;
                });
                
                	var color = d3.scale.quantize()
								.range(["#3780c4", "#4c8ab1", "#6293a1", "#749a91", "#879f81", "#9ca571", "#b4ac60",
                                       "#cbb251","#e2b842","#ffc941"])
                                .domain([
                                    0, d3.max(data, function(d) { return d.population; })
                                ]);
                
                
                d3.json("stateen.json", function(json) {
                    
                    for (var i = 0; i < data.length; i++) {
				
						//Grab country name
						var dataCounty = data[i].areaname;
						
						//Grab data value, and convert from string to float
						var dataValue = (data[i].population);
				
						//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 jsonCounty = json.features[j].properties.name;
				
							if (dataCounty == jsonCounty) {
						
								//Copy the data value into the GeoJSON
								json.features[j].properties.population = 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)
                   .attr("opacity",1)
                    .style("fill", function(d) {

//Get data value
							var value = d.properties.population;
                            console.log(value);

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

})
                    .append("svg:title")
                    .text(function(d){
                        return d.properties.name;
                    });
            });
        });
		</script>
	</body>
</html>

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