D3 Examples - zoomable turkey

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>"
  <style>
  
  .background {
    fill: none;
    pointer-events: all;
  }
  #city-layer {
    fill: #ccc;
  }
  #city-layer .active {
    display: none;
  }
    
  .cities:hover {
    fill: orange;
  }
  .towns {
  fill: #cdc;
  cursor: pointer;
    }
    
  .cities {
  fill: #cdc;
  cursor: pointer;
    }
  #town-mesh {
  fill:none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width : 0.2;
    } 
    
  #city-mesh{
​
  fill:none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width : 2;
​
    }
    
  </style>
  
   
​
</head>
<body>
​
  <script>
    var width = 960;
    var height = 700;
    var active = d3.select(null);
​
    var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
​
​
    svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height)
      .on("click", clicked);
​
    var g = svg.append('g');
​
    var projection = d3.geoMercator()
​
    var path = d3.geoPath().projection(projection);
​
​
    d3.queue(3)
      .defer(d3.json, 'tr_layers_simplified.json')
      .defer(d3.csv, 'pivot.csv')
      .awaitAll(draw)
​
    function draw(err, results) {
​
      const tr = results[0];
      const data = results[1];
​
​
      var cities = topojson.feature(tr, tr.objects.cities);
      var towns = topojson.feature(tr, tr.objects.towns)
​
​
​
      projection.fitExtent([
        [0, 0],
        [width, height]
      ], cities);
​
      cities.features.forEach(function(city, i) {
​
        city.properties.population = data[i].population
​
      })
​
// towns layer
      g.append('g')
        .attr('id', 'town-layer')
        .selectAll("path")
        .data(towns.features)
        .enter()
        .append('path')
        .attr('d', path)
        .attr('class', 'towns')
             
// city layer
      g.append('g')
        .attr('id', 'city-layer')
        .selectAll("path")
        .data(cities.features)
        .enter()
        .append('path')
        .attr('d', path)
        .attr('class', 'cities')
                .on("click", clicked)
                   
      g.append("path")
        .datum(topojson.mesh(tr, tr.objects.towns, function(a, b) {
          return a !== b;
        }))
        .attr("id", "town-mesh")
        .attr("d", path);
​
      g.append("path")
        .datum(topojson.mesh(tr, tr.objects.cities, function(a, b) {
          return a !== b;
        }))
        .attr("id", "city-mesh")
        .attr("d", path);
    }
​
    function clicked(d) {
      if (active.node() === this) return reset();
      active.classed("active", false);
      active = d3.select(this).classed("active", true);
​
      var bounds = path.bounds(d),
        dx = bounds[1][0] - bounds[0][0],
        dy = bounds[1][1] - bounds[0][1],
        x = (bounds[0][0] + bounds[1][0]) / 2,
        y = (bounds[0][1] + bounds[1][1]) / 2,
        scale = .9 / Math.max(dx / width, dy / height),
        translate = [width / 2 - scale * x, height / 2 - scale * y];
​
      g.transition()
        .duration(750)
        .style("stroke-width", 1.5 / scale + "px")
        .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
    }
​
    function reset() {
      active.classed("active", false);
      active = d3.select(null);
​
      g.transition()
        .duration(750)
        .style("stroke-width", "1.5px")
        .attr("transform", "");
    }
​
  </script>
</body>
​
    