Vizualizační deník

Osobní cíl projektu

U každého projektu se sám sbe ptám, jestli by mi AI nemohla pomoct udělat ho líp nebo rychleji – ať už jde o práci nebo školu. Zároveň se snažím zůstat kritický: AI je pro mě nástroj, ne něco, co odvede práci za mě.

Semestrální projekt k předmětu ISKM83 Vizualizační praktikum jsem bral jako příležitost si tohle zkusit u něčeho nového – datové vizualizace. Chtěl jsem zkusit, jak daleko dokážu dotáhnout datovou vizualizaci, když ji stavím s AI pomocí vibecodingu. Vybral jsem si Claude od Anthropicu, o kterém jsem věděl, že zvládá generovat funkční kód.

Zvolená data

Mým prvním nápadem bylo vytvořit interaktivní mapu podniků na Praze, která bude zobrazovat reálnou vytíženost podniků v čase. Google totiž tyto data o jednotlivých podnicích v Google Maps zobrazuje, ale  tyto data nejsou zobrazená najednou. Do projektu jsem se pustil, ale bohužel jsem nepřišel na to, jak to udělat. To, že to nejspíš nepůjde mi bylo potvrzeno i na konzultaci.

Takže jsem svůj plán změnil. Prohledáváním datasetů hl. m. Prahy jsem našel zajímavé komplexní datasety o dopravních přestupcích v hlavním městě v letech 2015–2024. Bylo tam tolik zajímavých dat, ze kterých jsem věděl, že dokážu poskládat datovou vizualizaci, která bude zajímává i praktická. Celkem jsem tedy stáhl 9 CSV souborů (jeden za každý rok), celkém 6 milionů záznámů o dopravních přestupcích.

Každý záznam obsahuje 10 sloupců.

Ve vizualizaci jsem využil:

  • DATSK – datum skutku
  • MISTOSK – místo skutku (textový popis adresy/lokality)
  • PRAHA – správní obvod (Praha 1–22)
  • OZNAM – oznamovatel (MPP = Městská policie Praha, PČR = Policie ČR)
  • PRAVFOR – právní kvalifikace (odkaz na paragraf zákona)
  • OSOBA / FIRMA – zda byl přestupek řešen s fyzickou osobou nebo firmou
Nevyužil jsem:
 
  • CASSK – čas skutku, který je u většiny přestupků zaznamenaný – zobrazovat počty přestupků a jejich typ v rámci hodin by mohlo být zajímavé, nicméně mi to nepřišlo moc důležité.
  • MPZ – národnost poznávací značky – drtivá většiná je samozřejmě česká, a tak mi na tom nepřišlo nic zajímavého.
  • TOVZN – značka vozidla. Analýza „která auta nejvíc porušují předpisy“ by byla zavádějící. Bylo by potřeba normalizovat na počet registrovaných vozidel dané značky v Praze. Jenže ani tehdy by to nebylo objektivní, protože spousta lidí co v Praze jezdí,  tam nemá regisrovaný vůz.

Limity dat

Neúplná kategorizace přestupků
Sloupec PRAVFOR říká jen paragraf, ne co se stalo. Největší kategorie §125c/1k je sběrná – spadá tam parkování, pásy, odbočování i značení. Z adres v poli MISTOSK se dá odhadnout, že zhruba 85 % je parkování, ale přesně to z dat zjistit nejde.

Chybí rok 2024
Od 1. 7. 2024 přestalo Magistrát přestupky projednávat v prvním stupni. Data existují jen do 30. 6. 2024 – půlrok by zkresloval srovnání, tak jsem ho vynechal.

Lokality nemají souřednice
MISTOSK je text („Legerova 12 u domu“), ne GPS. Přes Google Places API jsem se rozhodl lokalizovat top 100 lokalit. Zbytek (statisíce adres) na mapě není.

Nekonzistentní zápisy
Stejné místo se zapisuje různě („Brusnický tunel směr Troja, pruh 1“ vs. „Brusnický tunel směr Strahov“). Varianty jsem tedy nechal sloučit pod jeden název.

Cíl vizualizace

Cílem bylo zpřístupnit 6 milionů řádků surových dat v podobě, kterou člověk jednoduše pochopí. Surová CSV z MHMP jsou pro běžného člověka nepoužitelná, ikdyž nabízí velmi zajímavé informace. Zároveň jsem chtěl pomocí AI přiblížit i pravní kvalifikace přestupků lidem, kteří nejsou právníci (např. mně. 🙂 ).

Záměrem je neutrální vizualizace faktických dat – kolik přestupků, jakého typu, kde a kým. Uživatel může data poměřovat i v jednotlivých letech a hledat tak trendy v čase nebo třeba hledat místa, kde by si měl dávat pozor, aby nespáchal přestupek. Nicméně neexistuje nic konkrétního, co by si uživatel z vizualizace měl vzít.

