A little tool for making pictorial unit charts in Illustrator

Pictorial unit charts, like the ones Isotype made famous, is a nice alternative to conventional bar or area diagrams. However, actually making them if you’re working in Illustrator can require a good deal of handiwork and you might easily end up with the wrong amount of little guys when copying and pasting.

To make desinging pictorial unit charts a bit simpler I ended up writing a little snippet of JavaScript code that works with the neat Illustrator plugin Scriptographer. We decided to share it here, as some of our readers might find it useful.

Download unitsymbol-copy_selected.js here. When you first start Scriptographer, you will be presented with a dialogue window asking you to choose a folder for your own scripts. Put unitsymbol-copy_selected.js in that folder, so that Scriptographer can find it. Note that this is a very quickly made tool without much finesse, so feel free to improve! Anyhow, here’s how it works:


1. First you select a shape or symbol that you want to multiply (it also works with groups). I find working with Illustrator’s symbols to be very useful, since then it’s easy to change all individual instances of the same symbol at once when you update your unit figure after making a hundred copies.

2.Choose the script in the Scriptographer panel and press the play button to activate it. If you want to have a look at the code, just double-click the name of the script.

3. A dialog called Parameters appears. Here you set the number of columns and copies of the symbol (the value you will visualize). X- and Y-spacing are measured in points from the bounding box of the symbol, so if you want  squares of 10 pt with 2.5 pt spacing between them you input 2.5 in the X- and Y-spacing fields.

Press create and you’ll see the specified amount of copies appear next to your original ‘source’ symbol.

Todos concerning the usability would be to have it accept different units for the spacing, and maybe it should also to give a choice of where to place the symbols. If one would want to make it really clever one would make it possible to update the parameters of created charts, but I suspect that might require writing a whole new plugin, so that’ll be something for another day.

Käsittämättömän kuvaaminen

Teksti on julkaistu lyhennettynä Grafia-lehdessä.

Informaatiomuotoilun voima on asioiden näyttäminen niiden todellisissa mittasuhteissa. Se on verrattain helppoa silloin, kun esitettävät asiat ovat jollain tavalla katsojan arkikokemukseen verrattavia, mutta usein näin ei ole. Valaisivimmat näkemäni esitykset ovat onnistuneet voittamaan käsityskyvyn rajoitukset ja antaneet realistisemman näkökulman asioihin kuin pelkät asiantuntijoiden selitykset.

Kuten tästä dvice.comin kuvasta näkyy, kuuluisan Virgin Galacticin avaruuskoneen lentokorkeus peittoaa saman sarjan kilpailijat, mutta on mainettaan mitättömämpi ainakin verrattuna valtiollisten ohjelmien saavutuksiin.

Yleisimmät vaikeaa mittakaavaa käyttävät esitykset liittyvät avaruuden sijaan tavalla tai toisella talouteen. Vuoden 2008 velkakriisin laajetessa syntyi joukko huonoja uutisia. Niiden myötä ilmestyi uutisiin lukumääriä, jotka ovat satoja kertaluokkia suurempia kuin mitä arkielämässä yleensä kohtaa. Kuukausien sisällä päätettiin satojen miljardien dollarien suuruisten rahamäärien kohtalosta. Pelastuspakettien vastustajat Yhdysvalloissa käyttivät pitkiä puheenvuoroja, jotka vilisivät lukusanoja, joita yleensä käytetään vain tähtitieteessä. Niillä ei kuitenkaan ollut samaa selittävää voimaa kuin hyvillä visualisoinneilla, jotka laittoivat luvut oikeaan asiayhteyteen. Lukijan on helpompi hahmottaa vuoden aikana talouteen kaadetun rahan määrä, kun koko paketti on eritelty ja laitettu vierekkäin maan suurimpien menoerien kanssa kahden vuosisadan ajalta. Tällainen visualisointi on tehokasta ja puhuttelevaa sisältöä ja vaatii suunnittelijalta samaa vastuuta kuin toimittajalta.

Vaikka esitys saisi olla visuaalisesti hiotumpi, se auttaa hahmottamaan elvytyspaketin suuruutta. Kuva ei aivan ehtinyt Bailout Nation -kirjan kovakantiseen painokseen, mutta se osoittaa tekijöidensä kyvyn esittää asiat ymmärrettävässä asiayhteydessä.

Toinen ihmiselle vaikeasti hahmottuva asia on todennäköisyys (tähän lottoamisenkin suosio perustuu). Olemme luonnostamme taitamattomia arvioimaan harvinaisten tapahtumien todennäköisyyksiä. Seuraavanlaisia kuvia voisi jakaa kaikille luulotautisille ja kroonisesti pelokkaille.

(klikkaa päästäksesi suurempaan versioon)

