MariellaCC/earnings_60.csv

## earnings_60.csv

          
            country
            countryCode
            earnings

            
              Belgium
              BE
              20.98

            
              Bulgaria
              BG
              4.17

            
              Czech Republic
              CZ
              7.94

            
              Denmark
              DK
              20.61

            
              Germany
              DE
              18.13

            
              Estonia
              EE
              5.91

            
              Ireland
              IE
              19.79

            
              Greece
              GR
              18.25

            
              Spain
              ES
              16.85

            
              France
              FR
              19.95

            
              Croatia
              HR
              11.68

            
              Italy
              IT
              21.26

            
              Cyprus
              CY
              13.96

            
              Latvia
              LV
              3.96

            
              Lithuania
              LT
              6.04

            
              Luxembourg
              LU
              24.9

            
              Hungary
              HU
              9.15

            
              Malta
              MT
              12.2

            
              Netherlands
              NL
              17.64

            
              Austria
              AT
              17.74

            
              Poland
              PL
              10.51

            
              Portugal
              PT
              11.6

            
              Romania
              RO
              7.04

            
              Slovenia
              SI
              18.75

            
              Slovakia
              SK
              7.43

            
              Finland
              FI
              15.8

            
              Sweden
              SE
              14.86

            
              United Kingdom
              GB
              15.19

            
              Iceland
              IS
              11.29

            
              Norway
              NO
              20.1

            
              Switzerland
              CH
              21.03

            
              Macedonia
              MK
              8.86

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Hourly earnings for 60 + years old people in Europe</title>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<script src="http://d3js.org/topojson.v1.min.js"></script>
		<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
		<style type="text/css">

			body {
					font-family: Verdana, Arial, sans-serif;
					font-size: 14px;
					background-color: white;

			}

			p a {
				color: grey;

			}

			p a:hover {
				opacity: 0.6;
			}


			svg {
				background-color: white;

			}

			h1 {
				color: rgb(115, 115, 115);
				font-size: 18px;
				font-weight: bold;
				margin: 0;
				padding-bottom: 10px;

			}

				#container {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 20px;
				background-color: white;
				box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
				position: relative;
			}


			div.tooltip {
       	 		position: absolute;
       	 		font-size: 11px;
        		width: auto;
        		height: auto;
        		padding: 10px;
        		background-color: white;
        		-webkit-border-radius: 10px;
        		-moz-border-radius: 10px;
        		border-radius: 10px;
        		-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        		-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        		box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        		pointer-events: none;
			}

			.pays:hover {
				opacity: 0.8;
				cursor: pointer;
			}

			.source {
				font-size: 12px;
			}


		</style>
	</head>
	<body>


	<div id="container">
		<h1>How do earnings for 60 + years old compare across Europe ?</h1>
		<p>Mean hourly earnings in purchasing power standard (PPS) for people aged 60 and more in Europe. Industry, construction and services (except public administration, defense, compulsory social security)
		<br />
		<p>Hover over a country to display information.</p>
		<span class = "source">Source: <a href="http://ec.europa.eu/eurostat/web/equality/data/database">Eurostat</a></span></p>


	</div>


		<script type="text/javascript">


			//Width and height
			var w = 800;
			var h = 600;

			//Define map projection


			var projection = d3.geo.mercator() //utiliser une projection standard pour aplatir les pôles, voir D3 projection plugin
								   .center([ 13, 52 ]) //comment centrer la carte, longitude, latitude
								   .translate([ w/2, h/2 ]) // centrer l'image obtenue dans le svg
								   .scale([ w/1.5 ]); // zoom, plus la valeur est petit plus le zoom est gros

			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

			//Define quantize scale to sort data values into buckets of color
			//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
			var color = d3.scale.quantize()
								.range([ "#f1eef6", "#bdc9e1", "#74a9cf", "#2b8cbe", "#045a8d" ]); //échelle définie pour les couleurs


			//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


  			var div = d3.select("body").append("div")
  			.attr("class", "tooltip")
  			.style("opacity", 0);

			//Load in earnings data
			d3.csv("earnings_60.csv", function(data) {

				//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return +d.earnings; }), //attribue la couleur selon la valeur
					d3.max(data, function(d) { return +d.earnings; })
				]);

					//Load in GeoJSON data
					d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {

					//Merge the earnings data and GeoJSON into a single array
					//Loop through once for each earnings data value
					for (var i = 0; i < data.length; i++) {

						//Grab country name
						var dataCountryCode = data[i].countryCode;

						//Grab data value, and convert from string to float
						var dataValue = +data[i].earnings;
						var Country = data[i].country;

						//Find the corresponding country inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {

							//We'll check the official ISO country code
							var jsonCountryCode = json.features[j].properties.iso_a2;

							if (dataCountryCode == jsonCountryCode) {

								//Copy the data value into the GeoJSON
								json.features[j].properties.earnings = dataValue;

								//Stop looking through the JSON
								break;

							}
						}
					}

						//Bind data and create one path per GeoJSON feature
						svg.selectAll("path")
						   .data(json.features)
						   .enter()
						   .append("path")
						   .attr("d", path)
						   .attr("stroke", "rgba(255, 255, 255, 0.5)")
						   .style("fill", function(d) {

							//Get data value
							var value = d.properties.earnings;

							if (value) {
								//If value exists…
								return color(value);
							} else {
								//If value is undefined…
								return "#fff";
							}

						})

						   .attr("class", function(d) {

							//Get data value
							var value = d.properties.earnings;

							if (value) {
								//If value exists…
								return "pays";
							}
						})

  						.on("mouseover", function(d) {
  						var value = d.properties.earnings;

  						if (value) {
    					d3.select(this);
   						div.transition().duration(300)
    					.style("opacity", 1)
    					div.html("<strong>" + d.properties.name + "</strong>: " + d.properties.earnings + " pps")
    					.style("left", (d3.event.pageX) + "px")
    					.style("top", (d3.event.pageY -30) + "px");
  							}})

  						.on("mouseout", function() {
    					d3.select(this);
    					div.transition().duration(300)
    					.style("opacity", 0);
 						 	});

			});
		});


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

