NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: SVG interaktivní mapa

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Adam Čejka
Člen
Avatar
Adam Čejka:1.2.2022 21:24

Ahoj,
potřeboval bych pomoc s interaktivitou map na webu. Vytvoření interaktivních kartogramů ukazující vývoj pandemie covid 19 v ČR v čase a s různými daty (viz. přílohy).

Děkuji za jakoukoli radu
AČ

Zkusil jsem: Mám vytvořenou webovou stránku, mapy vytvořené Inkscape a exportovány do SVG, mám všechna potřebná data, ale nemohu vytvořit funkční interaktivní mapu (Kartogram), který by zobrazoval vývoj pandemie v čase

Chci docílit: Vytvořit mapu, která by se měnila v čase. Cílem by bylo vytvořit kartogram, který by dokázal zobrazit vývoj pandemie v čase a také různá data který by jej prezentovali, jako například počet nakažený, počet úmrtí atd.

 
Odpovědět
1.2.2022 21:24
Avatar
DarkCoder
Člen
Avatar
Odpovídá na Adam Čejka
DarkCoder:2.2.2022 0:02

Máš různé typy dat (Nakažení celkem, Nakažení aktuálně, Zemřelí, Vyléčení). Pro každý typ se bude sestavovat samostatná mapa. Dále máš kraje (Hlavní město Praha, Středočeský kraj, Jihočeský kraj, atd.). Pro každý kraj a každý typ dat víš, jaká je hodnota v kterém dnu. Budeš tedy mít 4 (počet typů dat) 2D pole o počtu sloupců rovno počtu krajů a počtu řádků rovno počtu dnů, za kterých chceš zobrazit vývoj pandemie Covid-19. Stanovíš referenční meze (např. pro Zemřelé 0 - 2000/den) nebo si vyhledáš maxima a ty budeš brát jako referenční. Také si musíš stanovit meze tentokrát pro barvu, například z bílé do tmavě červené. Vytvoříš posuvník, nastavíš pozici na začátek. Vytvoříš vazbu pozice posuvníku s indexem pole představující den ( budeš-li mít např. 100 dnů, pak posuvník v polovině bude adekvátní s indexem 50). Získáš hodnotu na indexu, poměříš s referenční hodnotou, zobrazíš barvu kraje v závislosti referenční hodnoty a hodnoty na indexu. Shrnuto: dle pozice posuvníku určuješ pozici denního indexu a na základě podílu hodnoty v poli a referenční hodnoty vykresluješ barvou daný kraj na mapě.

Nahoru Odpovědět
2.2.2022 0:02
"I ta nejlepší poučka postrádá na významu, není-li patřičně předána." - DarkCoder
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.2.2022 8:06

Zkus to vic upresnit.
Pokud mas svg obrazky jako obrazky, pak chces neco jako takovou tu galerii s puntiky, kde prepinas obrazky, ne? Kazdy puntik bude reprezentovat jiny cas. Takovych scriptu v javascriptu mas na netu furu.
Pokud si neco podobne chces navrhnout vlastnimi silami, tak v podstate se da pouzit css pozicovani nebo css z-index a nastavujes jej pomoci javascriptu. To samozrejme muzes resit pres css class, js className.

google = simple javascript image galery z-index class
https://www.educba.com/…ipt-z-index/ - tady vysvetluji, jak to funguje pri prekryvani, treba ten posledni obrazek

google = simple javascript image galery z-index class onclick
https://codepen.io/…n/pen/jVyZbE - tady je primo js kod, kde tlacitkem je soucasne ten modry a zeleny div
Pri kliknuti zmeni obema z-index. Ja bych tam menil className.
No, a potom mozna chces nejake automaticke prepinani, to se resi pres setInterval.

google = bootstrap image galery

Kazdopadne se tu bavime o javascriptu a ne php. Takze sis vybral spatne forum na dotaz.

 
Nahoru Odpovědět
2.2.2022 8:06
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.