Hyvän viestinnän ohjeen mukaan ihmisen havaintokyky on kaventuva ja tarkentuva: havaitsemme suuripiirteisesti laajoja kokonaisuuksia ja niiden pienempiä osasia yksityiskohtineen, mutta emme kumpaakin yhtä aikaa. Kirjoittajalle tämä tarkoittaa, että uudet asiat esitellään aloittamalla yleisistä piirteistä ja päätymällä lopulta yksityiskohtiin. Informaatiomuotoilussa sama johdattelu tehdään käyttämällä kuvan sisäistä visuaalista kielioppia. Siinä yleinen taso on se, jonka lukija huomaa ensinäkemältä. Se määrittää mittakaavan ja esitettävän tiedon eri tyypit. Yksityiskohtaisin taso näyttää tarkimman tiedon, jonka parhaassa tapauksessa voi suhteuttaa saumattomasti kuvan muihin osiin. Pelkkä datatiheys ei tee kuvasta arvokasta, sillä ilman yhdistäviä vinkkejä se on vain tiedon saareke. Edellä näytetyissä esimerkeissä johdattelu yleisen ja yksityisen välillä tapahtui yksinkertaisesti visualisoimalla luvut eri asiayhteyksiin. Saman voi tehdä monipolvisesti, kuten itse kokeilin tässä puretussa aikajanassa, joka havainnollistaa geologisen ajan jakotapaa:

 

(kuva suurenee klikkaamalla)

Harmittavan yleinen tapa graafikoilla on tekstin välttäminen informaatiomuotoilussa. Ehkä kyse on liiasta itsevarmuudesta (tai turhamaisuudesta). Tekijä luottaa kuvakerrontansa vahvuuteen niin paljon, että tekstin käyttäminen tuntuu luovuttamiselta. Ehkä kyseessä on myös jonkinlainen tiedostamaton reviirijako kuvittavan ja kirjoittavan väen välillä. Joka tapauksessa on harvoin mitään oikeaa syytä olla käyttämättä tekstiä osana esitystä. Uudet asiat on joka tapauksessa avattava sanallisesti, ja parhaiten se onnistuu kun selitys on osa kuvitusta. Typografian hierarkiaa luovat keinot ovat kuvallisia kerrontatapoja muiden rinnalla.

Kun visuaalinen kielioppi on johdonmukainen ja helppo hahmottaa, sitä voi jatkaa eri mittakaavojen lisäksi eri kuviin. Kun samaan raamiin laadittuja kuvallisia tietokokonaisuuksia järjestetään kuvasarjaksi, niitä vertaamalla voi nähdä pieniäkin muutoksia lukumäärien ja muiden arvojen välillä. Edward Tufte käyttää näistä nimitystä small multiples, toistokuvio. Tämän keinon vahvuus vaikeasti hahmotettavien asioiden kuvaamisessa on sen kyky kertoa muutoksen laatu ja määrä hyvin tarkasti. Tällaiset esitykset näyttävät sommittelunsa puolesta hieman sarjakuvilta, ja niissä toimii lukemisen johdattelun kannalta pitkälti sama logiikka. Tufte on sitoutunut pelkistettyyn ja hienovaraiseen esittämiseen ja perustelee mieltymyksensä hyvin, mutta sarjakuvakerronnan keinoilla olisi paljon annettavaa informaatiomuotoilulle. Etenkin aikasarjaan järjestetyissä kuvissa sarjakuvateoreetikko Scott McCloudin ohjeet ruutusommittelusta tekisivät esityksistä parempia. Ne ovat yhtä avartavaa luettavaa kuin mikä tahansa informaatiomuotoilun teorian klassikoista, mutta ikävä kyllä yhtä huonosti saatavilla suomeksi. Hänen nettisivunsa ovat kuitenkin hyvää luettavaa kaikille graafikoille. McCloud jakaa ruutuvaihdosten tyypit kuuteen luokkaan riippuen ajallisen ja tilallisen muutoksen määrästä ruutujen välillä. Hetkestä hetkeen tapahtuva muutos on näistä välittömin, kun taas suurin muutos vaihtaa kohtauksen tapahtumapaikan ja -ajan täysin. Mikään teoria ei tietenkään korvaa kokeneen suunnittelijan visuaalista rytmitajua, mutta ruutukerrontaan liittyy yllättäviä ja helppotajuisia lainalaisuuksia, joita avataan lyhyesti kirjassa Sarjakuva – näkymätön taide.

