xxxxxxxxxx<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