D3 Examples - Italian Environmental Expense ~ D3 Choropleth

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spesa tutela ambiente</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="https://d3js.org/topojson.v0.min.js"></script>
<!-- <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script> -->
</head>
<style>
 
path {
stroke:white;
stroke-width: 1px;
}
 
body {
font-family: Arial, sans-serif;
}
 
.city {
font: 10px sans-serif;
font-weight: bold;
}
 
.legend {
font-size: 12px;
}
 
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
height: 25px;
padding: 2px;
font-size: 10px;
background: #636363;
border: 1px;
border-radius: 8px;
pointer-events: none;
color: #fff;
}
</style>
<body>
​
<script type="text/javascript">
var width = 960,
height = 550;
 
​
 
var color_domain = [35, 50, 75, 100, 200]
var ext_color_domain = [0, 35, 50, 75, 100, 200]
var legend_labels = ["Fino a 35", "35 - 50", "50 - 75", "75 - 100", "100 - 200", "200 e oltre"]
var color = d3.scale.threshold()
.domain(color_domain)
.range(["#edf8e9", "#c7e9c0", "#a1d99b", "#74c476", "#31a354", "#006d2c"]);
 
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
 
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("margin", "10px auto");
 
var projection = d3.geo.mercator()
    .scale(2000)
    .center([12.368775000000001, 42.9451139])
​
 
var path = d3.geo.path().projection(projection);
 
​
queue()
.defer(d3.json, "ita.json")
.defer(d3.csv, "EnvironmentExpense.csv")
.await(ready);
 
​
 
function ready(error, map, data) {
var rateById = {};
var nameById = {};
 
data.forEach(function(d) {
​
rateById[d.RegionCode] = +d.Expense;
nameById[d.RegionCode] = d.RegionName;
});
 
​
 
svg.append("g")
.attr("class", "region")
.selectAll("path")
​
.data(topojson.object(map, map.objects.reg2011).geometries)
​
.enter().append("path")
.attr("d", path)
.style("fill", function(d) {
return color(rateById[d.properties.COD_REG]);
})
.style("opacity", 0.8)
 
​
.on("mouseover", function(d) {
d3.select(this).transition().duration(300).style("opacity", 1);
div.transition().duration(300)
.style("opacity", 1)
div.text(nameById[d.properties.COD_REG] + " : " + rateById[d.properties.COD_REG] + " euro procapite")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY -30) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition().duration(300)
.style("opacity", 0.8);
div.transition().duration(300)
.style("opacity", 0);
})
​
d3.tsv("cities.tsv", function(error, data) {
var city = svg.selectAll("g.city")
.data(data)
.enter()
.append("g")
.attr("class", "city")
.attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; });
 
city.append("circle")
.attr("r", 3)
​
.style("fill", "lime")
.style("opacity", 0.75);
 
city.append("text")
.attr("x", 5)
.text(function(d) { return d.City; });
});
}; 
 
var legend = svg.selectAll("g.legend")
.data(ext_color_domain)
.enter().append("g")
.attr("class", "legend");
 
var ls_w = 20, ls_h = 20;
 
legend.append("rect")
.attr("x", 20)
.attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function(d, i) { return color(d); })
.style("opacity", 0.8);
 
legend.append("text")
.attr("x", 50)
.attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
.text(function(d, i){ return legend_labels[i]; });
 
</script>
</body>
</html>
    