Tilastografiikassa mitta-asteikon yhdenmukaisuus on selkeyden kulmakivi. Siitä tulee kuitenkin rasite, kun esitetään yhdessä kuvassa täysin eri kertaluokkien lukuja. Tällaisiin tarkoituksiin ei ole sellaisia valmiita ratkaisuja, joita muut kuin asiantuntijat osaisivat lukea. Tämä ei estä hyvää tarkoittavia valistajia yrittämästä. Välillä suurelle yleisölle tarkoitettuihin julkaisuihin eksyy jopa tilastokuvia, joissa käytetään logaritmista asteikkoa. Ne kertovat tekijöiden oppineisuudesta, mutta harvoin avaavat sisältöä lukijalle. Eri mittakaavojen asioita vertailtaessa onkin välillä luovuttava yhtenäisestä mitta-asteikosta. Rinnastus on silti mahdollista, jos muut kuvalliset mittarit ovat yhtenäiset. Väri on tässä yleinen apu, samoin kuin typografinen hierarkia. Isotype-kuvista tutut yksikkösymbolit ovat myös tapa kuvata lukumääriä vertailukelpoisesti. Kun jokainen symboli on suunniteltu hyvin skaalautuvaksi, rinnastettavilla kuvilla voi olla suurikin määrällinen ero. Mittakaavaongelman ratkaisemiseksi osiin purettu kuva vie usein enemmän tilaa ja esittää edelleen saman datamäärän, mutta tiheyden menetystä korvaa sen saama kerronnallinen arvo. Vaikka infokuvan ei pidäkään olla kuvitusta, tällaiset koostetut esitykset ovat usein esteettisestikin kiinnostustavia.

Vaikeasti hahmotettavien asioiden tulkitsemisessa kuviksi pelkät äärimmäiset mittakaavat eivät ole ainoa ongelma. Suunnittelijan oma ymmärrys aiheesta on kapein pullonkaula. Parhaissa esityksissä tekijä on hankkinut vähintään perustiedot aiheesta ennen kuvan luonnostelua, mikä näkyy oivaltavina ja genren rajoja rikkovina ratkaisuina. On parempi, että aineistoon perehtyy graafinen suunnittelija kuin että kuvan tekisi visuaalisuuteen perehtymätön aiheen asiantuntija. Moni tärkeä uutinen on joka tapauksessa vaikea käsittää, ja hyvä kuva avaa sen sisällön tavalla, johon pelkkä teksti ei kykene.

Hymynaamoista ja pelkistämisestä

Jo vastasyntynyt lapsi osaa tunnistaa kasvoja. Ihmiskasvojen lisäksi pieni lapsi erottaa eläinten kasvonpiirteitä paremmin kuin aikuiset ja tunnistaa jopa hyvin abstraktin ”hymynaaman” kasvoja esittäväksi kuvaksi. Tämä kaikki on toki sinänsä kiehtovaa ja kertoo siitä, miten voimakas ihmisen luontainen kyky tunnistaa kuvioita on, mutta samaan aikaan se myös herättää kysymyksiä. Tarkoittaako se, että lapsi näkee kasvot kuviossa joka koostuu kaaresta ja kahdesta pisteestä, että nämä olisivat jollain tavalla “ihanteelliset” kasvot?

Kysymys liittyy ilmaisu- ja tyylivalintojen merkitykseen tiedon visualisoimisessa. Pelkistetyn, geometrisen ilmaisun perinne informaatiomuotoilun hallitsevana visuaalisena tyylinä on pitkä. Tällaista tyyliä on perinteisesti pidetty objektiivisena ja selkeänä, mikä näkyy edelleen varsinkin varoitus- ja liikennemerkeissä. Tästä hyvä esimerkki on Yhdysvaltain graafisten suunnittelijoiden järjestön Aigan 1970-luvulla kehittämä kansainvälinen opastesymbolijärjestelmä. Usein ajatellaan, että tämä minimalistinen tyyli edustaa suoraa jatkumoa Isotype-perinteelle. Tarkemmassa vertailussa havaitsee kuitenkin, että Gerd Arntzin piirtämät Isotype-hahmot, vaikkakin pelkistettyjä, ovat kuitenkin selvästi ilmeikkäämpiä ja yksityiskohtaisempia. Minimalistisen tyylin juuret ovat pikemminkin sodanjälkeisen kansainvälisen modernismin pyrkimyksessä geometriseen yksinkertaisuuteen.

Onko siis syynä siihen, että lapsille tehdään yksinkertaisia hymynaamoja se, että heidän kykynsä reagoida niihin on kiehtonut havaintopsykologeja ja suunnittelijoita ja myös sattunut hyvin istumaan vallitseviin esteettisiin trendeihin, pikemminkin kuin se, että lapset itse pitäisivät sellaisia erityisen houkuttelevina?

Jatka lukemista ”Hymynaamoista ja pelkistämisestä”

Gerd Arntz Web Archive

