xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Yemen Provinces and Cities</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.js"></script> <style type="text/css"> body { margin: 0; background-color: #eaeaea; font-family: Helvetica, Arial, sans-serif;/* padding-top:10px; padding-left:20px;*/ } svg { background-color: #d6e6e4; } path { stroke: white; stroke-width: 0.5px; fill: #eab7b7; } path:hover { fill: #959595; } #container { width: 1000px; margin-left: auto; margin-right: auto; margin-top: 20px; padding: 20px; background-color: white; box-shadow: 2px 2px 3px 3px #c4c0c0; } h1 { font-size: 24px; margin: 0; } p { font-size: 16px; margin: 10px 0 0 0; } .city-label { font-size: 11px; fill: grey; } .country { fill: #b5b5b5; stroke: #bfbfbf; } .legend { font-size: 12px; fill: grey; } .legendTitle { font-size: 14px; } .YEM { fill: #f2bbbb; stroke: #ededed; } .YEM:hover { fill: #ff8686; } #chart { width: 1000px; height: 500px; position:relative; right: -400px; top: 10px; } circle { stroke: #000069; stroke-opacity: 1; fill: #ffffff; fill-opacity: 0.1; } circle:hover { fill-opacity:0.6; } </style> </head> <body> <div id="container"> <h1>Yemen - Provinces and Cities</h1> <p>Yemen is currently in a state of civil war, with two factions, one supporting the current government of Mansur Hadi, and the other loyal to former President Saleh. I was just curious about the population of their major cities. The size of the circles indicates the population of the city. The legend is at the bottom right.<br></p> <p><br></p> <svg class="chart"></svg> </div> <script type="text/javascript"> var margin = {top: 80, right: 20, bottom: 50, left: 60}, width = 1000 - margin.left - margin.right, height = 450 - margin.top - margin.bottom; //Define map projection var projection = d3.geo.mercator() .center([50, 15 ]) .translate([ width/2, height/2 ]) .scale([ width/0.3 ]); //Define path generator var path = d3.geo.path() .projection(projection); var chart = d3.select(".chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var num_format = d3.format(",.0f"); //Load in GeoJSON data var features; d3.json("yemen.json", function(json) { //Bind data and create one path per GeoJSON feature features = json.features; chart.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .attr("class",function(d) { return "country " +d.properties.adm0_a3;}) .append("title") .text(function(d) {labels = "Country: " + d.properties.admin + "\n" + d.properties.type_en + ": " + d.properties.name; return labels ;}); var scale_factor = 0.00025; // To scale the circle radius sqrtScale = d3.scale.sqrt().domain([0,2500000]).range([0,25]) d3.json("populated_places.json",function(places) { //console.log(places); chart.selectAll("circle") .data(places.features) .enter() .append("circle") .attr("cx",function(d) { return projection([d.properties.LONGITUDE,d.properties.LATITUDE])[0];}) .attr("cy",function(d) { return projection([d.properties.LONGITUDE,d.properties.LATITUDE])[1];}) //.attr("r", function(d) { console.log(Math.sqrt(d.properties.POP_MAX*scale_factor),d.properties.POP_MAX);return Math.sqrt(d.properties.POP_MAX*scale_factor)}) .attr("r", function(d) { return sqrtScale(d.properties.POP_MAX)}) .append("title") .text(function(d) { return "City: " + d.properties.NAME + "\nPopulation (K): " + num_format(d.properties.POP_MAX/1000);}); chart.selectAll(".city-label") .data(places.features) .enter() .append("text") .attr("class","city-label") .attr("transform",function(d) { return "translate(" + projection([d.properties.LONGITUDE,d.properties.LATITUDE]) + ")"; }) .text(function(d) {return d.properties.NAME}) .attr("x",function(d) {return d.properties.LONGITUDE > 46 ? 6 : -6;}) .attr("dx",function(d) {return d.properties.LONGITUDE > 46 ? "0.35em" : "-0.35em";}) .attr("dy","0.3em") .style("text-anchor",function(d) {console.log(d.properties.LATITUDE); return d.properties.LONGITUDE > 46 ? "start" : "end";}); // Creating the legend var linearSize = d3.scale.linear().domain([5,15]).range([5,15]); chart.append("g") .attr("class","legendSize legend") .attr("transform","translate(750,250)"); var legendSize = d3.legend.size() .scale(sqrtScale) .cells([500000,1000000,2000000]) .labels(["0.5M","1M","2M"]) .title("Size of Population") .shape('circle') .shapePadding(15) .labelOffset(20) .orient('horizontal'); chart.select('.legendSize') .call(legendSize); }); // Country name on the chart chart.append("text").text("Yemen") .attr("x",projection([46.9,15.564383])[0]) .attr("y",projection([46.9,15.564383])[1]) .attr("fill","#2c2c2c"); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.js