rveciana - crime-rate-in-europe-by-eurostat-nuts-regions

Crime rate in Europe 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 criminality data has been represented. Since the data gives absolute values for regions that have different sizes and populations, the map represents the number of crimes for every 100000 inhabitants. The values from the scale go from 0 (dark blue) to 5 (bright red).

<!DOCTYPE html>
<meta charset="utf-8">
<title>Crimes recorded by the police - 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>Crimes recorded by the police - 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,5]
var color = d3.scale.linear().domain(domain).range(['blue', 'red']);

d3.csv("crim_gen_reg_1_Data.csv", function(stats) {
  data = {};
  stats.forEach(function(d) {
    if (d.TIME == 2010){
      data[d.GEO] = d.Value;
    }
  });

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(100000*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 crimes = "No Data";
           } else {
            var crimes = data[d.properties.NUTS_ID];
           }
           return "<b>" + d.properties.NAME + "</b>"
                  + "<br/> pop: " + d.properties.POPULATION 
                  + "<br/> crimes: " + crimes;
      }
    svg.call(legend({width:300, posx: 100, posy:400, elements: 6, domain: domain, title:"Number of crimes / 100 000 inhabitants"}));
});
});
</script>


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