Last active
June 24, 2018 13:26
-
-
Save MariellaCC/8dea97c0f61429d1b72a to your computer and use it in GitHub Desktop.
Module 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment