Map circles text

forked from alignedleft's block: Map circles text

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,400italic,900,700,100italic,300italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>Voivodeships of Poland</title>
</head>

<body>

<div id="wrapper">
	
	<div class="text">
		<h1>Voivodeships of Poland</h1>
	</div>

d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "content");

var margin = {top: 5, right: 25, bottom: 5, left: 5};

var width = 900 - margin.left - margin.right,
    	height = 750 - margin.top - margin.bottom;

var projection = d3.geo.mercator()
					.center([22, 51])
					.translate([ width/2, height/2 ])
					.scale(3000);

var path = d3.geo.path()
					.projection(projection);

var mapColor = d3.scale.quantize()
							.range(["#ffffb2", 
									"#fed98e", 
									"#fe9929", 
									"#d95f0e", 
									"#993404"])
							.domain([7, 16.5]);

var legendColor = ["#ffffb2", "#fed98e", "#fe9929", "#d95f0e", "#993404"];

var svg = d3.select("#content")
				.append("svg")
				.attr("width", width + margin.left + margin.right)
    			.attr("height", height + margin.top + margin.bottom)
  				.append("g")
    			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var formatNumbers =  d3.format(",");

d3.csv("woj_stats.csv", function(data) {
			
			
    d3.json("woj_maps.json", function(json) {

for (var i = 0; i < data.length; i++) {
				
						var dataWoj = data[i].woj;
						
						
						var areaWoj = parseFloat(data[i].area);
						
						var populationWoj = parseFloat(data[i].population);
						
						var densityWoj = parseFloat(data[i].density);
						
						var unRateWoj = parseFloat(data[i].un_rate_woj);
						
						var capitalWoj = data[i].capital;
						
						var capitalWojUR = parseFloat(data[i].un_rate_capital);

var capitalLong = parseFloat(data[i].longitude);

var capitalLat = parseFloat(data[i].latitude);

for (var j = 0; j < json.features.length; j++) {
						
							var jsonWoj = json.features[j].properties.name;
				
							if (dataWoj == jsonWoj) {
						
								json.features[j].properties.area = areaWoj;
								json.features[j].properties.population = populationWoj;
								json.features[j].properties.density = densityWoj;
								json.features[j].properties.un_rate_woj = unRateWoj;
								json.features[j].properties.capital = capitalWoj;
								json.features[j].properties.capitalWojUR = capitalWojUR;
								
								json.features[j].properties.longitude = capitalLong;
								
								json.features[j].properties.latitude = capitalLat;

break;
								
							}
						}		
					}

var mapWoj = svg.selectAll("g")
                    .data(json.features)
                    .enter()
                    .append("g")

mapWoj.append("path")
				   .attr("d", path)
				   .attr("class", "path")
				   .style("fill", function (d) { return mapColor(d.properties.un_rate_woj);
				   });

mapWoj.append("text")
				.attr("x", 550)
				.attr("y", 100)
				.attr("text-anchor", "start")
				.attr("fill", "none")
				.text(function(d) { return d.properties.name; })
				
				.append("tspan")
				.attr("x", 550)
				.attr("dy", 25)
				.text(function(d) { return "Area: " + formatNumbers(d.properties.area) + " sq. km"; })
				
				.append("tspan")
				.attr("x", 550)
				.attr("dy", 25)
				.text(function(d) { return "Population: " + formatNumbers(d.properties.population); })
				
				.append("tspan")
				.attr("x", 550)
				.attr("dy", 25)
				.text(function(d) { return "Unemployment rate: " + d.properties.un_rate_woj + "%"; })
				
				.append("tspan")
				.attr("x", 550)
				.attr("dy", 25)
				.text(function(d) { return "Capital: " + d.properties.capital ; })

.append("tspan")
				.attr("x", 550)
				.attr("dy", 25)
				.text(function(d) { return d.properties.capital + "'s unemployment rate: " + d.properties.capitalWojUR + "%"; });
				
		
		mapWoj.on("mouseover", function() { 
                    d3.select(this)
                    .classed("hover", true)
                });
                
        mapWoj.on("mouseout", function() { 
            	d3.select(this)
                .classed("hover", false)
        		});

//Create a new group for each capital
       var mapCapitalGroups = svg.selectAll("g.capital")
                    .data(json.features)
                    .enter()
                    .append("g")
                    .attr("class", "capital");

//Within each group, append a circle
       mapCapitalGroups.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) { return Math.sqrt(+d.properties.capitalWojUR * 50);
					   });

//Within each group, append a text element
		//oh, and stores a reference to these text elements
		//in a new variable, because we'll need this for appending
		//tspans inside each one in a moment.
		var capitalLabels = mapCapitalGroups.append("text")
					.attr("x", 550)
					.attr("y", 100)
					.attr("text-anchor", "start")
					.attr("fill", "none")
					.text(function(d) { return d.properties.capital; });

//Append a new tspan inside of each element…
		capitalLabels.append("tspan")
					.attr("x", 550)
					.attr("dy", 25)
					.text(function(d) { return "Unemployment rate: " + d.properties.capitalWojUR + "%"; });

//Append another new tspan inside of each element…
		capitalLabels.append("tspan")
					.attr("x", 550)
					.attr("dy", 25)
					.text(function(d) { return d.properties.name + "'s nemployment rate: " + d.properties.un_rate_woj; });

//No longer needed, as this hover effect can be handled with CSS!
			/*
			mapCapital.on("mouseover", function() { 
                    d3.select(this)
                    .classed("hover", true)
                });
                
        	mapCapital.on("mouseout", function() { 
            	d3.select(this)
                .classed("hover", false)
        		});
			*/

for (var i = 0; i < 5; i++) {
			svg.append("rect")
				.attr("y", 490)
				.attr("x", (i*20)+75)
				.attr("width", 20)
				.attr("height", 20)
				.attr("fill", legendColor[i])
				.attr("class", "rect")
								};

svg.append("text")
				.attr("x", 70)
				.attr("y", 505)
				.attr("text-anchor", "end")
				.attr("class", "legend")
				.text("7%");

svg.append("text")
				.attr("x", 210)
				.attr("y", 505)
				.attr("text-anchor", "end")
				.attr("class", "legend")
				.text("16.5%");

});
	});
	
	</script>

</div>
</body>
</html>

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