mbaba/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://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>

	<script type="text/javascript">

	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>

## main.css
body {
	background-color: #ededeb;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 16px;
}

h1 {
	font-size: 30px;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	text-align: left;
	color: dimgrey;
}


.text {
	padding: 0 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0px;
	background-color: #ededeb;
	text-align: left;
	text-indent: 70px;
}

path {
	fill: lightgrey;
	stroke: dimgrey;
}

path:hover {
	fill: dimgrey;
	cursor: crosshair;
}

.hover text {
    fill: red;
	font-weight: 700;
	font-size: 18px;
}

.hover tspan {
	fill: dimgrey;
	font-weight: 300;
	font-size: 16px;
}


#wrapper {
	width: 50%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

#content {
	padding: 0;
	background-color: #ededeb;
	margin: 0 1%;
	text-align: center;
}

## woj_maps.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              woj_maps.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## woj_stats.csv

          
            woj
            area
            population
            density

            
              Dolnośląskie
              19947
              2909997
              146

            
              Kujawsko-pomorskie
              17972
              2092564
              116

            
              Lubelskie
              25122
              2156150
              86

            
              Lubuskie
              13988
              1021470
              73

            
              Łódzkie
              18219
              2513093
              138

            
              Małopolskie
              15183
              3360581
              221

            
              Mazowieckie
              35558
              5316840
              150

            
              Opolskie
              9412
              1004416
              107

            
              Podkarpackie
              17846
              2129294
              119

            
              Podlaskie
              20187
              1194965
              59

            
              Pomorskie
              18310
              2295811
              125

            
              Śląskie
              12333
              4599447
              373

            
              Świętokrzyskie
              11711
              1268239
              108

            
              Warmińsko-mazurskie
              24173
              1446915
              60

            
              Wielkopolskie
              29826
              3467016
              116

            
              Zachodniopomorskie
              22892
              1718861
              75
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://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>

	<script type="text/javascript">

	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>
	body {
	background-color: #ededeb;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 16px;
	}

	h1 {
	font-size: 30px;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	text-align: left;
	color: dimgrey;
	}


	.text {
	padding: 0 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0px;
	background-color: #ededeb;
	text-align: left;
	text-indent: 70px;
	}

	path {
	fill: lightgrey;
	stroke: dimgrey;
	}

	path:hover {
	fill: dimgrey;
	cursor: crosshair;
	}

	.hover text {
	fill: red;
	font-weight: 700;
	font-size: 18px;
	}

	.hover tspan {
	fill: dimgrey;
	font-weight: 300;
	font-size: 16px;
	}



	#wrapper {
	width: 50%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	}

	#content {
	padding: 0;
	background-color: #ededeb;
	margin: 0 1%;
	text-align: center;
	}
woj	area	population	density
Dolnośląskie	19947	2909997	146
Kujawsko-pomorskie	17972	2092564	116
Lubelskie	25122	2156150	86
Lubuskie	13988	1021470	73
Łódzkie	18219	2513093	138
Małopolskie	15183	3360581	221
Mazowieckie	35558	5316840	150
Opolskie	9412	1004416	107
Podkarpackie	17846	2129294	119
Podlaskie	20187	1194965	59
Pomorskie	18310	2295811	125
Śląskie	12333	4599447	373
Świętokrzyskie	11711	1268239	108
Warmińsko-mazurskie	24173	1446915	60
Wielkopolskie	29826	3467016	116
Zachodniopomorskie	22892	1718861	75