rveciana · December 25, 2015 09:29
diff --git a/README.md b/README.md
diff --git a/crim_gen_reg_1_Data.csv b/crim_gen_reg_1_Data.csv
diff --git a/index.html b/index.html
 <!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>
diff --git a/legend.js b/legend.js
 var legend = function(accessor){
    return function(selection){
      
      //Draw the legend for the map
      var legend = selection.append("g");
      var legendText = accessor.title;
      var numSquares = accessor.elements;
      var xLegend = 0;
      var yLegend = 0;
      var widthLegend = 400;
      
      var title_g = legend.append("g");
      var values_g = legend.append("g");
      
      var legendTitle = title_g.append("text")
        .text("Legend")
        .attr("font-family", "sans-serif")
        .attr("font-size", "18px")
        .attr("fill", "black");
        var bbox = legendTitle.node().getBBox();
        legendTitle.attr("x", xLegend + widthLegend/2 - bbox.width/2);
        legendTitle.attr("y", yLegend + 20);
        
      var legendTextEl = title_g.append("text")
        .text(legendText)
        .attr("y", yLegend + 75)
        .attr("font-family", "sans-serif")
        .attr("font-size", "14px")
        .attr("fill", "black");
      var bbox = legendTextEl.node().getBBox();
      legendTextEl.attr("x", xLegend + widthLegend/2 - bbox.width/2);

      for (i=0; i<numSquares; i++){
        values_g.append("rect")
          .attr("x", xLegend + (i+0.1*i/numSquares)*(widthLegend/numSquares))
          .attr("y", yLegend + 25)
          .attr("width", (widthLegend/numSquares)*0.9)
          .attr("height", 20)
          .attr("fill", color(accessor.domain[0] + i * accessor.domain[1]/(numSquares-1)));
        var value_text = values_g.append("text")
          .text(accessor.domain[0] + i * accessor.domain[1]/(numSquares-1))
          .attr("y", yLegend + 55)
          .attr("font-family", "sans-serif")
          .attr("font-size", "12px")
          .attr("fill", "black");
        var bbox = value_text.node().getBBox();
        value_text
          .attr("x", xLegend + (i+0.1*i/numSquares)*(widthLegend/numSquares) + (widthLegend/numSquares)*(0.9/2)- bbox.width/2);

      }
      var scale = accessor.width / 400;
      legend.attr("transform","translate("+accessor.posx+","+accessor.posy+") scale("+scale+") ");

 };
 };
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/tooltip.js b/tooltip.js
 d3.helper = {};

 d3.helper.tooltip = function(accessor){
    return function(selection){
        var tooltipDiv;
        var bodyNode = d3.select('body').node();
        selection.on("mouseover", function(d, i){
            // Clean up lost tooltips
            d3.select('body').selectAll('div.tooltip').remove();
            // Append tooltip
            tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip');
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
                .style('top', (absoluteMousePos[1] - 15)+'px')
                .style('position', 'absolute') 
                .style('z-index', 1001);
            // Add text using the accessor function
            var tooltipText = accessor(d, i) || '';
            // Crop text arbitrarily
            //tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;})
            //    .html(tooltipText);
        })
        .on('mousemove', function(d, i) {
            // Move tooltip
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
                .style('top', (absoluteMousePos[1] - 15)+'px');
            var tooltipText = accessor(d, i) || '';
            tooltipDiv.html(tooltipText);
        })
        .on("mouseout", function(d, i){
            // Remove tooltip
            tooltipDiv.remove();
        });

    };
 };
	<!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>
	var legend = function(accessor){
	return function(selection){

	//Draw the legend for the map
	var legend = selection.append("g");
	var legendText = accessor.title;
	var numSquares = accessor.elements;
	var xLegend = 0;
	var yLegend = 0;
	var widthLegend = 400;

	var title_g = legend.append("g");
	var values_g = legend.append("g");

	var legendTitle = title_g.append("text")
	.text("Legend")
	.attr("font-family", "sans-serif")
	.attr("font-size", "18px")
	.attr("fill", "black");
	var bbox = legendTitle.node().getBBox();
	legendTitle.attr("x", xLegend + widthLegend/2 - bbox.width/2);
	legendTitle.attr("y", yLegend + 20);

	var legendTextEl = title_g.append("text")
	.text(legendText)
	.attr("y", yLegend + 75)
	.attr("font-family", "sans-serif")
	.attr("font-size", "14px")
	.attr("fill", "black");
	var bbox = legendTextEl.node().getBBox();
	legendTextEl.attr("x", xLegend + widthLegend/2 - bbox.width/2);

	for (i=0; i<numSquares; i++){
	values_g.append("rect")
	.attr("x", xLegend + (i+0.1i/numSquares)(widthLegend/numSquares))
	.attr("y", yLegend + 25)
	.attr("width", (widthLegend/numSquares)*0.9)
	.attr("height", 20)
	.attr("fill", color(accessor.domain[0] + i * accessor.domain[1]/(numSquares-1)));
	var value_text = values_g.append("text")
	.text(accessor.domain[0] + i * accessor.domain[1]/(numSquares-1))
	.attr("y", yLegend + 55)
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.attr("fill", "black");
	var bbox = value_text.node().getBBox();
	value_text
	.attr("x", xLegend + (i+0.1i/numSquares)(widthLegend/numSquares) + (widthLegend/numSquares)*(0.9/2)- bbox.width/2);

	}
	var scale = accessor.width / 400;
	legend.attr("transform","translate("+accessor.posx+","+accessor.posy+") scale("+scale+") ");

	};
	};
	d3.helper = {};

	d3.helper.tooltip = function(accessor){
	return function(selection){
	var tooltipDiv;
	var bodyNode = d3.select('body').node();
	selection.on("mouseover", function(d, i){
	// Clean up lost tooltips
	d3.select('body').selectAll('div.tooltip').remove();
	// Append tooltip
	tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip');
	var absoluteMousePos = d3.mouse(bodyNode);
	tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
	.style('top', (absoluteMousePos[1] - 15)+'px')
	.style('position', 'absolute')
	.style('z-index', 1001);
	// Add text using the accessor function
	var tooltipText = accessor(d, i) \|\| '';
	// Crop text arbitrarily
	//tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;})
	// .html(tooltipText);
	})
	.on('mousemove', function(d, i) {
	// Move tooltip
	var absoluteMousePos = d3.mouse(bodyNode);
	tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
	.style('top', (absoluteMousePos[1] - 15)+'px');
	var tooltipText = accessor(d, i) \|\| '';
	tooltipDiv.html(tooltipText);
	})
	.on("mouseout", function(d, i){
	// Remove tooltip
	tooltipDiv.remove();
	});

	};
	};