Folium

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 1 z 8. Masz ogromny dataset współrzędnych geograficznych i potrzebujesz interaktywnej mapy, żeby je ogarnąć. Problem w tym, że budowanie interaktywnych map zazwyczaj oznacza wyjście z Pythona i walkę z bibliotekami JavaScript. Rozwiązaniem tego bólu głowy jest właśnie pomost Folium. Folium to biblioteka w Pythonie, która działa jak tłumacz między twoim data workflow a Leaflet dot js. Leaflet to bardzo popularna biblioteka JavaScript typu open-source, używana do budowania interaktywnych map w wersji mobile-friendly. Jako data scientist wolisz odwalać czarną robotę — manipulację danymi, filtrowanie i analizę — w Pythonie. Folium pozwala ci zostać w tym środowisku. Bierze twoje obiekty z Pythona i generuje HTML oraz JavaScript potrzebne, żeby wyrenderować mapę Leaflet. Dostajesz interaktywność mapy webowej bez pisania ani jednej linijki kodu frontendowego. Rozpoczęcie pracy jest banalnie proste. Instalujesz bibliotekę za pomocą standardowych menedżerów pakietów, takich jak pip, odpalając pip install folium. Po instalacji, twój główny workflow kręci się wokół tworzenia bazowego obiektu mapy. Powiedzmy, że oceniasz potencjalne współrzędne pod lokalizację nowego sklepu. Masz dokładną szerokość i długość geograficzną i musisz zobaczyć okolicę. W swoim skrypcie importujesz bibliotekę folium. Następnie wywołujesz funkcję Map z tej biblioteki. Ta funkcja wymaga jednej kluczowej informacji, żeby od razu była użyteczna: początkowego punktu środkowego. Przekazujesz ten punkt środkowy za pomocą parametru location. Parametr location oczekuje prostej listy lub tupli zawierającej dwie liczby. Najpierw idzie szerokość geograficzna, a po niej długość geograficzna. Na przykład przekazujesz 45.52 jako szerokość i minus 122.68 jako długość geograficzną. Kiedy to odpalisz, Folium konstruuje obiekt mapy wyśrodkowany dokładnie na tych współrzędnych. Masz teraz obiekt mapy, który istnieje w pamięci. Jak go właściwie zobaczyć? Folium daje ci dwie główne ścieżki, w zależności od twojego workspace'u. Jeśli pracujesz w Jupyter Notebook, proces jest bezproblemowy. Po prostu wpisujesz nazwę swojego obiektu mapy w ostatniej linijce komórki i ją odpalasz. Środowisko notebooka rozpoznaje bogatą reprezentację HTML tego obiektu i automatycznie renderuje interaktywną mapę Leaflet bezpośrednio pod twoją komórką z kodem. Możesz od razu przesuwać i zoomować mapę, żeby sprawdzić tę potencjalną lokalizację sklepu. Często jednak musisz udostępnić tę mapę stakeholderom, którzy nie używają Jupytera. I tu wkracza druga metoda. Bierzesz swój obiekt mapy i wywołujesz na nim metodę save. Przekazujesz do tej metody nazwę pliku jako string, na przykład index dot html. Folium bierze całą logikę Leaflet pod spodem, współrzędne oraz instrukcje renderowania i zapisuje je w pliku HTML typu standalone na twoim dysku twardym. Każdy może dwukrotnie kliknąć ten plik i otworzyć w pełni funkcjonalną, interaktywną mapę w swojej standardowej przeglądarce. Żadne środowisko Pythona nie jest potrzebne, żeby zobaczyć końcowy wynik. I tu jest kluczowa rzecz. Folium nie renderuje map natywnie w Pythonie; to po prostu silnik, który generuje kod webowy niezbędny do tego, żeby przeglądarka mogła je wyrenderować. Działa stricte jako pomost do Leaflet, dzięki czemu twoje dane z Pythona są natychmiast web-ready. Jeśli te odcinki są dla ciebie pomocne i chcesz wesprzeć podcast, możesz wyszukać DevStoriesEU na Patreonie — każdy grosz pomaga nam opłacić rachunki. To wszystko w tym odcinku. Dzięki za wysłuchanie i buduj dalej!

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 2 z 8. Tworzysz piękną interaktywną mapę parku narodowego, ale w momencie, gdy użytkownik kliknie i przeciągnie, wypada poza wybrzeże i gubi się w bezkresnym, szarym oceanie. Potrzebujesz odpowiedniego tła i musisz zablokować kamerę dokładnie tam, gdzie są twoje dane. O tym właśnie jest ten odcinek – o dostosowywaniu canvasu. Kiedy inicjalizujesz mapę w Folium, domyślnie używa ona standardowych tilesów OpenStreetMap. To te kwadratowe obrazki, tilesy, które przeglądarka łączy ze sobą, żeby stworzyć tło mapy. Standardowe mapy ulic nie zawsze są dobrym wyborem. Możesz to zmienić za pomocą parametru tiles podczas tworzenia mapy. Jeśli chcesz uzyskać wyblakłe, minimalistyczne tło, żeby twoje dane się wyróżniały, możesz przekazać prosty string z nazwą, na przykład cartodb positron. Ale w przypadku parku narodowego prawdopodobnie wolisz mapę terenu lub zdjęcia satelitarne. W tym miejscu Folium integruje się z pakietem o nazwie xyzservices. Nie musisz szukać linków do zewnętrznych serwerów map. Folium ma wbudowane setki wstępnie skonfigurowanych providerów. Po prostu odwołujesz się do dictionary providers z modułu map w Folium i wybierasz tego, którego potrzebujesz. Możesz wybrać mapę topograficzną Esri albo konkretny kanał satelitarny. Przekazujesz ten object providera bezpośrednio do parametru tiles, a Folium obsługuje requesty do serwera w tle. Czasami twoja organizacja ma prywatny serwer map albo potrzebujesz bardzo specjalistycznej nakładki, której nie ma na wbudowanej liście. W takim przypadku możesz przekazać customowy string URL do parametru tiles. Serwery map używają ustandaryzowanej struktury URL zawierającej placeholdery na poziom zoomu, zazwyczaj reprezentowany przez Z, wraz ze współrzędnymi X i Y danego tilesa mapy. Podajesz ten template URL bezpośrednio. Jest tu jednak jeden twardy wymóg. Kiedy używasz customowego URL, Folium wymusza dodanie drugiego parametru o nazwie attr, co oznacza attribution. Musisz podać string ze wskazaniem źródła danych. Bez parametru attribution, Folium odmówi wyrenderowania customowych tilesów. Teraz twoja mapa ma idealne tło topograficzne. Ale wciąż masz problem z panningiem. Użytkownicy mogą odjechać widokiem daleko od parku narodowego. Zapobiegasz temu, ustawiając limity viewportu. Kiedy tworzysz object mapy, definiujesz bounding box za pomocą czterech konkretnych parametrów: minimalnej szerokości geograficznej, maksymalnej szerokości geograficznej, minimalnej długości geograficznej i maksymalnej długości geograficznej. Przekazujesz współrzędne granic twojego parku do tych parametrów. Oto kluczowa sprawa. Samo zdefiniowanie tych czterech współrzędnych nie powstrzyma użytkownika przed panningiem. Aby aktywnie zablokować viewport, musisz też ustawić parametr max bounds na true. Kiedy to włączysz, Folium instruuje silnik mapy pod spodem, żeby przyciągnął kamerę z powrotem na miejsce, jeśli użytkownik spróbuje przeciągnąć widok poza określony przez ciebie prostokąt. Mogą swobodnie robić zoom in i zoom out, żeby eksplorować szlaki, ale mapa fizycznie blokuje ich przed odjechaniem w ocean. Ustawienie sztywnych granic pozwala twoim odbiorcom skupić się na właściwej geografii, a dopasowanie tych granic do odpowiednich tilesów terenu nadaje twoim danym dokładnie taki kontekst, na jaki zasługują. To wszystko w tym odcinku. Dzięki za wysłuchanie i twórz dalej!

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 3 z 8. Mapa to tak naprawdę tylko statyczny obrazek, dopóki nie zaczniesz rzucać na nią pinów, żeby wyróżnić konkretne lokalizacje. Ale te piny wcale nie muszą wyglądać jak ta sama, domyślna niebieska łezka. Skuteczne oznaczanie danych oznacza dawanie użytkownikom wizualnych wskazówek i interaktywnego kontekstu bezpośrednio na poziomie współrzędnych. Żeby umieścić punkt na mapie, używasz klasy folium dot Marker. Jedynym absolutnym wymogiem przy tworzeniu markera jest parametr location. Przekazujesz do niego sekwencję dwóch liczb, najpierw szerokość, a potem długość geograficzną. Kiedy już stworzysz ten obiekt markera w kodzie, podpinasz go do swojej mapy bazowej używając metody add to. To daje ci standardowy pin siedzący dokładnie na tych współrzędnych. Ale sam pin mówi użytkownikowi tylko tyle, że coś tam jest. Musi jeszcze komunikować, czym to coś jest. Folium daje ci dwa główne sposoby na podpięcie tekstu do markera, a deweloperzy ciągle je mylą. Różnica jest prosta. Tooltip to tekst na hover. Popup to etykieta na click. Pomyśl o mapie pokazującej różne ośrodki narciarskie w paśmie górskim. Chcesz, żeby tooltip zawierał nazwę ośrodka, jak Aspen czy Snowbird. To pozwala użytkownikowi szybko skanować mapę, przesuwając kursor od pinu do pinu, i natychmiast widzieć pojawiające się i znikające nazwy. Popup jest zarezerwowany dla drugorzędnych informacji, których przeczytanie wymaga intencji. Kiedy użytkownik aktywnie kliknie pin Aspen, popup odkrywa szczegóły, takie jak przewyższenie trzech tysięcy stóp czy aktualne warunki pogodowe. Używasz tooltipa do szybkiej identyfikacji, a popupa do głębszego kontekstu. Konfigurujesz oba, przekazując tekst do parametrów tooltip i popup podczas tworzenia markera. Teraz tak, patrzenie na pięćdziesiąt identycznych niebieskich pinów to słaby user experience. Możesz je wizualnie rozróżnić używając klasy folium dot Icon. Kiedy tworzysz markera, możesz przekazać customowy obiekt Icon do jego parametru icon. To pozwala ci zmienić kolor samego pinu i grafikę wyświetlaną w jego środku. Dla parametru color, Folium przyjmuje kilka standardowych stringów, takich jak red, green, purple czy orange. Wracając do naszych ośrodków narciarskich, mógłbyś je wizualnie skategoryzować, oznaczając ośrodki dla początkujących na zielono, a te tylko dla ekspertów na czerwono. Żeby zmienić symbol wewnątrz pinu, używasz parametru icon w klasie Icon. Domyślnie Folium używa glyphiconów z Bootstrapa. Możesz przekazać nazwy takie jak cloud albo info dash sign, żeby uzyskać te konkretne grafiki wewnątrz swojego markera. Jeśli domyślna biblioteka nie ma dokładnie takiego symbolu, jakiego potrzebujesz, możesz przełączyć się na ikony Font-Awesome. Robisz to ustawiając parametr prefix w swoim obiekcie Icon na string f a. Kiedy już zmienisz prefix, możesz przekazać dowolną standardową nazwę z Font-Awesome do parametru icon. To otwiera ogromną bibliotekę symboli, pozwalając ci umieścić grafikę płatka śniegu na twoich ośrodkach zimowych zamiast generycznego kształtu. Oto kluczowa sprawa. Markery na twojej mapie niosą właściwą narrację twoich danych przestrzennych. Połączenie wyraźnych kolorów, rozpoznawalnych symboli i odpowiedniego podziału między tekstem na hover a akcjami na click, zamienia prostą siatkę współrzędnych w bardzo czytelny interfejs. Dzięki za wysłuchanie. Trzymajcie się wszyscy.

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 4 z 8. Klikasz marker na mapie, oczekując szczegółowego zestawienia, a zamiast tego dostajesz ciasny, nieczytelny blok zwykłego tekstu. Możesz myśleć, że piny na mapie są stworzone tylko do krótkich etykiet. Ale tak naprawdę możesz osadzić całą interaktywną tabelę danych albo miniwykres bezpośrednio w tym pinie. O tym właśnie porozmawiamy dzisiaj: bogata interaktywność w popupach. Domyślnie popupy w Folium przyjmują prosty string tekstu. Ale są zbudowane tak, żeby obsłużyć znacznie więcej. Weźmy na przykład mapę nieruchomości. Kiedy użytkownik kliknie pin domu, sam adres nie wystarczy. Chcesz wyświetlić zdjęcie nieruchomości i czystą, sformatowaną tabelę ze statystykami. Osiągniesz to, traktując popup jako odizolowaną stronę internetową. Po pierwsze, możesz przekazać surowe stringi HTML bezpośrednio do popupa. Ustawiając argument parse html na true, instruujesz Folium, żeby wyrenderował ten string jako strukturalne elementy webowe, zamiast wyświetlać na ekranie dosłowne nawiasy ostre. Pozwala to na dodawanie tagów obrazków, nagłówków i standardowego formatowania webowego bezpośrednio wewnątrz markera. Do bardziej zaawansowanych layoutów używasz specjalnego komponentu z frameworka, na którym opiera się Folium, o nazwie Branca IFrame. IFrame tworzy izolowane, przewijalne okno wewnątrz popupa. Jest to kluczowe przy osadzaniu złożonych struktur, ponieważ zapobiega wyciekaniu wewnętrznych styli popupa czy dużych obrazków i psuciu głównego layoutu mapy. Tworzysz swój string HTML, przekazujesz go do obiektu IFrame, ustawiasz stałą szerokość i wysokość, a następnie przekazujesz ten IFrame bezpośrednio do swojego popupa. Ten workflow idealnie łączy się z bibliotekami do analizy danych. Nie musisz ręcznie budować tabel HTML, żeby wyświetlać metryki. Jeśli masz Pandas DataFrame zawierający statystyki nieruchomości, po prostu wywołujesz standardową metodę Pandas to html. Bierzesz ten wygenerowany string HTML, wrzucasz go do swojego IFrame'a, a twój pin na mapie zawiera teraz w pełni sformatowaną, dokładną tabelę danych. Możesz pójść o krok dalej, używając klas Vega i VegaLite z Folium. Te klasy pozwalają na osadzanie interaktywnych wizualizacji. Zamiast przekazywać HTML, przekazujesz specyfikację JSON wykresu do klasy Vega i przypisujesz ją bezpośrednio do popupa. Teraz kliknięcie pinu domu wyświetla dynamiczny wykres liniowy historycznych wartości nieruchomości obok tabeli danych. A oto kluczowa sprawa. Ładowanie całego tego bogatego contentu tworzy ogromne wąskie gardło wydajnościowe. Jeśli twoja mapa nieruchomości ma pięć tysięcy pinów domów, a każdy popup zawiera tabelę danych, link do obrazka i wykres Vega, przeglądarka spróbuje wyrenderować wszystkie pięć tysięcy ukrytych struktur w momencie ładowania mapy. Strona natychmiast się zawiesi. Żeby to rozwiązać, obiekt Popup przyjmuje parametr o nazwie lazy. Ustawiając lazy na true, Folium początkowo nie wstrzykuje contentu popupa na stronę. Mapa renderuje markery, ale ciężki HTML, IFrame'y i wykresy są całkowicie ignorowane. Przeglądarka pobiera i renderuje content dopiero w momencie, gdy użytkownik kliknie konkretny pin. To odracza koszt obliczeniowy, co oznacza, że mapa z tysiącami ciężkich, interaktywnych popupów załaduje się równie szybko, co mapa ze standardowymi etykietami tekstowymi. Prawdziwa siła mapy webowej nie leży w tym, gdzie umieszczasz piny, ale w tym, ile kontekstu możesz w nich upchnąć bez pogarszania user experience. Dzięki za wysłuchanie. Trzymajcie się wszyscy.

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 5 z 8. Nanosisz pięćdziesiąt tras dostaw i kilkanaście magazynów na jedną mapę. W efekcie powstaje chaotyczna sieć przecinających się linii, z której nikt nic nie odczyta. Potrzebujesz sposobu, żeby pozwolić użytkownikom odfiltrować ten szum. I tu do gry wchodzi organizacja wektorów i warstw. Najpierw musisz narysować ścieżki. Żeby zaprezentować połączone współrzędne na mapie, używasz klasy Folium PolyLine. PolyLine przyjmuje sekwencję par szerokości i długości geograficznej i rysuje między nimi proste odcinki. Jeśli masz ślady GPS z ciężarówki dostawczej, po prostu przekazujesz tę listę współrzędnych do obiektu PolyLine. Możesz skonfigurować właściwości wizualne, takie jak kolor, grubość i opacity. Dzięki temu możesz narysować grubą, niebieską linię dla głównej trasy transportowej i cienką, szarą linię dla lokalnej trasy dostaw. Jeśli podepniesz PolyLine bezpośrednio do swojej base map, będzie ona cały czas widoczna. Przy złożonej mapie logistycznej to błąd. Oto kluczowa sprawa. Zamiast podpinać kształty bezpośrednio do obiektu mapy, powinieneś umieścić je w FeatureGroup. FeatureGroup to logiczny kontener. Grupuje powiązane elementy, żeby można było nimi zarządzać jak jedną całością. W naszym scenariuszu logistycznym zaczynasz od utworzenia dwóch oddzielnych FeatureGroups. Pierwszą nazywasz Trasy dostaw, a drugą Lokalizacje magazynów. Następnie, podczas generowania elementów mapy, zmieniasz ich miejsce docelowe. Kiedy tworzysz PolyLine dla trasy ciężarówki, dodajesz ją do grupy Trasy dostaw. Kiedy tworzysz standardowy marker dla budynku, dodajesz go do grupy Lokalizacje magazynów. Gdy wszystkie pojedyncze elementy są już posortowane w swoich kontenerach, dodajesz oba FeatureGroups do głównego obiektu mapy. Na tym etapie wygenerowana mapa wygląda identycznie jak ta, w której wszystko zostało wrzucone bezpośrednio na base layer. Efekt wizualny się nie zmienił, ale zmieniła się struktura danych pod spodem. To właśnie ta struktura umożliwia interakcję z użytkownikiem. Żeby udostępnić tę strukturę użytkownikowi, tworzysz instancję Folium LayerControl i dodajesz ją do mapy. LayerControl skanuje obiekt mapy, znajduje wszystkie podpięte FeatureGroups i automatycznie buduje interaktywne menu w górnym rogu ekranu. Twoje FeatureGroups stają się przełączalnymi overlayami. Użytkownik zobaczy checkbox dla Tras dostaw i kolejny checkbox dla Lokalizacji magazynów. Jeśli na ekranie jest zbyt duży bałagan, może odznaczyć trasy, żeby przyjrzeć się samym obiektom. LayerControl dzieli dane mapy na dwie kategorie: base layers i overlays. Base layers to kafelki mapy pod spodem, takie jak widok ulicy czy widok satelitarny. Są one prezentowane za pomocą radio buttonów, ponieważ w danym momencie może być aktywna tylko jedna base map. Overlays to wektory i markery, które dodałeś przez FeatureGroups. Używają one checkboxów, co pozwala na nakładanie na siebie wielu zestawów danych. Najważniejszą zasadą interaktywności mapy jest to, że interfejs użytkownika może manipulować tylko tym, co definiuje twoja struktura danych. Jeśli podepniesz każdą linię i marker do root map, twoje menu LayerControl będzie puste, a użytkownik nie będzie miał nad niczym kontroli. To wszystko na dzisiaj. Do usłyszenia następnym razem!

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 6 z 8. Nanoszenie tysiąca pojedynczych markerów na mapę jest proste. Ale co, jeśli musisz narysować dokładne, poszarpane granice wszystkich pięćdziesięciu stanów USA, albo zawiłe granice administracyjne całego miasta? Ręczne dodawanie każdego wierzchołka nie wchodzi w grę. Rozwiązaniem tego problemu są spatial overlays z użyciem GeoJSON. GeoJSON to branżowy standard reprezentowania złożonych obiektów geograficznych. Podczas gdy standardowy marker reprezentuje pojedynczą współrzędną, GeoJSON obsługuje linie, polygony i multi-polygony. Kiedy masz do czynienia z rzeczywistymi granicami, pracujesz z arrayami zawierającymi tysiące par szerokości i długości geograficznej, które definiują pojedynczy kształt. Folium używa klasy GeoJson, aby wziąć te gęste dane o granicach i wyrenderować je jako wizualny overlay na twojej mapie bazowej. Weźmy jako przykład scenariusz mapowania granic dzielnic miasta. Masz dane przestrzenne dla dwudziestu dzielnic i musisz zobaczyć ich kontury na mapie ulic. Niektóre dzielnice to proste polygony, podczas gdy inne mogą obejmować wyspy lub odłączone strefy, wymagające multi-polygonów. Folium daje ci kilka sposobów na wczytanie tych złożonych danych. Możesz przekazać string zawierający URL, który wskazuje bezpośrednio na plik GeoJSON hostowany online. Możesz przekazać lokalną ścieżkę do pliku. Możesz nawet przekazać sparsowany dictionary w Pythonie, jeśli dane zostały już załadowane do pamięci. Oto kluczowa sprawa. Folium nie czyta tylko statycznych plików tekstowych. Natywnie integruje się z szerszym ekosystemem data science w Pythonie. Klasa GeoJson przyjmie dowolny obiekt w Pythonie, który implementuje standardowe property geo-interface. To powszechny protokół w pythonowych bibliotekach przestrzennych, który pozwala różnym narzędziom na bezproblemowe współdzielenie geograficznych struktur danych. Dzięki temu standardowi nie musisz ręcznie wyciągać stringów JSON, jeśli używasz już nowoczesnych narzędzi analitycznych. Możesz przekazać GeoDataFrame z biblioteki GeoPandas bezpośrednio do Folium. Aby to zrobić, najpierw ładujesz granice swoich dzielnic do GeoDataFrame za pomocą GeoPandas. Następnie generujesz swoją standardową mapę bazową wyśrodkowaną na mieście. Potem wywołujesz klasę GeoJson i po prostu przekazujesz jej swój GeoDataFrame jako główny argument. Na koniec dodajesz ten nowo utworzony obiekt GeoJson do swojej mapy bazowej. Folium odczytuje geo-interface z dataframe'u, wyciąga geometryczne kształty dla wszystkich dwudziestu dzielnic miasta i rysuje dokładne granice na kafelkach mapy. Całkowicie omijasz manipulację surowymi plikami i przechodzisz bezpośrednio od struktury danych do wizualizacji. Pamiętaj, że ten konkretny proces dodawania overlayu służy wyłącznie do wyświetlania granic przestrzennych. Nie chodzi tu o łączenie danych statystycznych z tymi granicami, żeby pokolorować je na podstawie populacji czy dochodów. To zupełnie inna koncepcja. Klasa GeoJson służy wyłącznie do definiowania fizycznych kształtów i wrzucania ich na mapę. Siła warstwy GeoJSON w Folium polega nie tylko na tym, że potrafi rysować złożone, wieloczęściowe granice geograficzne, ale też na tym, że służy jako bezpośredni pomost między obiektami analitycznymi, takimi jak GeoDataFrame, a twoją końcową, interaktywną mapą, wymagając przy tym absolutnie zero ręcznej obróbki współrzędnych. To wszystko w tym odcinku. Dzięki za wysłuchanie i twórz dalej!

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 7 z 8. Najbardziej rozpoznawalna mapa w data science koloruje regiony geograficzne na podstawie wartości statystycznej. Dopasowanie granic geograficznych do danych z arkusza kalkulacyjnego zazwyczaj wymaga uciążliwej operacji merge w osobnej bibliotece przestrzennej. W Folium klasa Choropleth obsługuje geometrię, data binding i skalowanie kolorów w jednym kroku. Choropleth łączy dane liczbowe z granicami geograficznymi. Podajesz kształty, podajesz liczby, a mapa koloruje te kształty na podstawie tych liczb. Weźmy klasyczny przykład mapowania stopy bezrobocia w stanach USA. Aby to zbudować, tworzysz instancję klasy Choropleth i przekazujesz jej cztery kluczowe informacje. Po pierwsze, dane geograficzne. Przekazujesz plik GeoJSON zawierający granice poligonów dla stanów USA do parametru geo data. Po drugie, dane statystyczne. Przekazujesz swój Pandas DataFrame zawierający statystyki bezrobocia do parametru data. Po trzecie, mówisz Folium, które części twojego DataFrame mają znaczenie. Do parametru columns przekazujesz listę dokładnie dwóch nazw kolumn. Pierwsza kolumna przechowuje identyfikator regionu, na przykład skrót nazwy stanu. Druga kolumna przechowuje wartość liczbową, którą chcesz zwizualizować, czyli stopę bezrobocia. I tu jest kluczowa sprawa. DataFrame i kształty geograficzne to zupełnie osobne obiekty. Musisz jawnie powiedzieć Folium, jak je ze sobą połączyć, używając parametru key on. Ten parametr przyjmuje string reprezentujący dokładną ścieżkę w pliku GeoJSON, pod którą znajduje się pasujący identyfikator. Jeśli twój GeoJSON definiuje stan za pomocą property o nazwie id, twoim parametrem key on będzie string feature dot id. Ta ścieżka musi idealnie pasować do identyfikatora w pierwszej kolumnie twojego DataFrame. Kiedy do siebie pasują, dane statystyczne bindują się z geometrią. Kiedy dane się zbindują, mapa nakłada kolory. Parametr fill color akceptuje standardowe palety, takie jak YlGn dla gradientu od żółtego do zielonego. Domyślnie Folium bierze minimalną i maksymalną wartość z twojego datasetu i tnie skalę kolorów na równe matematyczne przedziały. Jeśli twoje dane o bezrobociu są mocno skośne, takie liniowe cięcie może wrzucić większość stanów do jednego pasma kolorów, przez co mapa stanie się bezużyteczna. Aby mieć nad tym kontrolę, przekaż listę konkretnych progów liczbowych do parametru bins. To wymusza przesunięcie skali kolorów dokładnie tam, gdzie twoje dane naturalnie się dzielą, dając ci pełną kontrolę nad wizualnym rozkładem. Datasety z prawdziwego świata często mają luki. Jeśli dla jakiegoś stanu w pliku z granicami GeoJSON brakuje pasującego wiersza w twoim DataFrame, Folium i tak narysuje granicę, ale zostawi wnętrze bez koloru. Możesz zarządzać tymi pustymi regionami za pomocą parametru nan fill color. Ustawienie go na neutralny odcień, taki jak szary, gwarantuje, że brakujące dane są wyraźnie oznaczone, nie odwracając uwagi od reszty mapy. Dopasowanie klucza z DataFrame do ścieżki property w GeoJSON to najczęstszy punkt awarii w większości map typu choropleth. Ustaw poprawnie parametr key on, a mapa zbuduje się sama. Jeśli uważasz te techniczne deep dive'y za przydatne, możesz wesprzeć podcast, szukając DevStoriesEU na Patreon. To wszystko w tym odcinku. Dzięki za wysłuchanie i twórz dalej!

