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