Bagaimana cara membuat koordinat lintang-bujur pada peta dengan D3?

16

Saya mencoba untuk meng-overlay titik-titik set koordinat lintang-bujur yang sewenang-wenang di atas peta Amerika Serikat.

Sejauh ini saya telah menemukan contoh kartografi D3 , tetapi ketika saya mencoba menempatkan titik pada koordinat X, Y pixel, mereka tampak jauh dari kanvas. Saya memang menemukan catatan kuliah workshot yang mencakup sistem koordinat di d3 , tapi saya masih tidak yakin bagaimana mendapatkan koordinat lat / long muncul di peta.

Inilah yang saya miliki sejauh ini (cukup banyak hanya peta USA)

Nasihat tentang cara membuat karya ini akan sangat dihargai!

cartography latitude-longitude maps d3 Jay Taylor
sumber
d3 apakah svg benar?
Mapperz
Ya, d3 adalah svg.
Jay Taylor
1
Contoh rendering svg yang baik untuk dipetakan ada di sini - github.com/kartograph/kartograph.py/wiki/… menggunakan Path and Measures
Mapperz

Jawaban:

15

Anda harus memiliki fungsi proyeksi () untuk memproyeksikan lat dan panjang poin Anda ke peta. Secara default, jalur geo d3 menggunakan proyeksi albersUsa, sehingga Anda dapat mendeklarasikannya secara eksplisit:

var projection = d3.geo.albersUsa();

Anda akan melihat ini dilakukan dalam contoh yang tidak menggunakan AlbersUsa, dan dengan mendefinisikan proyeksi Anda dapat memodifikasinya. Setelah didefinisikan membuatnya tersedia sebagai fungsi. Dengan cara ini Anda dapat menempatkan poin Anda sebagai lingkaran svg:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

Itu akan membuat lingkaran di sekitar New York yang kasar. Anda kemudian dapat mengikat data yang memiliki atribut "lat" dan "long", dalam hal ini akan terlihat seperti ini:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

Fungsi proyeksi mengambil larik [panjang, lat] dan mengembalikan larik [x, y], yang cocok menjadi sintaks transformasi, translate (), atau Anda bisa membagi array untuk nilai x dan y.

Contoh di bawah ini menempatkan polys, garis, dan titik, dan mengambil titik dari csv dan memproyeksikannya ke peta, tetapi perhatikan bahwa itu mengubah elemen g dan menambahkan lingkaran ke elemen itu (Anda mungkin juga menginginkan label atau aspek lain ke situs, yang semuanya akan ditambahkan ke elemen g yang diproyeksikan):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/

Elia
sumber