zoomable turkey

forked from ozanyusufoglu's block: 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;
  }
  #cities {
    fill: #ccc;
  }
  #cities .active {
    display:none;
  }

#city-borders {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
  .town-boundary {
    fill: #ccc;
    stroke: #fff;
    stroke-width: .2px;
  }
  .town-boundary:hover, .city:hover {
    fill: orange;
  }
  </style>

</head>
<body>
     <script>
    var width = 960;
    var height = 700;
    var centered;
    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);

var color = d3.scaleQuantile()
      .range(['rgba(247,251,255,0.8)', 'rgb(222,235,247)', 'rgb(198,219,239)', 'rgb(158,202,225)', 'rgb(107,174,214)', 'rgb(66,146,198)', 'rgb(33,113,181)', 'rgb(8,81,156)', 'rgb(8,48,107)']);

d3.queue(3)
      .defer(d3.json, 'tr_quantized_topo.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)

console.log(cities);
      console.log(towns);

color.domain([

d3.min(data, function(d) {
          return d.population;
        }),
        d3.max(data, function(d) {
          return d.population;
        })
      ]);

projection.fitExtent([
        [0, 0],
        [width, height]
      ], cities);

cities.features.forEach(function(city, i) {

city.properties.population = data[i].population

})

g.append('g')
        .attr('id', 'towns')
        .selectAll("path")
        .data(towns.features)
        .enter()
        .append('path')
        .attr('d', path)
        .attr('class', 'town-boundary')
      /*    .style('stroke', 'white')
          .style('stroke-width', '0.1')
      */

g.append('g')
        .attr('id', 'cities')
        .selectAll("path")
        .data(cities.features)
        .enter()
        .append('path')
        .attr('d', path)
        .attr('class', 'city')

/*    .style('stroke', 'white')
          .style("fill", function(d) {
            var value = d.properties.population;
            if (value) {
              return color(value);
            } else {
              return "#ccc";
            }
          })
    */
        .on("click", clicked)

g.append("path")
        .datum(topojson.mesh(tr, tr.objects.cities, function(a, b) {
          return a !== b;
        }))
        .attr("id", "city-borders")
        .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