## ne_50m_admin_0_countries_simplified.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_50m_admin_0_countries_simplified.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.
country	countryCode	earnings
Belgium	BE	20.98
Bulgaria	BG	4.17
Czech Republic	CZ	7.94
Denmark	DK	20.61
Germany	DE	18.13
Estonia	EE	5.91
Ireland	IE	19.79
Greece	GR	18.25
Spain	ES	16.85
France	FR	19.95
Croatia	HR	11.68
Italy	IT	21.26
Cyprus	CY	13.96
Latvia	LV	3.96
Lithuania	LT	6.04
Luxembourg	LU	24.9
Hungary	HU	9.15
Malta	MT	12.2
Netherlands	NL	17.64
Austria	AT	17.74
Poland	PL	10.51
Portugal	PT	11.6
Romania	RO	7.04
Slovenia	SI	18.75
Slovakia	SK	7.43
Finland	FI	15.8
Sweden	SE	14.86
United Kingdom	GB	15.19
Iceland	IS	11.29
Norway	NO	20.1
Switzerland	CH	21.03
Macedonia	MK	8.86
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hourly earnings for 60 + years old people in Europe</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
	<style type="text/css">

	body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 14px;
	background-color: white;

	}

	p a {
	color: grey;

	}

	p a:hover {
	opacity: 0.6;
	}


	svg {
	background-color: white;

	}

	h1 {
	color: rgb(115, 115, 115);
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	padding-bottom: 10px;

	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
	box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
	position: relative;
	}


	div.tooltip {
	position: absolute;
	font-size: 11px;
	width: auto;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	.pays:hover {
	opacity: 0.8;
	cursor: pointer;
	}

	.source {
	font-size: 12px;
	}



	</style>
	</head>
	<body>


	<div id="container">
	<h1>How do earnings for 60 + years old compare across Europe ?</h1>
	<p>Mean hourly earnings in purchasing power standard (PPS) for people aged 60 and more in Europe. Industry, construction and services (except public administration, defense, compulsory social security)
	<br />
	<p>Hover over a country to display information.</p>
	<span class = "source">Source: <a href="http://ec.europa.eu/eurostat/web/equality/data/database">Eurostat</a></span></p>


	</div>


	<script type="text/javascript">



	//Width and height
	var w = 800;
	var h = 600;

	//Define map projection


	var projection = d3.geo.mercator() //utiliser une projection standard pour aplatir les pôles, voir D3 projection plugin
	.center([ 13, 52 ]) //comment centrer la carte, longitude, latitude
	.translate([ w/2, h/2 ]) // centrer l'image obtenue dans le svg
	.scale([ w/1.5 ]); // zoom, plus la valeur est petit plus le zoom est gros

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	//Define quantize scale to sort data values into buckets of color
	//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
	var color = d3.scale.quantize()
	.range([ "#f1eef6", "#bdc9e1", "#74a9cf", "#2b8cbe", "#045a8d" ]); //échelle définie pour les couleurs


	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);


	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Load in earnings data
	d3.csv("earnings_60.csv", function(data) {

	//Set input domain for color scale
	color.domain([
	d3.min(data, function(d) { return +d.earnings; }), //attribue la couleur selon la valeur
	d3.max(data, function(d) { return +d.earnings; })
	]);

	//Load in GeoJSON data
	d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {

	//Merge the earnings data and GeoJSON into a single array
	//Loop through once for each earnings data value
	for (var i = 0; i < data.length; i++) {

	//Grab country name
	var dataCountryCode = data[i].countryCode;

	//Grab data value, and convert from string to float
	var dataValue = +data[i].earnings;
	var Country = data[i].country;

	//Find the corresponding country inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {

	//We'll check the official ISO country code
	var jsonCountryCode = json.features[j].properties.iso_a2;

	if (dataCountryCode == jsonCountryCode) {

	//Copy the data value into the GeoJSON
	json.features[j].properties.earnings = dataValue;

	//Stop looking through the JSON
	break;

	}
	}
	}

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("stroke", "rgba(255, 255, 255, 0.5)")
	.style("fill", function(d) {

	//Get data value
	var value = d.properties.earnings;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "#fff";
	}

	})

	.attr("class", function(d) {

	//Get data value
	var value = d.properties.earnings;

	if (value) {
	//If value exists…
	return "pays";
	}
	})

	.on("mouseover", function(d) {
	var value = d.properties.earnings;

	if (value) {
	d3.select(this);
	div.transition().duration(300)
	.style("opacity", 1)
	div.html("<strong>" + d.properties.name + "</strong>: " + d.properties.earnings + " pps")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY -30) + "px");
	}})

	.on("mouseout", function() {
	d3.select(this);
	div.transition().duration(300)
	.style("opacity", 0);
	});

	});
	});



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