Map - voivodeships of Poland

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://d3js.org/d3.v3.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([20, 51.75])
					.translate([ width/2, height/2 ])
					.scale(3700);

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

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);
				
						
						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;
								
								break;
								
							}
						}		
					}

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

mapWoj.append("path")
				   .attr("d", path)
				   .attr("class", "path");

mapWoj.append("text")
				.attr("x", 700)
				.attr("y", 100)
				.attr("text-anchor", "start")
				.attr("fill", "none")
				.text(function(d) { return d.properties.name; })
				.append("tspan")
				.attr("x", 700)
				.attr("dy", 25)
				.text(function(d) { return "Area: " + formatNumbers(d.properties.area) + " sq. km"; })
				.append("tspan")
				.attr("x", 700)
				.attr("dy", 25)
				.text(function(d) { return "Population: " + formatNumbers(d.properties.population); })
				.append("tspan")
				.attr("x", 700)
				.attr("dy", 25)
				.text(function(d) { return "Population density: " + d.properties.density; });
				
		
		mapWoj.on("mouseover", function() { 
                    d3.select(this)
                    .classed("hover", true)
                });
                
        mapWoj.on("mouseout", function() { 
            	d3.select(this)
                .classed("hover", false)
        		});

});
	});
	
	</script>

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

Modified http://d3js.org/d3.v3.js to a secure url

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