Harita verisi : http://www.turkeyshapefile.com
SHP to TopoJSON dönüştürücü : http://www.mapshaper.org
Harita verisi : http://www.turkeyshapefile.com
SHP to TopoJSON dönüştürücü : http://www.mapshaper.org
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
text { | |
font-family: helvetica, arial, sans-serif; | |
font-size: 10px; | |
text-anchor: middle; | |
color: #111; | |
} | |
</style> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var svg = d3.select("svg") | |
var sw = +svg.attr("width") | |
var sh = +svg.attr("height") | |
var projection = d3.geo.mercator() | |
.scale(2800) | |
.center([35.243,39.026]) | |
.translate([sw/2,sh/2]) | |
var path = d3.geo.path() | |
.projection(projection) | |
d3.json("turkiye.json", function(error, turkiye) { | |
if (error) return console.error(error) | |
iller = topojson.feature(turkiye, turkiye.objects.il) | |
svg.append("path") | |
.datum(iller) | |
.attr("d", path) | |
.style("stroke", "#111") | |
.style("stroke-width", "4px") | |
.style("stroke-linejoin", "round") | |
svg.selectAll(".il") | |
.data(iller.features) | |
.enter() | |
.append("path") | |
.attr("fill", function(d) {return d3.hsl(198+Math.random()*4, 0.7+Math.random()*0.2, 0.4+Math.random()*0.2)}) | |
.attr("d", path) | |
svg.append("path") | |
.datum(topojson.mesh(turkiye, turkiye.objects.il, function(a, b) { return a !== b })) | |
.attr("d", path) | |
.attr("fill", "none") | |
.style("stroke", "#FFF") | |
.style("stroke-width", "2px") | |
.style("stroke-linejoin", "round") | |
svg.selectAll("text") | |
.data(iller.features) | |
.enter() | |
.append("text") | |
.text(function(d) { return d.properties.ad }) | |
.attr("transform", function(d) { return "translate("+ path.centroid(d).toString() +")" }) | |
}) | |
</script> |