Vaalikone

Johon jokainen voi olla tyytyväinen
(armotonta nörtteilyä)

Vuonna 2019 kirjoitin Taulukoita ja palkkeja -kirjoituksen, jossa vertailin hiukan SVG-tekniikkaa CSS:sään. Vuonna 2020 kehitin Randompalkittaja-koodin (Big Brother -simulaattori), jolla sain helposti luotua satunnaisia tilastopalkkeja. Vuoden 2022 Big Brother -simulaattorissa käytin vuoden 2020 Randompalkittaja-koodia, muutin vain visuaalista ulkoasua.

Syksyllä 2022 päätin kokeilla, että tukeeko Blogger SVG:tä paremmin kuin vuonna 2019. Huomasin, että Bloggerissa taipuu nyt SVG:kin. Sain idean Vaalikoneesta, johon jokainen voisi olla tyytyväinen.

VAALIKONE

PUOLUEKANNATUS (%)

Huom. joissakin tilanteissa Muut-palkki sattaa vähän "elää omaa elämää" - bugia.

SVG:llä tehdään koodipohjaista grafiikkaa eli kuvia, joita voi luoda piirtämällä tai koodaamalla (kummallakin tyylillä lopputulos on sama) - monimutkaiset kuvat kannattaa piirtää. Piirretyn kuvan saa koodina, jota voi muuttaa koodaamalla. Aloin harjoitella SVG-koodaamista ja pohjalle otin vanhan Randompalkittaja-koodini, jota aloin muuttaa uuteen muotoon. Aivan kaikkea logiikkaa ei näin tarvinnut alusta asti koodata uusiksi, mutta paljon vanha koodi muuttui, koska muuttuihan ulkoasukin täysin ja tällä kertaa sen piti ohjailla SVG-kuvaa. En piirtänyt Vaalikoneen taulukkoa, vaan koodasin sen, koska sehän koostuu vain suorakulmioista, viivoista ja tekstistä - helppoja muotoja koodata. Lyhyesti sanottuna, suorakulmion X- ja Y-pisteet sekä korkeus ja leveys määritellään.

Kun taulukkopohja oli valmiina, niin alkoi itse toiminnan koodaus. Halusin mukaan myös liikettä eli animaatiota, mutta totesin, että taitaa olla joitain rajoitteita luovuuteeni. Muuttuvia SVG-tekstielementtejä ei voinutkaan animoida - tässä tapauksessa prosenttilukuja. Kun Vaalikoneen prosenttiluvut lasketaan JavaScriptin avulla ja sijoitetaan haluttuun SVG-tekstielementtiin, niin silloin sitä ei voi animoida.

"Moottorin" ytimessä on käytännössä vain kaksi suhdelukua, joiden avulla muodostetaan kaikki muu. Määritin Vaalikoneen äänimääräksi 1000 henkilöä (voisi olla mikä vain) ja toinen luku on prosenttipalkin tila pikseleinä (montako pikseliä palkki voi olla enintään pitkä), tässä tapauksessa 545 pikseliä.

Logiikka:
• 0 ja 1000 väliltä arvotaan (JavaScript-käskyllä) joku luku, esim. 750
• Lasketaan, että montako prosenttia 750 on 1000:sta (75 %)
  sekä suhteutetaan se 545 pikseliin:
• (750 / 1000) * 545 = 408,75 pikseliä, tämän voi tarkistaa:
  (408,75 / 545) * 100 = 75 %
• Näin saimme arvottua palkin pituuden ja sille haettua prosenttiluvunkin
• Ensimmäinen palkki haukkasi 750 ääntä, joten toisen palkin enimmäisäänimäärä on 250, josta arvotaan joku luku jne. Muut-palkki saa jämät, jotka jää.

Logiikka ei ole siis kovin vaikea, pitää vain hahmottaa mitä lukuja tarvitaan ja miten ne saa numeroiksi - prosenttilaskut täytyy hahmottaa.

Vinkki koululaisille:
Opettajat tahtovat opettaa pitkiä laskukaavoja, mutta välillä voi hiukan oikaista. Jos haluaa tietää paljonko X % on luvusta Y, niin se selviää lyhyesti. Esimerkiksi 75 % 545 lasketaan 0,75 * 545 = 408,75. Logiikka: 1 = 100 % eli 545 ja 0,75 = 75 % eli 408,75.

