Poland

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scaled 3</title>
		<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style>
            
    body {
  background: #333738;
}
            
background {
  fill: none;
  pointer-events: all;
}            
PolenReg2 {
  cursor: pointer;
}
            
    path {
  stroke: #000;
  stroke-width: 1px;
}
            
   path:hover {
  fill: #386cb0;
}  
            
.Kreisdiagramm {
  fill: brown;
  fill-opacity: .5;
  stroke: #fff;
  stroke-width: .5px;
}

.Kreisdiagramm :hover {
  stroke: #000;
}            
            
.PolenReg2 :hover {
  fill: #386cb0;
}
.tooltip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  padding: 5px;
}
            
		</style>
	</head>
	<body>
		<script type="text/javascript">
//Width and height
var w = 1300;
var h = 1000;

//Define map projection
var projection = d3.geo.mercator()
  .center([20, 54])
  .scale(25000)
  .rotate([0, 0]);

//Define path generator
var path = d3.geo.path()
  .projection(projection);

var color = d3.scale.quantize().range(["#f7f7f7", "#cccccc", "#969696", "#636363", "#252525"]);
//Colors taken from colorbrewer.js, included in the D3 download

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var tooltip = d3.select("body").append("div").attr("class", "tooltip");

//Load in Cloropeth Data
d3.csv("Jugendarbeitslosigkeit.csv", function(data) {

//Set input domain for color scale
  color.domain([
    d3.min(data, function(d) {
      return d.Jugendarb2000;
    }),
    d3.max(data, function(d) {
      return d.Jugendarb2000;
    })
  ]);

//Load in GeoJSON data
  d3.json("PolenReg2.json", function(json) {

//Merge the ag. data and GeoJSON
    //Loop through once for each ag. data value
    for (var i = 0; i < data.length; i++) {

//Grab state name
      var dataRegion = data[i].region;

//Grab data value, and convert from string to float
      var dataValue = parseFloat(data[i].Jugendarb2000);

//Find the corresponding state inside the GeoJSON
      for (var j = 0; j < json.features.length; j++) {

var jsonRegion = json.features[j].properties.name_alt;

if (dataRegion == jsonRegion) {

//Copy the data value into the JSON
          json.features[j].properties.value = dataValue;

//Stop looking through the JSON
          break;

}
      }
    }

//Bind data and create one path per GeoJSON feature
    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .on("mouseover", function(d) {
        tooltip.html(d.properties.name_alt);
      })
      .on("mouseout", function(d) {
        tooltip.html("");
      })

.style("fill", function(d) {
      //Get data value
      var value = d.properties.value;

if (value) {
        //If value exists…
        return color(value);
      } else {
        //If value is undefined…
        return "#ccc";
      }
    });

//Big pie: Gesamtbevölkerung
    d3.csv("Bevoelkerung-Altersstruktur-2010-Summe.csv", function drawPies(data) {

var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) {
          return +d
        });

var arc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius (40);

var pies = svg.selectAll('.pie')
        .data(data)
        .enter()
        .append('g')
        .attr('class', 'pie')
        .attr("transform", function(d) {
          return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1] + ")";
        });

var color = d3.scale.ordinal()
        .range(["#98abc5", "#7b6888", "#a05d56", "#d0743c", ])
        .domain(d3.range(0, 4));

pies.selectAll('.slice')
        .data(function(d) {
          return pie([d.Kinder, d.Jugendliche, d.Erwachsene, d.Rentner]);
        })
        .enter()
        .append('path')
        .attr('d', arc)
        .style('fill', function(d, i) {
          return color(i);
        });
      //Small pie: Auswanderer            
      d3.csv("Bevoelkerung-Altersstruktur-2010-Summe.csv", function drawPies2(data) {

var arc2 = d3.svg.arc().innerRadius(0).outerRadius(20);

var degree = Math.PI / 180;

var pie2 = d3.layout.pie()
          .sort(null)
          .value(function(d) {
            return d
          })
          .startAngle(0 * degree).endAngle(180 * degree);

var pies2 = svg.selectAll('.pie2')
          .data(data)
          .enter()
          .append('g')
          .attr('class', 'pie')
          .attr("transform", function(d) {
            return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1] + ")";
          });

var color2 = d3.scale.ordinal()
          .range(["#3182bd", "#7b4173", "#d62728", "#e6550d", ])
          .domain(d3.range(0, 4));

pies2.selectAll('.slice')
          .data(function(d) {
            return pie2([d.Kinder, d.Jugendliche, d.Erwachsene, d.Rentner]);
          })
          .enter()
          .append('path')
          .attr('d', arc2)
          .style('fill', function(d, i) {
            return color2(i);
          });

});

</script>
	</body>
</html>

https://d3js.org/d3.v3.min.js