ozanyusufoglu · December 15, 2017 10:02
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="http://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>
diff --git a/pivot.csv b/pivot.csv
diff --git a/tr_layers_simplified.json b/tr_layers_simplified.json
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="http://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>
	city	population
	Adana-1	2201670.0
	Adıyaman-2	610484.0
	Afyonkarahisar-3	714523.0
	Ağrı-4	542255.0
	Aksaray-68	396673.0
	Amasya-5	326351.0
	Ankara-6	5346518.0
	Antalya-7	2328555.0
	Ardahan-75	98335.0
	Artvin-8	168068.0
	Aydın-9	1068260.0
	Balıkesir-10	1196176.0
	Bartın-74	192389.0
	Batman-72	576899.0
	Bayburt-69	90154.0
	Bilecik-11	218297.0
	Bingöl-12	269560.0
	Bitlis-13	341225.0
	Bolu-14	299896.0
	Burdur-15	261401.0
	Bursa-16	2901396.0
	Çanakkale-17	519793.0
	Çankırı-18	183880.0
	Çorum-19	527863.0
	Denizli-20	1005687.0
	Diyarbakır-21	1673119.0
	Düzce-81	370371.0
	Edirne-22	401701.0
	Elazığ-23	578789.0
	Erzincan-24	226032.0
	Erzurum-25	762021.0
	Eskişehir-26	844842.0
	Gaziantep-27	1974244.0
	Giresun-28	444467.0
	Gümüşhane-29	172034.0
	Hakkari-30	267813.0
	Hatay-31	1555165.0
	Iğdır-76	192785.0
	Isparta-32	427324.0
	İstanbul-34	1.4804116E7
	İzmir-35	4223545.0
	Kahramanmaraş-46	1112634.0
	Karabük-78	242347.0
	Karaman-70	245610.0
	Kars-36	289786.0
	Kastamonu-37	376945.0
	Kayseri-38	1358980.0
	Kilis-79	130825.0
	Kırıkkale-71	277984.0
	Kırklareli-39	351684.0
	Kırşehir-40	229975.0
	Kocaeli-41	1830772.0
	Konya-42	2161303.0
	Kütahya-43	573642.0
	Malatya-44	781305.0
	Manisa-45	1396945.0
	Mardin-47	796237.0
	Mersin-33	1773852.0
	Muğla-48	923773.0
	Muş-49	406501.0
	Nevşehir-50	290895.0
	Niğde-51	351468.0
	Ordu-52	750588.0
	Osmaniye-80	522175.0
	Rize-53	331048.0
	Sakarya-54	976948.0
	Samsun-55	1295927.0
	Şanlıurfa-63	1940627.0
	Siirt-56	322664.0
	Sinop-57	205478.0
	Şırnak-73	483788.0
	Sivas-58	621224.0
	Tekirdağ-59	972875.0
	Tokat-60	602662.0
	Trabzon-61	779379.0
	Tunceli-62	82193.0
	Uşak-64	358736.0
	Van-65	1100190.0
	Yalova-77	241665.0
	Yozgat-66	421041.0
	Zonguldak-67	597524.0