<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Iseljavanje iz Hrvatske</title>


<script src="https://d3js.org/d3.v4.min.js"></script>

<<!-- script src="https://d3js.org/d3.geo.projection.v0.min.js"></script> --> 

</head>


<style>

.drzave {
  fill: none; <!-- mora biti ispuna postavljena na "none" da bi se države mogle obojati kako je zadano u f-ji var color = d3.scale.threshold()-->
  stroke: white;
  stroke-width: 0.5px;
}

</style>

<body>

<script type="text/javascript">


//1. Zadavanje dimenzija karte
            var w=960;
            var h=800;

			
//Format number in tooltip - argument (",.0f") vraća "," kao separator tisućica
// više o formatima na https://github.com/d3/d3-format			
var formatNumber = d3.format(",.0f");


//Koropletna karta
var color = d3.scaleThreshold()
				.domain([0, 630, 1182, 1734, 2286, 2838, 3390, 3942, 4494, 5046])
				.range(["white", "#fff7f3", "#fde0dd", "#fcc5c0", "#fa9fb5", "#f768a1", "#dd3497", "#ae017e", "#7a0177", "#49006a"]); 


		
//Zadavanje kartografske projekcije
var projection = d3.geoTransverseMercator()
			.rotate([-16.5, 0])
			.center([0, 44])
			.scale ([8500])
			.translate ([w /2, h /2]);
	
	
//Definiranje path generator-a i definiranje projekcije	
var path = d3.geoPath()
			.projection(projection);

			
// Kreiranje SVG elemenata 
var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h);
			
//Učitavanje GeoJSON podataka	
var rh_zupanije=svg.append("g");
		
		d3.json("rh_iseljavanje.geojson", function(json) {     
		
		//Vezivanje podataka i kreiranje jednog patha za svaki JSON feature
					rh_zupanije.selectAll("path")
								.data(json.features)
								.enter()
								.append("path")
								.attr("d", path)
								.attr("class", "rh_zupanije")
								.attr("stroke", "white")
								// na temelju numeričkih vrijednosti zapisanih u polju "god_2012" u datoteci .json bojaju se države svijeta
								.style("fill", function(d) { return color(d.properties.god_2012); })
								.append ("title")
								// tooltip s nazivom države i vrijednosti iz polja "god_2012"				   			   
								.text (function (d){
								return d.properties.name + "\nIseljeno: " + formatNumber (d.properties.god_2012) // \n za novi redak
					  });
		

});	


</script>
</body>
</html> 