Graafilise disaini lähenemisviis Instagrami häälte kaardistamiseks

Stefan Sagmeistri uuringu Happy Film plakatite andmete visualiseerimine

Veel kevadel tõmbas mu huvi Stefan Sagmeistri Instagrami uuringute seeria, mis kogusid tuhandeid hääli, ja sellest ajast alates olen tulemuste loendamiseks ja visualiseerimiseks kasutanud JavaScripti koodi.

Mõne küsitluse jaoks oli huvitav visualiseerida iga hääle geograafiline asukoht ja otsida mustreid maailma eri piirkondadest. Üks neist oli õnneliku filmi erinevatel plakati variantidel.

Plakativersioonid olid mõeldud filmi erinevatele levitamisaladele ja mul oli uudishimulik näha inimeste eelistatud kujunduste geograafilist jaotust.

Hääletajate asukohta hinnati nende viimaste postituste (viimase nädala jooksul) sildistatud asukohtade järgi ja see näitab nende tõenäolist asukohta hääletamise ajal. See tähendab, et ühe filmiposti eelistamine teise ees peegeldab seda keskkonda, milles seda kogetakse, mitte selle järgi, kust valija pärit on või kus ta asub.

Seda kaarti nimetatakse mitme muutujaga heksbiini korpioni kaardiks (ma arvan, et ). Selles on valijad rühmitatud geograafilistesse kastidesse ja värvikoodidesse, mis põhinevad iga plakati häälte arvul (4 muutujat). (See on loodud koos D3.js ja Mapboxiga, kui olete huvitatud, olen allpool lisanud mõned koodilõigud, ressursid ja krediidid.)

Inimesed on trikromaadid ja suudavad tajuda kolme erinevat värvitooni, mis võimaldab lugeda kolmevärvilist värvilegendi. Tavaliselt kasutab choropleth-kaarte ainult üks muutuja, mille lineaarne vahemik on kahe värvi vahel (nt kuritegevuse määr sinisest punaseks). Kolme värvi segamine võib muuta kaardi lugemise keerukamaks ... aga see on täpselt nagu põhikooli värvide segamine! (Või CMYK-värvide segamine trükiprojektil).

Lõpuks otsustasin kasutada CMYK-värvimudelit, kuna neid värve on arvutiekraanil palju lihtsam eristada. Tõenäoliselt on see digitaalse printimise mehaaniliste failidega töötamise eelarvamused, kuid põhivärvide toon on ekraanil eksitav (nt sinisel värvil on punane puudutus, mida võib segi ajada punaste häältega). Kõige tõesem (ja lihtsaim) veebis kasutatav värvimudel on RGB, kuna seda kasutavad brauser ja arvutiekraan natiivselt, kuid nende värvide segamine on minu jaoks ebaloomulik, kuna ma pole seda kunagi nii teinud. Suur tänu Paulile, kes soovitas kõigepealt värve segada.

CMYK on digitaaltrükis laialt kasutatav värvimudel, kus soovitud värvikombinatsiooni saamiseks segatakse neli värvi - tsüaan, magenta, kollane ja võtme must. See töötas minu jaoks suurepäraselt, kuna plakativersioone oli kolm (hääled 1–3), aga ka „mitte ükski ülalnimetatutest“ (hääletus 0).

See tähendab, et rohelist värvi kuusnurgal on umbes pool 1 (tsüaan) ja pool 3 (kollane) hääl ja nii edasi. See tähendab ka, et hall-pruun värv näitab, et eelistusi on vähe, kuna domineerivat häält ei toimu. Hääli oli vähe 0 (võti must), seega erinevus on väike, kuid need muudavad mõned prügikastid pisut tumedamaks. (Trükiüksuste puhul: rikkaliku musta ja musta värvi võtme vahel pole segadust, sest häälte summa "tindi maksimaalne katvus" on ainult 100%, vt allpool toodud märkusi.)

Proovige elavat kaarti ja andke mulle teada, mida arvate!

Kui te pole veel Õnnefilmi näinud, soovitan seda tungivalt:

0110101001110011

D3.js

Kasutasin Asymmetriku voldikut D3 koos kohandatud Mapboxi kaardiga. Asymmetriku pistikprogrammid põhinevad Steven Halli loomingul, mis on olnud ka tõeliselt kasulik viide.

Värvide määramiseks arvutasin iga värvi protsendi iga prügikasti koguarvust.

funktsioon häälSummad (d) {kategooriad = {} var summa = d3.sum (d, funktsioon (andmed) {hääletus = string (data.o.vote) if (kategooriate hääletus) {kategooriad [hääletus] ++} muu { kategooriad [hääletus] = 1} tagasta +1}) tagasta {'hääled': kategooriad, 'summa': summa}}
// ja oma d3.csv (). täitke () ... tagastage getColor (balsoSums (d) .hääled, balsoSums (d) .sum)

CMYK teisendamine on lihtne selle poolest, et see ei võta arvesse ühtegi värviprofiili, kuid teeb trikki.

r = Math.round (255 * (1-c) * (1-k)) g = Math.round (255 * (1-m) * (1-k)) b = Math.round (255 * (1-k)) -y) * (1-k))

Märkus mustade värvide kohta: CMYK on lahutatav värvimudel. Musta saab saavutada nii CMY rikkaliku seguga kui ka musta võtmega (st rikkaliku musta draamaga). Kuna häälte arv ulatub 100% -ni, oleks ka "maksimaalne tindi katvus" ka 100%, mis näeb brauseris välja hallikaspruun ja mida seetõttu ei segata musta võtmega.

Et kaardil ei oleks suuri alasid, kus värv domineerib liiga vähe hääli, eemaldasin prügikastide värvi väheste häältega, kohandades seda dünaamiliselt kaardi suumi põhjal.

var getMinBin = () => {tagasta 2 + 11 / (map.getZoom () + 1)}

Ma oleksin võinud kasutada prügikasti raadiust, mis on võrdeline häälte arvuga, kuid suuremates linnades oli ebaproportsionaalselt rohkem hääli ja mind huvitasid pigem üldised eelistamiskalduvused geograafiliste piirkondade kaupa kui tiheduse jaotus.

Pindala seadmine proportsionaalseks häälte arvuga

Olin saanud ka tagasisidet, et kaardist oleks lihtsam aru saada, kui CMYK asemel oleks põhivärvid (RYB). Üllatuslikult keeruline oli seda tööle panna, sest RYB-ks teisendamine nõudis trilineaarse interpolatsiooni lahendamist ... kuid õnneks oli Dave Eddy selle jaoks juba toreda funktsiooni kirjutanud. Lõppkokkuvõttes eelistasin algset kaarti, kuna leidsin, et primaarne sinine arvutiekraanil loetav näeb välja segavärviga ja ei sobi värvilegendi jaoks hästi.

Sama kaart, RYB värvimudel