rveciana - touristic-establishments-by-eurostat-nuts-regions

Touristic establishments by EUROSTAT NUTS regions

Open raw page in new tab

This example belongs to the GeoExamples blog http://geoexamples.blogspot.com/2013/10/using-eurostats-data-with-d3js.html

The NUTS classification (Nomenclature of territorial units for statistics) is a hierarchical system for dividing up the economic territory of the EU. Many of the EUROSTAT data is relative to these regions, and this data is a good candidate to be mapped.

The problem is that EUROSTAT provides some shapefiles in one hand, but without the actual names for the regions, nor other information, and some tables with the name and population for every region. This data has to be joined to be able to map properly.

In this example, the number of establishments, bedrooms and bed-places data has been represented. Since the data gives absolute values for regions that have different sizes and populations, the map represents the number of establishments for every 10000 inhabitants. The values from the scale go from 0 (dark blue) to 30 (bright red).

<!DOCTYPE html>
<meta charset="utf-8">
<title>Number of establishments, bedrooms and bed-places - NUTS 3 regions</title>
<style>

.background {
  fill: #fff;
  stroke: #ccc;
}

.tooltip{ background-color:rgba(200,200,200,0.5);;
          margin: 10px;
          height: 90px;
          width: 150px;
          padding-left: 10px; 
          padding-top: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
        }
</style>
<body>
<h2>Number of establishments, bedrooms and bed-places - NUTS 3 regions</h2>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript" src="./tooltip.js"></script>
<script type="text/javascript" src="./legend.js"></script>
<script>
var width = 600,  
    height = 600;  
  
var projection = d3.geo.stereographic()  
    .center([3.9,43.0])  
    .scale(1000)  
    .translate([width / 4 , height / 2]); 

var path = d3.geo.path()  
    .projection(projection);

var svg = d3.select("#map").append("svg")
    .attr("width", 960)
    .attr("height", 500);

var domain = [0,30]
var color = d3.scale.linear().domain(domain).range(['blue', 'red']);

d3.csv("tour_cap_nuts3_1_Data.csv", function(stats) {
  data = {};
  stats.forEach(function(d) {
    if (d.TIME == 2010){
      data[d.GEO] = d.Value.replace(",",""); //Thousands is a comma!
    }
  });

d3.json("/rveciana/raw/5919944/regions.json", function(error, europe) {
	svg.selectAll(".region")
	.data(topojson.feature(europe, europe.objects.regions).features)
  .enter()
    .append("path")
    .filter(function(d) { return !isNaN(parseFloat(data[d.properties.NUTS_ID])); }) 
      .attr("class", "region")
      .attr("d", path)
      .style("stroke", "#999")
      .style("stroke-width", 0.2)
      .style("fill", function(d) {
        if (!isNaN(parseFloat(data[d.properties.NUTS_ID])))

          return color(10000*data[d.properties.NUTS_ID]/d.properties.POPULATION);
        else
          return "#999";
      })
      .style("opacity", function(d){
        if (!isNaN(parseFloat(data[d.properties.NUTS_ID])))
          return 1;
        else
          return 0;
      })
      
      .call(d3.helper.tooltip(function(d, i){return tooltipText(d);}));


    function tooltipText(d){
           if (isNaN(parseFloat(data[d.properties.NUTS_ID]))) {
            var beds = "No Data";
           } else {
            var beds = data[d.properties.NUTS_ID];
           }
           return "<b>" + d.properties.NAME + "</b>"
                  + "<br/> pop: " + d.properties.POPULATION 
                  + "<br/> beds: " + beds;
      }
    svg.call(legend({width:300, posx: 100, posy:400, elements: 16, domain: domain, title:"Number of establishments / 10000 inhabitants"}));
});
});
</script>


<footer>Source: <a href="http://epp.eurostat.ec.europa.eu/portal/page/portal/crime/data/database">eurostat</a></footer>