andreaderrico2/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Map showing the density of members of italian Parliament per region using d3.js
The density is calculated like [numbers of members of a region / population of the region]
Chart made thanks to Camera dei Deputati Open Data

  
## index.css
svg {
  background: white;
}


.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.region {
  fill: white;
  stroke: black;
  stroke-width: 0.1px;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color:white;
  border: 1px solid black;
  color: black;
  border-radius: 2px;
  position: fixed;
  top: 20px;
  left: 100px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Density of Members of Italian Parliament per region (on map)</title>
    <meta name="description" content="Density of Members of Italian Parliament per region (on map)" />
    <link type="text/css" href="index.css" rel="stylesheet"/>
      <script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

## index.js
var width = 960,
    height = 500;

var projection = d3.geo.robinson()
    .scale(1800)
    .translate([width / 5, height*3.5])
    .precision(0.1);

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

var graticule = d3.geo.graticule();

var vis = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var svg = vis.append('g');


var zoom = d3.behavior.zoom()
    .scaleExtent([1, 30])
    .on("zoom", zoomHandler);

function zoomHandler() {
  svg.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
}

vis.call(zoom);

svg.append("text")
  .attr("x", (960 / 2))
  .attr("y", (15))
  .attr("text-anchor", "middle")
  .style("font-size", "16px")
  .style("text-decoration", "underline")
  .text("Density of Members of Italian Parliament per region (on map)");

var color = d3.scale.quantize()
  .domain([7,14])
  .range(["#ffffbf","#d9ef8b","#91cf60","#1a9850"]);

var data = {"VALLE D'AOSTA":0, "PIEMONTE":0, "LOMBARDIA":0, "TRENTINO ALTO-ADIGE":0, "FRIULI-VENEZIA-GIULIA":0, "VENETO":0,"EMILIA-ROMAGNA":0, "LIGURIA":0, "TOSCANA":0, "MARCHE":0, "UMBRIA":0, "LAZIO":0, "CAMPANIA":0, "ABRUZZO":0, "BASILICATA":0, "PUGLIA":0, "MOLISE":0, "CALABRIA":0, "SICILIA":0, "SARDEGNA":0};

var states = {};
var population = {};

d3.json("http://wafi.iit.cnr.it/webvis/tmp/dati_camera/basic_anagrafica.json", function(error, json) {
  if (error) return console.warn(error);
  json.results.deputati.forEach( function(d){
    if (d.regione) {
      data[d.regione.value] = data[d.regione.value] + 1;
    }
  });
  d3.json("http://wafi.iit.cnr.it/webvis/tmp/dati_camera/regioni_population.json", function(error, pop) {
   if (error) return console.warn(error);
   pop.forEach( function(p){
     population[p.Region] = p.Population;
   });
   d3.json("http://wafi.iit.cnr.it/webvis/tmp/dati_camera/regioni.topo.json", function(error, world) {

     var tip = d3.tip()
       .attr('class', 'd3-tip')
       .offset([0, 0])
       .html(function(d) {
         return(d.properties.NOME_REG+':'+d3.format(".3f")(data[d.properties.NOME_REG]/population[d.properties.NOME_REG]*100)+'%');

       }) ;
     vis.call(tip);

     var regions = topojson.feature(world, world.objects.reg2011).features;
     topo = regions;

     var region = svg.selectAll(".region").data(topo);
     region.enter().insert("path")
       .attr("class", "region")
       .attr("d", path)
       .style("fill", function(d){ return color(data[d.properties.NOME_REG]/population[d.properties.NOME_REG]*100000);})
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide);
    });
  });
});

## thumbnail.png

      
    Raw
  

              thumbnail.png
	svg {
	background: white;
	}



	.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 3px;
	}

	.fill {
	fill: #fff;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.land {
	fill: #222;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.region {
	fill: white;
	stroke: black;
	stroke-width: 0.1px;
	}

	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 5px;
	background-color:white;
	border: 1px solid black;
	color: black;
	border-radius: 2px;
	position: fixed;
	top: 20px;
	left: 100px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Density of Members of Italian Parliament per region (on map)</title>
	<meta name="description" content="Density of Members of Italian Parliament per region (on map)" />
	<link type="text/css" href="index.css" rel="stylesheet"/>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

	</head>
	<body>
	<script src="index.js"></script>
	</body>
	</html>
	var width = 960,
	height = 500;

	var projection = d3.geo.robinson()
	.scale(1800)
	.translate([width / 5, height*3.5])
	.precision(0.1);

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

	var graticule = d3.geo.graticule();

	var vis = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var svg = vis.append('g');


	var zoom = d3.behavior.zoom()
	.scaleExtent([1, 30])
	.on("zoom", zoomHandler);

	function zoomHandler() {
	svg.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
	}

	vis.call(zoom);

	svg.append("text")
	.attr("x", (960 / 2))
	.attr("y", (15))
	.attr("text-anchor", "middle")
	.style("font-size", "16px")
	.style("text-decoration", "underline")
	.text("Density of Members of Italian Parliament per region (on map)");

	var color = d3.scale.quantize()
	.domain([7,14])
	.range(["#ffffbf","#d9ef8b","#91cf60","#1a9850"]);

	var data = {"VALLE D'AOSTA":0, "PIEMONTE":0, "LOMBARDIA":0, "TRENTINO ALTO-ADIGE":0, "FRIULI-VENEZIA-GIULIA":0, "VENETO":0,"EMILIA-ROMAGNA":0, "LIGURIA":0, "TOSCANA":0, "MARCHE":0, "UMBRIA":0, "LAZIO":0, "CAMPANIA":0, "ABRUZZO":0, "BASILICATA":0, "PUGLIA":0, "MOLISE":0, "CALABRIA":0, "SICILIA":0, "SARDEGNA":0};

	var states = {};
	var population = {};

	d3.json("http://wafi.iit.cnr.it/webvis/tmp/dati_camera/basic_anagrafica.json", function(error, json) {
	if (error) return console.warn(error);
	json.results.deputati.forEach( function(d){
	if (d.regione) {
	data[d.regione.value] = data[d.regione.value] + 1;
	}
	});
	d3.json("http://wafi.iit.cnr.it/webvis/tmp/dati_camera/regioni_population.json", function(error, pop) {
	if (error) return console.warn(error);
	pop.forEach( function(p){
	population[p.Region] = p.Population;
	});
	d3.json("http://wafi.iit.cnr.it/webvis/tmp/dati_camera/regioni.topo.json", function(error, world) {

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([0, 0])
	.html(function(d) {
	return(d.properties.NOME_REG+':'+d3.format(".3f")(data[d.properties.NOME_REG]/population[d.properties.NOME_REG]*100)+'%');

	}) ;
	vis.call(tip);

	var regions = topojson.feature(world, world.objects.reg2011).features;
	topo = regions;

	var region = svg.selectAll(".region").data(topo);
	region.enter().insert("path")
	.attr("class", "region")
	.attr("d", path)
	.style("fill", function(d){ return color(data[d.properties.NOME_REG]/population[d.properties.NOME_REG]*100000);})
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);
	});
	});
	});