Cześć, tu Alex z DEV STORIES DOT EU. Folium, odcinek 8 z 8. Naniesienie stu punktów na mapę w przeglądarce jest proste. Spróbuj nanieść dziesięć tysięcy punktów, a twoja przeglądarka całkowicie się zawiesi. DOM po prostu nie jest w stanie obsłużyć tak wielu pojedynczych elementów graficznych naraz. Rozwiązaniem tego wąskiego gardła jest performance i pluginy. Masz dataset zawierający sto tysięcy lokalizacji odbioru pasażerów przez taksówki w całym mieście. Jeśli zrobisz loopa po tej liście i dodasz standardowe markery bezpośrednio do swojej mapy bazowej, strona wywali się, zanim w ogóle skończy się ładować. I tu wkracza plugin MarkerCluster. Zamiast podpinać punkty bezpośrednio do mapy, tworzysz dedykowany obiekt cluster. Robisz loopa po swoim datasecie, dodajesz każdą pojedynczą lokalizację do tego obiektu cluster, a na samym końcu podpinasz cały cluster do mapy. Kiedy mapa ładuje się maksymalnie oddalona, przeglądarka nie próbuje wyrenderować stu tysięcy pinów. Rysuje kilka dużych okręgów z liczbami w środku, które reprezentują całkowitą liczbę lokalizacji na tym rozległym obszarze. Kiedy robisz zoom in, te ogromne clustery dynamicznie rozpadają się na mniejsze, lokalne clustery. Jeśli klikniesz w ponumerowany okrąg, mapa automatycznie obliczy granice i zrobi zoom na ten konkretny region. Ogarnia matematykę przestrzenną w tle, upewniając się, że przeglądarka renderuje pojedyncze markery tylko wtedy, gdy jesteś wystarczająco blisko, żeby faktycznie je zobaczyć. Czasami dokładne lokalizacje punktów to nie jest to, co faktycznie chcesz przekazać. Chcesz zobaczyć gęstość. Plugin HeatMap bierze tę samą ogromną listę współrzędnych taksówek i renderuje płynny gradient kolorów zamiast tysięcy nakładających się na siebie pinów. Przekazujesz swoją surową listę par szerokości i długości geograficznej bezpośrednio do funkcji heatmap i podpinasz ją do mapy. Plugin oblicza przestrzenną koncentrację twoich danych. Strefy odbioru o wysokiej gęstości intensywnie świecą, podczas gdy rzadsze obszary zanikają. Dla przeglądarki wyrenderowanie tego pojedynczego overlaya jest obliczeniowo znacznie tańsze niż dyskretnych kształtów wektorowych, a do tego natychmiast ujawnia hotspoty, bez zamieniania ekranu w chaotyczny bałagan ikon. Do tego momentu mapy były stricte read-only. Plugin Draw całkowicie zmienia to zachowanie. Dodaje interaktywny toolbar bezpośrednio do UI. Odpalasz plugin w swoim skrypcie w Pythonie, a kiedy użytkownik otworzy plik wynikowy, może klikać narzędzia, żeby szkicować customowe poligony, rysować linie albo wrzucać własne markery na twoje dane o taksówkach. I tu jest kluczowa sprawa. Te narysowane kształty to nie są tylko martwe piksele na ekranie. Generują one poprawne dane przestrzenne. Użytkownik może narysować granicę wokół konkretnej dzielnicy z wysokim popytem na taksówki i wyeksportować ten dokładny kształt jako plik GeoJSON bezpośrednio z toolbara. To przekształca twoją wizualizację ze statycznego raportu w aktywne narzędzie do selekcji i adnotacji. Pluginy Folium wypełniają lukę między prostymi skryptami w Pythonie a potężnym frontendowym mapowaniem internetowym, dając ci zaawansowany performance w przeglądarce bez zmuszania cię do pisania w JavaScripcie. Zachęcam cię do przejrzenia oficjalnej dokumentacji, wypróbowania tych narzędzi w praktyce lub odwiedzenia DEV STORIES DOT EU, żeby zasugerować tematy, o których chcesz usłyszeć w przyszłych seriach. To wszystko w tym odcinku. Dzięki za wysłuchanie i koduj dalej!