Cílovou skupinou je zejména laická veřejnost, kterou by mohlo zajímat, kde, kolik a jaké přestupky se v Praze dějí bez právnické terminologii. Vizualizaci můžou ale využít i analytici, kteří mohou hledat datový podklad o dopravě v Praze a vizualizace jim tak zjednodšuje přístup k datům a nemusí je tak dohledávat v surových datech.

Vizualizační
proces

Celý dashboard vznikal iterativně v konverzaci s Claude. Začal jsem nahráním surových CSV.

Postupně jsem:

  • Prozkoumal strukturu dat a odhaloval, co jednotlivé sloupce znamenají
  • Vytvořil kategorizaci přestupků na základě paragrafů zákona
  • Zkoušel vytvářet růtzné vizualizační formy a objevoval limitaci Claude
  • Claude dokázel úspěšně geokódovat top 100 lokalit přes Google Places API
  • Ladil jsem barvy, popisky, legendy a responzivitu…
  • Nasadil celou vizualizici na na GitHub Pages
Technicky je dashboard React (JSX) komponent s knihovnou Recharts pro grafy a Leaflet pro mapu. Data jsou embedovaná přímo v kódu (JSON)
 

Volba vizualizačních forem

 

Waffle chart (typy přestupků) – 500 buněk v mřížce 50×10. Zvolil jsem waffle chart místo koláčového grafu nebo treemapy, protože dvě kategorie tvoří 95 % dat. V koláčovém grafu by zbylých 5 kategorií bylo nečitelných. Treemapa měla stejný problém. Waffle chart garantuje každé kategorii minimálně 1 buňku a poměry jsou pořád srozumitelné.

Sloupcový graf (roky/měsíce) – přepíná se podle kontextu. V celkovém pohledu ukazuje roky (2015–2023), po výběru roku se změní na měsíce.  

Mapa (nejčastější lokality) – Leaflet s OpenStreetMap dlaždicemi, kolečka s barevnou škálou podle počtu přestupků a číslem dle celkového umístění.

Donutové grafy (oznamovatel, subjekt) – poměry jsou jasné a donuty tak tyto poměry zobrazují docela jasně. Šlo by využít i klasické koláčové grafy…

Horizontální sloupcový graf – Praha 1–22 seřazené sestupně podle počtu přestupků.

 

Abych si byl jistý, že Claude nehalucinuje, ale opravda grafy sedí, ověřoval jsem si občas pravdivost skrze nástroj Datawrapper – nahrál jsem tam stejná data a zjišťoval jsem, jestli vycházejí stejné grafy a čísla. Vizualizace, které byly vytvořené skrz Claude se s Datawrapperem shodovali.

Přístupnost
a inkluzivita

Celý dashboard používá Okabe-Ito paletu – standardní paletu barev navrhovanou pro vědecké vizualizace, která je rozlišitelná pro lidi se zrakovým omezením. Výjimkou je mapa, která využívá barevnou škálu z béžové do červené, tak aby bylo dle barvy poznatelné i pořadí dané lokality.

Právnická terminologie (§125c/1f bod 4) je přeložena do srozumitelného jazyka („Rychlost do 20 km/h“). Rozklikávací legenda vysvětluje každou kategorii podrobněji.

Pro přehledenost vizualizace může člověk často získat podrobnější informace tím, že na daný segment najede myší.

Testování
a zpětná vazba

Dashboard jsem otestoval se třemi uživateli. Žádný z nich neměl předchozí zkušenost s těmito daty.

Co fungovalo. Všichni tři se v dashboardu zorientovali bez vysvětlování. Waffle chart („ty malé kostičky“) hodnotili pozitivně – je na první pohled vidět, čeho je hodně a čeho málo. Jeden uživatel ocenil neutrální barevné kódování: přestože jde o přestupky, vizualizace nepůsobí manipulativně a nesnaží se zvýrazňovat závažnost jednotlivých kategorií. Časová osa a odstupňování lokalit podle počtu přestupků byly taky zmíněny jako zajímavé. Kladně hodnotili responzivitu vizualizace.

Co nefungovalo. Jeden uživatel si všiml, že vizualizace nese znaky AI-generovaného designu, i když dodal, že to běžný člověk nepozná a na funkcionalitě to nikterak nevadí. Popisek „Firma / provozovatel“ byl pro jednoho uživatele nesrozumitelný – nebyl si jistý co to znamená. Nicméně rozhodl jsem se tento popisek zanechat, ostatní s ním problém neměli. Jeden uživatel navrhoval monochromní mapu (tmavý podklad), což se mi bohužel nepodařilo technicky realizovat.

Přejít nahoru