Vaalikoneessa on kolme eri "taulukkosyvyyttä": 100 %, 50 % ja 25 %. Jos pisin palkki jää alle 50 %, (tai on tasan 50 %) silloin taulukkosyvyys "zoomataan" näyttämään, niin että taulukon suurin prosenttiluku onkin 50 % ja jos pisin palkki on alle 25 % (harvoin), niin silloin taulukon suurin prosenttiluku onkin 25 %. Näin saadaan prosenttipalkit usein näyttämän pitkiltä - näyttää paremmalta. Meni tovi miettiessä, kuinka saan aikaan tuon halutun efektin. Mutta ratkaisu olikin melko yksinkertainen.

Jos pisin palkki jää alle 50 %, niin silloin tietenkin muutetaan taulukon viivoja ja prosenttilukuja, mutta miten palkki saadaan silloin oikeaan kohtaan?

Jos prosenttiluku on 40 %:
(0,40 * 545) * 2 = 436 pikseliä (palkin pituus kerrotaan kahdella)
Tarkistus: (436 / 545) * 100 = 80 %

Kun taulukko loppuu 50 %, niin silloin 40 % on 545 pikselin tilasta 80 % - ei ehkä selkeää, mutta näin se menee.

Jos pisin palkki on 25 % tai sen alle, niin silloin palkin pituus kerrotaan neljällä, koska 100 / 4 = 25 eli taulukko päättyy 25 %.

Vaalikoneessa on kolme eri "näyttelijää" (array-taulukkoa), jotka eivät juurikaan keskustele keskenään: puoluenimet, palkit ja prosenttiluvut. Array-taulukot voi ajatella myös korttipakkoina, niitä voi sekoittaa ja niistä voi ottaa pois tai lisätä kortteja.

Puoluenimet-pakassa on puolueiden nimet ja jokaisella Vaalikoneen tilanne päivityksellä nimet sekoitetaan Fisher-Yates -metodilla, jonka jälkeen ne sijoitetaan tekstielementteihin. Puoluenimet kertoo palkeille vain sen, että minkä värinen minkäkin palkin täytyy olla. Tarkemmin sanottuna:

Jos "Nimi1"-kohdassa on nimi "EVVK", niin silloin "Palkki1"-palkin väri on "black" jne.

JOS-lausekkeilla määritetään palkkien värit.

Palkkien pikselipituudet sijoitetaan omaan pakkaan ja prosenttiluvut omaan pakkaan. Jonka jälkeen nämä kaksi pakkaa järjestetään uudelleen, niin että suurin luku on pakan päällimmäisenä ja pienin alimmaisena jne. Näin pisin palkki ja suurin prosenttiluku osuvat kohdakkain, kun palkkipakan ja prosenttipakan päällimmäiset luvut sijoitetaan samalle riville.

Palkkipakan ensimmäinen luku sijoitetaan "Palkki1"-elementin pituusarvoksi ja prosenttilukupakan ensimmäinen luku laitetaan "prosentti1"-tekstielementtiin jne.

Jos palkki on niin pitkä ettei prosenttiluku mahdu palkin perään, niin silloin se sijoitetaan palkin sisään. Tässäkin meni hetki päätä raapiessa, että miten se toteutetaan, mutta onnistuin siinä aika hyvin.

HAVAINTOJA
Jostain syystä Vaalikoneessani yksi tai muutama puolue saa usein roimasti enemmän kannatusta, kuin loput puolueet. Mutta ehkä sitten satunnaisuus toimii niin, pitkällä matkalla (esim. 1000 kertaa, jos ottaisi luvut muistiin) välit tasoittuvat. Tai sitten tekoälyssäni on jokin älyllinen vika.

SVG-ANIMAATIO
Vaalikoneessa on animoitu vain prosenttipalkit. Alla on taulukko, joka on animoitu enemmänkin, mutta siinä on kiinteät luvut ja palkit. Taulukon tiedot ovat aitoja lukuja, ne ovat otettu Ylen tutkimuksesta, joka on päivätty 4.10.2022.

PUOLUEKANNATUS (%)

Lue myös:
Vaalikone 2.0
Taulukoita ja palkkeja - Palkkisimulaattori