Jak renderować współrzędne szerokości i długości geograficznej na mapie za pomocą D3?

16

Próbuję nałożyć kropki dowolnych zestawów współrzędnych długości i szerokości geograficznej na mapę Stanów Zjednoczonych.

Do tej pory znalazłem przykład kartografii D3 , ale kiedy próbuję umieścić kropki na współrzędnych pikselowych X, Y, pojawiają się one z dala od obszaru roboczego. I znaleźliśmy notatki wykładowe workshot które obejmują systemy d3 koordynować , ale nadal jestem pewny jak get lat / long koordy, aby pokazać się na mapie.

To, co do tej pory mam (właściwie tylko mapa USA)

Będziemy wdzięczni za poradę, jak to zrobić.

cartography latitude-longitude maps d3 Jay Taylor
źródło
d3 czy svg jest poprawny?
Mapperz
Tak, d3 to svg.
Jay Taylor
1
Dobry przykład renderowania svg na mapę jest tutaj - github.com/kartograph/kartograph.py/wiki/… przy użyciu Path and Measures
Mapperz

Odpowiedzi:

16

Musisz mieć funkcję projection (), aby rzutować długość i długość swoich punktów na mapę. Domyślnie ścieżka geograficzna d3 korzysta z projekcji albersUsa, dzięki czemu można ją wyraźnie zadeklarować:

var projection = d3.geo.albersUsa();

Zobaczysz to zrobione w przykładach, które nie używają AlbersUsa, a definiując projekcję, możesz ją zmodyfikować. Po zdefiniowaniu udostępnia go jako funkcję. W ten sposób możesz umieścić swoje punkty jako okręgi SVG:

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

To powinno upuścić koło na nierównym sąsiedztwie Nowego Jorku. Następnie możesz powiązać dane, które miały atrybuty „lat” i „long”, w takim przypadku wyglądałoby to tak:

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

Funkcja projekcji przyjmuje tablicę [long, lat] i zwraca tablicę [x, y], która dobrze pasuje do transformacji, translacji () lub możesz podzielić tablicę na wartości x i y.

Poniższy przykład umieszcza bieguny, linie i punkty oraz pobiera punkty z pliku csv i rzutuje je na mapę, ale zauważ, że przekształca element g i dołącza okrąg do tego elementu (możesz także chcieć etykiety lub innych aspektów do witryny, z których wszystkie byłyby dołączone do tego rzutowanego elementu g):

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

Eliasz
źródło