Mapa do perfekcji: używanie D3.js do tworzenia pięknych map internetowych
Opublikowany: 2022-03-11Dokumenty oparte na danych lub D3.js to „biblioteka JavaScript do manipulowania dokumentami na podstawie danych”. Mówiąc prościej, D3.js to biblioteka wizualizacji danych. Został opracowany przez Mike'a Bostocka z myślą o wypełnieniu luki między statycznym wyświetlaniem danych a interaktywnymi i animowanymi wizualizacjami danych.
D3 to potężna biblioteka z mnóstwem zastosowań. W tym samouczku omówię jedno szczególnie atrakcyjne zastosowanie D3: tworzenie map. Przejdziemy przez typowe wyzwania związane z tworzeniem użytecznej i pouczającej mapy internetowej i pokażemy, jak w każdym przypadku D3.js daje zdolnym programistom JavaScript wszystko, czego potrzebują, aby mapy wyglądały i wyglądały pięknie.
Do czego służy D3.js?
D3.js może powiązać dowolne dane z modelem obiektów dokumentu (DOM), a następnie, za pomocą JavaScript, CSS, HTML i SVG, zastosować przekształcenia do dokumentu, które są sterowane tymi danymi. Rezultatem może być prosty wynik HTML lub interaktywne wykresy SVG z dynamicznym zachowaniem, takim jak animacje, przejścia i interakcje. Wszystkie przekształcenia i renderowania danych są wykonywane po stronie klienta w przeglądarce.
Najprościej mówiąc, D3.js może służyć do manipulowania DOM. Oto prosty przykład, w którym D3.js jest używany do dodania elementu akapitu do pustej treści dokumentu, z tekstem „Hello World”:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>Siłą D3.js jest jednak możliwość wizualizacji danych. Na przykład może służyć do tworzenia wykresów. Może służyć do tworzenia animowanych wykresów. Może być nawet używany do integrowania i animowania różnych połączonych wykresów.
D3 dla map internetowych i wizualizacji danych geograficznych
Ale D3.js może być używany do znacznie więcej niż tylko manipulacji DOM lub rysowania wykresów. D3.js jest niezwykle potężny, jeśli chodzi o obsługę informacji geograficznych. Manipulowanie i prezentowanie danych geograficznych może być bardzo trudne, ale budowanie mapy za pomocą D3.js jest dość proste.
Oto przykład D3.js, który narysuje mapę świata na podstawie danych przechowywanych w formacie danych zgodnym z JSON. Wystarczy zdefiniować rozmiar mapy i odwzorowanie geograficzne do użycia (więcej o tym później), zdefiniować element SVG, dołączyć go do DOM i załadować dane mapy za pomocą JSON. Stylizacja mapy odbywa się za pomocą CSS.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>Dane geograficzne dla D3
W tym samouczku D3.js pamiętaj, że tworzenie map działa najlepiej z danymi sformatowanymi w formatach JSON, w szczególności w specyfikacjach GeoJSON i TopoJSON.
GeoJSON to „format do kodowania różnych struktur danych geograficznych”. Jest przeznaczony do reprezentowania dyskretnych obiektów geometrycznych pogrupowanych w kolekcje funkcji par nazwa/wartość.
TopoJSON jest rozszerzeniem GeoJSON, które może kodować topologię, w której geometrie są „zszywane ze wspólnych segmentów linii zwanych łukami”. TopoJSON eliminuje nadmiarowość, przechowując informacje relacyjne między cechami geograficznymi, a nie tylko informacje przestrzenne. W rezultacie geometria jest znacznie bardziej kompaktowa i połączona tam, gdzie geometrie mają wspólne cechy. Powoduje to, że typowy plik TopoJSON jest o 80% mniejszy niż jego odpowiednik w GeoJSON.
Na przykład, mając mapę z kilkoma graniczącymi ze sobą krajami, wspólne części granic będą przechowywane dwukrotnie w GeoJSON, po jednym dla każdego kraju po obu stronach granicy. W TopoJSON będzie to tylko jedna linia.
Biblioteki map: Mapy Google i Leaflet.js
Obecnie najpopularniejsze biblioteki mapowe to Mapy Google i Ulotka. Zostały zaprojektowane w celu szybkiego i łatwego umieszczania „poślizgowych map” w Internecie. „Slippy maps” to termin odnoszący się do nowoczesnych map internetowych obsługiwanych przez JavaScript, które umożliwiają powiększanie i przesuwanie mapy.
Ulotka to świetna alternatywa dla Google Maps. Jest to biblioteka JavaScript o otwartym kodzie źródłowym zaprojektowana do tworzenia interaktywnych map przyjaznych dla urządzeń mobilnych, z myślą o prostocie, wydajności i użyteczności. Ulotka sprawdza się najlepiej, gdy wykorzystuje się duży wybór map rastrowych dostępnych w Internecie i zapewnia prostotę pracy z mapami kafelkowymi i możliwościami ich prezentacji.
Ulotka może być używana z dużym powodzeniem w połączeniu z funkcjami manipulacji danymi D3.js oraz do wykorzystania D3.js do grafiki wektorowej. Połączenie ich razem wydobywa to, co najlepsze w obu bibliotekach.
Mapy Google są trudniejsze do połączenia z D3.js, ponieważ Mapy Google nie są open source. Możliwe jest jednoczesne używanie Map Google i D3, ale ogranicza się to głównie do nakładania danych z D3.js na mapy w tle Map Google. Głębsza integracja nie jest tak naprawdę możliwa bez hakowania.
Projekcje — poza sferyczny Mercator
Pytanie, jak rzutować mapy trójwymiarowej sferycznej Ziemi na dwuwymiarowe powierzchnie, jest starym i złożonym problemem. Wybór najlepszej projekcji dla mapy to ważna decyzja, którą należy podjąć dla każdej mapy internetowej.
W naszym samouczku dotyczącym prostej mapy świata D3.js powyżej, użyliśmy układu współrzędnych odwzorowania Spherical Mercator, wywołując d3.geo.mercator() . Ta projekcja jest również znana jako Web Mercator. Ta projekcja została spopularyzowana przez Google, gdy wprowadzili Google Maps. Później inne usługi internetowe również przyjęły tę projekcję, a mianowicie OpenStreetMap, Bing Maps, Here Maps i MapQuest. To sprawiło, że Spherical Mercator jest bardzo popularną projekcją dla internetowych map śliskich.
Wszystkie biblioteki mapowania obsługują projekcję Spherical Mercator po wyjęciu z pudełka. Jeśli chcesz użyć innych odwzorowań, będziesz musiał użyć na przykład biblioteki Proj4js, która może wykonać dowolną transformację z jednego układu współrzędnych do drugiego. W przypadku Leaflet istnieje wtyczka Proj4Leaflet. W przypadku Google Maps nie ma nic.
D3.js przenosi projekcje kartograficzne na zupełnie nowy poziom dzięki wbudowanej obsłudze wielu różnych projekcji geograficznych. D3.js modeluje odwzorowania geograficzne jako pełne przekształcenia geometryczne, co oznacza, że gdy linie proste są rzutowane na krzywe, D3.js stosuje konfigurowalne adaptacyjne ponowne próbkowanie w celu podziału linii i wyeliminowania artefaktów rzutowania. Wtyczka Extended Geographic Projections D3 zwiększa liczbę obsługiwanych projekcji do ponad 40. Możliwe jest nawet stworzenie zupełnie nowej niestandardowej projekcji za pomocą d3.geo.projection i d3.geo.projectionMutator .
Mapy rastrowe
Jak wspomniano wcześniej, jedną z głównych zalet D3.js jest praca z danymi wektorowymi. W celu wykorzystania danych rastrowych istnieje możliwość połączenia D3.js z ulotką. Ale jest też opcja zrobienia wszystkiego za pomocą samego D3.js, używając d3.geo.tile do tworzenia śliskich map. Nawet mając sam D3.js, ludzie robią niesamowite rzeczy z mapami rastrowymi.
Manipulacja wektorami w locie
Jednym z największych wyzwań w klasycznej kartografii jest generalizacja map. Chcesz mieć jak najbardziej szczegółową geometrię, ale dane muszą dostosować się do skali wyświetlanej mapy. Zbyt wysoka rozdzielczość danych wydłuża czas pobierania i spowalnia renderowanie, podczas gdy zbyt niska rozdzielczość rujnuje szczegóły i relacje topologiczne. Ślizgowe mapy wykorzystujące dane wektorowe mogą napotkać duży problem z uogólnieniem map.
Jedną z opcji jest wcześniejsze uogólnienie mapy: posiadanie różnych zestawów danych w różnych rozdzielczościach, a następnie wyświetlenie odpowiedniego zestawu danych dla aktualnie wybranej skali. Ale to mnoży zbiory danych, komplikuje konserwację danych i jest podatne na błędy. Jednak większość bibliotek mapujących jest ograniczona do tej opcji.
Lepszym rozwiązaniem jest uogólnianie mapy w locie. I tu znowu pojawia się D3.js z jego potężnymi funkcjami manipulacji danymi. D3.js umożliwia uproszczenie linii w przeglądarce.
Chcę więcej!
D3.js nie jest łatwy do opanowania i ma stromą krzywą uczenia się. Konieczna jest znajomość wielu technologii, a mianowicie obiektów JavaScript, składni łańcuchów jQuery, SVG i CSS oraz oczywiście API D3. Do tego trzeba mieć trochę umiejętności projektowych, żeby w końcu stworzyć ładną grafikę. Na szczęście D3.js ma dużą społeczność i jest wiele zasobów, w których ludzie mogą się zagłębić. Świetnym punktem wyjścia do nauki D3 są te samouczki.
Jeśli lubisz uczyć się, analizując przykłady, Mike Bostock udostępnił na swojej stronie ponad 600 przykładów D3.js. Wszystkie przykłady D3.js mają repozytorium git do kontroli wersji i można je forkować, klonować i komentować.
Jeśli korzystasz z CartoDB, z przyjemnością usłyszysz, że CartoDB sprawia, że mapy D3 to pestka.
A na koniec mały bonus, oto jeden z moich ulubionych przykładów pokazujących niesamowite rzeczy, do których jest zdolny D3:
- ziemia, globalna animowana mapa wiatru 3D całego świata wykonana w D3.js. Ziemia to wizualizacja globalnych warunków pogodowych, oparta na prognozach pogody tworzonych przez superkomputery w National Centers for Environmental Prediction, NOAA / National Weather Service i przekonwertowana do formatu JSON. Możesz dostosować wyświetlane dane, takie jak wysokość do odczytów prędkości wiatru, zmienić nałożone dane, a nawet zmienić rzutowanie Ziemi.