Vizualizace hlasování

26. 3. 2020, Michal Škop

Přehledné zobrazení výsledku hlasování je užitečné pro novináře a jejich čtenáře, pro politiky nebo pro nejrůznější lobby.

Úvod

Rychlý odkaz: Demo aplikace

Poslankyně Olga Richterová dala na Instagram obrázek tabulky výsledku hlasování. Je to tabulka, která je vlevo dole u každého hlasování v Poslanecké sněmovně (konkrétně toto hlasování je zde).

Tabulka jednoho výsledku hlasování na Instagramu

Ovšem ukázat hezky přehledně výsledek hlasování je docela užitečná věc nejen pro poslankyni. Může to být pro novináře ze Sněmovny, může to být na obci, může to být prostě leckde.

Abychom neměli jenom takovou tabulku (i když díky i za ní), koukneme, jak to dělají ti nejlepší a zkusíme uvařit zobrazení výsledků hlasování podle Guardianu. Naším cílem bude vytvořit obrázek pro Instagram, na Facebook, na Twitter.

Naším cílem bude takovýto obrázek:

Data

Běžně dostupné suroviny

Otevřená data z hlasování z Národního katalogu otevřených dat

Suroviny, které musíme trochu hledat

Postup

Příprava dat - standardizace

V katalogu otevřených dat zjistíte, že zas tak moc těch hlasování tam není. A už vůbec ne aktuálních. Ale spousta - alespoň těch větších - obcí dneska ta data má z hlasovacího zařízení, jenom je nedává jako otevřená ven. Takže pokud vás zajímá nějaká konkrétní obec, zkuste to napřímo se zeptat na radnici (nebo třeba pomocí formuláře přes infozákon).

Pokud se ale koukneme na to, co máme k dispozici - starší Prahu 6, Hradec Králové, Děčín z Katalogu otevřených dat nebo další odjinud (Sněmovnu, z Hlasovali.cz) - viďíme, že všechna ta hlasování mají zcela jiný formát. Takže prvně si je převedeme do jednotného formátu, abychom je mohli snadno použít.

K tomu si budeme muset ještě dodat pár věcí - barvu strany, aby graf byl co nejpřehlednější, nebo requirement, tj. jak se výsledek hlasování počítá. Taky si u stran přidáme abbreviation, tedy zkratku strany kvůli legendě. Náš soubor by měl nakonce vypadat takto v JSONu:

{
    "motion": {
        "name": "Prodej budovy základní školy "
    },
    "end_date": "2015-12-09",
    "requirement": "Nadpoloviční většina všech členů",
    "voters": [
        {
            "voter": {
                "name": "Škop Petr"
            },
            "group": {
                "name": "Nezávislí pro Plasko",
                "abbreviation": "NzP",
                "color": "#a7f63d"
            },
            "option": "no"
        },
        ... atd. (další zastupitelé nebo poslanci) ...
    ]
}

Tohle je trochu otravná práce, tak pro inspiraci, jak se na to dá jít:

Praha 6: nejprve si z open dat v XML udělat seznam zastupitelů a ručně doplnit strany (v těch XML nejsou), potom z vybraného hlasování se udělá tabulka a z tabulky (a z tabulky barev stran) už výsledný JSON
Brno, Brno-střed nebo Plasy: tato data jsou z hlasovali.cz, kde jsou v tabulce (nakopíruje se to z webu do tabulky a doplní hlavička, např. Brno). A to se potom (pomocí skriptu převede to výsledného JSONu)
Sněmovna je trochu složitější. Nejprve stáhneme a rozbalíme data, potom vytáhneme hlasy. Trochu si ušetříme práci tím, že info o aktuálních poslancích si stáhneme z Napište jim!. Potom si vytvoříme datapackage. A nakonec zase pomocí posledního skriptu dostaneme kýžený JSON. Nesmíme zapomenout taky správně nastavit requirement, který může být ve Sněmovně různý (ústavní hlasování, běžné, atd.)

Grafy, obrázky

Grafy si vytvoříme pomocí Vue.js v SVG. V takovém případě se vcelku automaticky nabízí použít D3.js, ale tady chceme jenom čtverečky a zvládnem to i přímo v Javascriptu s pomocí toho Vue.js, D3 by tady byl zbytečný overkill.

Nejprve si [přetrasformujeme data, jak potřebujeme]link_wrapper (na 2 až 3 skupiny). A tuty přetransformovaný data vykreslíme do SVG

Tohle rozdělení na 2 kroky je dobré proto, že ze stejných přetransformovaných dat můžeme snadno udělat ještě další graf:

Malá vizualizace jednoho výsledku hlasování

Můžeme také využít reaktivity Vue.js a vytvořit si CELOU MINIAPLIKACI. Můžeme si tam snadno měnit velikosti všecho na grafu a taky měnit rovnou i samotná data.

Do ní ještě zabudujeme tlačítko, které pomocí Canvg vygeneruje z vektorového SVG obrázek-bitmapu v PNG. A můžeme ho konečně dát na všechny sociální sítě ❤.

Výsledek

A závěrečné srovnání - stejné ústavní hlasování, kde byla potřeba 120 hlasů, vlevo pomocí tabulky z webu Sněmovny, vpravo co jsme z toho ukuchtili:

Srovnání vizualizace jednoho výsledku hlasování na psp.cz a dle zde popsaného postupu.

(A jen poznámka na závěr: zdržet se má na výsledek hlasování úplně stejný vliv jako hlasovat ne. U takovýchto ústavních hlasování dokonce i neučást je stejná jako ne - není to prostě podpora návrhu)