zoomable turkey

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

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>

Modified http://d3js.org/topojson.v2.min.js to a secure url

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

https://d3js.org/topojson.v2.min.js