Built with blockbuilder.org
forked from ozanyusufoglu's block: zoomable turkey
license: mit |
Built with blockbuilder.org
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="http://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> |
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 |