D3 Examples - Poland

xxxxxxxxxx
 
<!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>
    