D3.js - Coğrafyalar
Jeo-uzamsal koordinatlar genellikle hava durumu veya nüfus verileri için kullanılır. D3.js, coğrafi veriler için bize üç araç sağlar -
Paths - Nihai pikselleri üretirler.
Projections - Küre koordinatlarını Kartezyen koordinatlara çevirirler ve
Streams - İşleri hızlandırırlar.
D3.js'deki coğrafyaların ne olduğunu öğrenmeden önce, aşağıdaki iki terimi anlamalıyız -
- D3 Coğrafi Yol ve
- Projections
Bu iki terimi ayrıntılı olarak tartışalım.
D3 Coğrafi Yol
Coğrafi bir yol oluşturucudur. GeoJSON, SVG yolu veri dizesi oluşturur veya bir Canvas yolunu oluşturur. Performansı artırmak için dinamik veya etkileşimli projeksiyonlar için bir Canvas önerilir. Bir D3 Geo Path Data Generator oluşturmak için aşağıdaki işlevi çağırabilirsiniz.
d3.geo.path()Burada d3.geo.path() yol üreteci işlevi, Geo Koordinatlardan Kartezyen Koordinatlara çeviri için hangi Harita Projeksiyonunu kullanmak istediğimizi seçmemizi sağlar.
Örneğin Hindistan'ın harita detaylarını göstermek istersek aşağıda gösterildiği gibi bir yol tanımlayabiliriz.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Projeksiyonlar
Projeksiyonlar küresel çokgen geometriyi düzlemsel çokgen geometriye dönüştürür. D3, aşağıdaki projeksiyon uygulamalarını sağlar.
Azimuthal - Azimuthal projeksiyonları küreyi doğrudan bir düzleme yansıtır.
Composite - Kompozit, tek bir ekranda oluşturulmuş birkaç projeksiyondan oluşur.
Conic - Küreyi bir koninin üzerine yansıtır ve ardından koniyi düzlemde açın.
Cylindrical - Silindirik çıkıntılar küreyi içeren bir silindire yansıtır ve ardından silindiri düzleme açar.
Yeni bir projeksiyon oluşturmak için aşağıdaki işlevi kullanabilirsiniz.
d3.geoProjection(project)Belirtilen ham projeksiyon projesinden yeni bir projeksiyon oluşturur. Proje işlevi, belirli bir noktanın enlem ve boylamını radyan cinsinden alır. Kodunuza aşağıdaki projeksiyonu uygulayabilirsiniz.
var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
.scale(100)
.rotate([100,0,0])
.translate([width/2, height/2])
.clipAngle(45);Burada yukarıdaki projeksiyonlardan herhangi birini uygulayabiliriz. Bu projeksiyonların her birini kısaca tartışalım.
d3.geo.orthographic()- Ortografik izdüşüm, tek bir yarım küreyi görüntülemek için uygun bir azimut projeksiyondur; perspektif noktası sonsuzdur.
d3.geo.gnomonic() - Gnomonik projeksiyon, büyük çemberleri düz çizgiler olarak yansıtan azimut bir projeksiyondur.
d3.geo.equirectangular()- Eş dikdörtgen, mümkün olan en basit coğrafi projeksiyondur. Kimlik işlevi. Ne eşit alanlı ne de uyumludur, ancak bazen tarama verileri için kullanılır.
d3.geo.mercator() - Küresel Mercator projeksiyonu, döşemeli haritalama kitaplıkları tarafından yaygın olarak kullanılır.
d3.geo.transverseMercator() - Enine Merkatör projeksiyonu.
Çalışma Örneği
Bu örnekte Hindistan'ın haritasını oluşturalım. Bunu yapmak için aşağıdaki adımlara uymalıyız.
Step 1 - Apply styles - Aşağıdaki kodu kullanarak haritaya stiller ekleyelim.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Burada, durum TN, AP ve MP için belirli renkler uyguladık.
Step 2 - Include topojson script - TopoJSON, aşağıda tanımlanan, topolojiyi kodlayan bir GeoJSON uzantısıdır.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Bu betiği kodlamamıza dahil edebiliriz.
Step 3 - Define variables - Aşağıdaki kodu kullanarak komut dosyanıza değişkenler ekleyin.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Burada SVG genişliği 600 ve yüksekliği 400. Ekran iki boyutlu bir uzay ve üç boyutlu bir obje sunmaya çalışıyoruz. Böylece, arazi boyutunu / şeklini ciddi şekilde bozabiliriz.d3.geo.mercator() işlevi.
Merkez belirtilir [78, 22], bu, projeksiyonun merkezini, derece cinsinden iki öğeli boylam ve enlem dizisi olarak belirtilen konuma ayarlar ve izdüşümü döndürür.
Burada harita 78 derece Batı ve 22 derece Kuzey üzerinde ortalandı.
Ölçek 680 olarak belirtilir, bu projeksiyonun ölçek faktörünü belirtilen değere ayarlar. Ölçek belirtilmezse, varsayılan olarak 150 olan mevcut ölçek faktörünü döndürür. Ölçek faktörlerinin projeksiyonlar arasında tutarlı olmadığına dikkat etmek önemlidir.
Step 4 - Append SVG - Şimdi, SVG özniteliklerini ekleyin.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - Create path - Aşağıdaki kod bölümü yeni bir coğrafi yol oluşturucu oluşturur.
var path = d3.geo.path()
.projection(projection);Burada, yol üreteci (d3.geo.path ()), daha önce değişken projeksiyonu kullanan bir Mercator projeksiyonu olarak tanımlanan bir projeksiyon türünü (.projection) belirtmek için kullanılır.
Step 6 - Generate data - indiatopo.json - Bu dosya, aşağıdaki ekten kolayca indirebileceğimiz çok sayıda kayıt içeriyor.
İndir indiatopo.json file
Dosya indirildikten sonra D3 lokasyonumuza ekleyebiliriz. Örnek format aşağıda gösterilmiştir.
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................Step 7 - Draw map - Şimdi, verileri indiatopo.json dosyalayın ve haritayı çizin.
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});Burada, Hindistan haritasının (indiatopo.json) koordinatlarıyla birlikte TopoJSON dosyasını yükleyeceğiz. Ardından grafikteki tüm yol öğelerine göre hareket edeceğimizi beyan ederiz. G.selectAll ("yol") olarak tanımlanır. Daha sonra ülkeleri tanımlayan verileri TopoJSON dosyasından alacağız.
.data(topojson.object(topology, topology.objects.states)
.geometries)Son olarak, bunu kullanarak görüntüleyeceğimiz verilere ekleyeceğiz. .enter() yöntemi ve sonra bu verileri kullanarak yol öğeleri olarak ekliyoruz. .append(“path”) yöntem.