Old school D3 from simpler times

All examples By author By category About

asifsalam

Full window Github gist

Yemen - Provinces and Cities

<!DOCTYPE html>
<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