Jos Otto Neurath oli Isotypen aivot, graafikko Gerd Arntz oli sen sielu. (Marie Neurath oli sitten ehkä käpyrauhanen, ainakin jos on uskomista Descartesin teoriaan tämän elimen funktiosta sielun ja ruumiin liittymäkohtana. Hänen roolinsa Isotypen ”muuntajana” (saks. Transformator), eräänlaisena väliportaana sisältöasiantuntijoiden ja Arntzin vetämän graafisen tiimin välissä, on kokonaan oman kirjoituksensa aihe, jota Isotype-tutkija Robin Kinross käsittelee blogipostauksessaan.)

Arntz työskenteli osana Isotype-ryhmää 1928–1940. Ennen tätä Isotypen julkaisujen visuaalinen tyyli oli vaihteleva ja työprosessi jäsentymätön. Arntz loi nopeasti ryhmän julkaisuille visuaalisesti yhtenäisen tyylin, standardisymboleihin perustuvan elementtikirjaston ja linoleikkaustekniikan jolla toistuvien piktogrammien monistaminen sujui nopeasti ja vähensi käsityön määrää huimasti. Juuri sopivassa määrin pelkistetyt, kuitenkin edelleen persoonallista lämpöä sisältävät eriväriset pienet lippalakkipäiset ukot, viljantähkät, kuorma-autot, katulamput, ruumisarkut, kaupunkisiluetit ja lukemattomat muut symbolit rakentavat sen jäljittelemättömän ja ajattoman kiehtovan ”Isotype-ilmeen”, joka mm. itseni aikanaan ensi kertaa houkutteli tutustumaan Isotypen maailmaan. Jopa informaatiomuotoiluguru Edward Tufte, joka tunnetaan Isotype-vastaisuudestaan, myöntää ihailevansa Arntzin visuaalista tyyliä. (Tai näin ainakin Robin Kinross sanoo The Transformer -kirjassaan.)

Uransa (joka Isotypen jälkeen jatkui Alankomaiden tilastosäätiössä) aikana Arntz ehti suunnitella n. 4 000 erilaista symbolia. Edustava otos, n. 600 kpl, on skannattu mahtavalle Gerd Arntz Web Archive -sivustolle. Haagin kaupungin taidemuseon ylläpitämä sivusto on hyvin suunniteltu, selkeä ja täynnä kiinnostavaa tietoa Arntzin urasta ja töistä. Sivustolta löytyy myös skannattuna kaikki sata Arntzin Gesellschaft und Wirtschaft – Bildstatistisches Elementarwerk -teokseen tekemää tilastollista esitystä havainnollistavin selitystekstein. (Teos skannattuna kokonaisuudessaan ilman selitystekstejä löytyy täältä.)

Otto Neurath: International Picture Language

Informaatiomuotoilun uranuurtajan Otto Neurathin International Picture Language vuodelta 1937 on alan klassikko ja yksi varhaismmista kirjoista jota aiheesta on kirjoitettu. Hieman yli satasivuisessa, pienikokoisessa kirjasessa selitetään Isotype-järjestelmän perusteet Basic English -selkoenglannilla. Kielivalinta paljastaa, että kirjanen on ajateltu laajalle lukijakunnalle joka ei puhu englantia äidinkielenään ja/tai jonka lukutaidossa on puutteita. Luultavasti ajatuksena on ollut, kuten niin suuressa osassa muutakin Isotypen toimintaa, kouluttamattoman työväestön sivistäminen. Kirja on tuotettu samana vuonna ilmestyneen Basic by Isotypen rinnakkaisteoksena. Basic Englishin rajoittunut sanavarasto (850 sanaa) tekee ironisesti parissa kohdassa tekstistä aavistuksen vaikeaselkoista, mutta kokonaisuutena se on helppolukuinen ja Gerd Arntzin piirtämät erinomaisen selkeät kuvat auttavat viestin perillemenoa.

Kirja löytyy kokonaisuudessaan skannattuna täältä, laatu valitettavasti ei ole valtavan hyvä. Paremmalla laadulla osittain skannattuna (jostain syystä vain vajaa puolet kirjasta löytyy sivustolta) kirja löytyy sekavalta Imaginary Museum -sivustolta.

Lisää Isotype-materiaalia löytyy esimerkiksi mainiosta Fulltable.comista. Readingin yliopiston Isotype-kokoelma on maailman kattavin, mutta sen nettisivuille kuvia on päätynyt kokoelman laajuuteen nähden vähänlaisesti. Tässä tapauksessa laatu korvaa määrää kyllä erinomaisesti. Samalta sivustolta löytyvä Isotype-artikkelikokoelma onkin sitten aivan omaa luokkaansa. Tutustumisen arvoinen on myös Alankomaiden taloushistoriallisen arkiston sivuille koottu laaja linkki- ja kirjallisuuskokoelma Neurathin työstä ja ajatuksista.