scotthmurray/index.html

## index.html
<!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>

	<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([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>

## 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: 30px;
}

.path {
	opacity: 0.75;
	stroke: dimgrey;
}

.path:hover {
	opacity: 1;
	cursor: crosshair;
}

.capital circle {
	stroke: dimgrey;
	stroke-opacity: 0.75;
	fill: lightgrey;
	opacity: 0.75;

}

/* Hover pseudoclass is applied to the GROUP,
   although visual changes occur on the child
   elements WITHIN each group */
.capital:hover circle {
	stroke-width: 1.5px;
	stroke: dimgrey;
	stroke-opacity: 1;
	cursor: crosshair;
	opacity: 1;
}

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

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

.legend {
	font-size: 12px;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: dimgrey;
}

.rect {
	opacity: 0.75;
	stroke: lightgrey;
	stroke-width: 0;

}

#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
            un_rate_woj
            capital
            un_rate_capital
            latitude
            longitude

            
              Dolnośląskie
              19947
              2909997
              146
              9.4
              Wrocław
              3.5
              51.11
              17.022222

            
              Kujawsko-pomorskie
              17972
              2092564
              116
              13.8
              Bydgoszcz
              5.7
              53.125
              18.011111

            
              Lubelskie
              25122
              2156150
              86
              11.5
              Lublin
              8
              51.248056
              22.570278

            
              Lubuskie
              13988
              1021470
              73
              11.3
              Gorzów Wielkopolski
              4.8
              52.730833
              15.238333

            
              Łódzkie
              18219
              2513093
              138
              11.2
              Łódź
              9.9
              51.776667
              19.454722

            
              Małopolskie
              15183
              3360581
              221
              8.8
              Kraków
              4.6
              50.061389
              19.938333

            
              Mazowieckie
              35558
              5316840
              150
              9
              Warszawa
              3.7
              52.232222
              21.008333

            
              Opolskie
              9412
              1004416
              107
              10.6
              Opole
              5.3
              50.664722
              17.926944

            
              Podkarpackie
              17846
              2129294
              119
              13.1
              Rzeszów
              7.3
              50.033611
              22.004722

            
              Podlaskie
              20187
              1194965
              59
              12.1
              Białystok
              10.9
              53.135278
              23.145556

            
              Pomorskie
              18310
              2295811
              125
              9.8
              Gdańsk
              4.5
              54.3475
              18.645278

            
              Śląskie
              12333
              4599447
              373
              8.8
              Katowice
              3.9
              50.264167
              19.023611

            
              Świętokrzyskie
              11711
              1268239
              108
              13
              Kielce
              8.4
              50.874167
              20.633333

            
              Warmińsko-mazurskie
              24173
              1446915
              60
              16.5
              Olsztyn
              5.9
              53.773056
              20.476111

            
              Wielkopolskie
              29826
              3467016
              116
              7
              Poznań
              2.5
              52.408333
              16.934167

            
              Zachodniopomorskie
              22892
              1718861
              75
              13.7
              Szczecin
              7.4
              53.438056
              14.542222
	<!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>

	<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([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>
	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: 30px;
	}

	.path {
	opacity: 0.75;
	stroke: dimgrey;
	}

	.path:hover {
	opacity: 1;
	cursor: crosshair;
	}

	.capital circle {
	stroke: dimgrey;
	stroke-opacity: 0.75;
	fill: lightgrey;
	opacity: 0.75;

	}

	/* Hover pseudoclass is applied to the GROUP,
	although visual changes occur on the child
	elements WITHIN each group */
	.capital:hover circle {
	stroke-width: 1.5px;
	stroke: dimgrey;
	stroke-opacity: 1;
	cursor: crosshair;
	opacity: 1;
	}

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

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

	.legend {
	font-size: 12px;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: dimgrey;
	}

	.rect {
	opacity: 0.75;
	stroke: lightgrey;
	stroke-width: 0;

	}

	#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	un_rate_woj	capital	un_rate_capital	latitude	longitude
Dolnośląskie	19947	2909997	146	9.4	Wrocław	3.5	51.11	17.022222
Kujawsko-pomorskie	17972	2092564	116	13.8	Bydgoszcz	5.7	53.125	18.011111
Lubelskie	25122	2156150	86	11.5	Lublin	8	51.248056	22.570278
Lubuskie	13988	1021470	73	11.3	Gorzów Wielkopolski	4.8	52.730833	15.238333
Łódzkie	18219	2513093	138	11.2	Łódź	9.9	51.776667	19.454722
Małopolskie	15183	3360581	221	8.8	Kraków	4.6	50.061389	19.938333
Mazowieckie	35558	5316840	150	9	Warszawa	3.7	52.232222	21.008333
Opolskie	9412	1004416	107	10.6	Opole	5.3	50.664722	17.926944
Podkarpackie	17846	2129294	119	13.1	Rzeszów	7.3	50.033611	22.004722
Podlaskie	20187	1194965	59	12.1	Białystok	10.9	53.135278	23.145556
Pomorskie	18310	2295811	125	9.8	Gdańsk	4.5	54.3475	18.645278
Śląskie	12333	4599447	373	8.8	Katowice	3.9	50.264167	19.023611
Świętokrzyskie	11711	1268239	108	13	Kielce	8.4	50.874167	20.633333
Warmińsko-mazurskie	24173	1446915	60	16.5	Olsztyn	5.9	53.773056	20.476111
Wielkopolskie	29826	3467016	116	7	Poznań	2.5	52.408333	16.934167
Zachodniopomorskie	22892	1718861	75	13.7	Szczecin	7.4	53.438056	14.542222