Kuutio: Visualisointi

Bret Victorin maailma

28.10.2011 klo 11:16

Törmäsin reaktiivisen Tangle projektin kautta Bret Victoriin, jonka projektit ovat aika kiinnostavia. Victor oli viime vuoden loppuun asti Applella tekemässä prototyyppejä iOs-käyttöliittymistä. Taustaltaan hän on sähköinsinööri.

Tangle pohjautuu reaktiivisen ohjelmoinnin ajatukseen siitä, että datojen välisten dynaamisten yhteyksien ohjelmoinnin pitäisi olla mahdollisimman helppoa. Käyttöliittymässä tämä tarkoittaisi sitä, että kun esimerkiksi jotakin parametrin arvoa muutetaan, kaikkien sitä parametria käyttävien elementtien tulisi päivittyä.

Bret Victor on tehnyt muutakin kiinnostavaa. Hänen Magic Ink -esseessään kuvataan polveilevasti, mikä on nykyisissä käyttöliittymissä ongelmana ja miten niitä tulisi parantaa. Hyvänä ajatuksena esseessä oli, että turhaa interaktiota tulisi välttää (ja sen sijaan, kun mahdollista, keskittyä informaation selkeään esittämiseen – visualisointiin). Esseessä myös lähdetään mukavan lennokkaasti miettimään oppivaa ohjelmointia, hypertekstin historiaa ja niin edelleen.

Tavallaan Victorin pohdintojen idealismi on naiivia. Mutta toisaalta on hienoa, että joku yrittää oikeasti yhdistää eri tyyppisiä, rohkeita ajatuksia käyttöliittymien tekemisestä ja interaktiosta.

Victor vaikuttaa hiukan egomaaniselta ja myös keräilijätyypiltä. Sivuilla on aikajanat siitä, mitä Victor on tehnyt eri vuosina ja tallenteita herran ikivanhoista webbisivuista ja projekteista. Aikajanojen perusteella nyt olisi jonkinmoinen erakkovuosi alkamassa, ilman sosiaalista kanssakäymistä muiden kanssa (vaiko ainoastaan kodin/työn ulkopuolella?).

Luovalle kaverille ei ilmeisesti lopulta NDA:n alla protoilu enää maistunut. Ymmärrän tunteen, mutta ei kai nyt tuon olisi pitänyt olla mikään yllätys?

Vaatimattomasti Victor yrittää myös käydä matematiikan kimppuun kill math projektillaan. Ymmärrän (idealistisen) tuskan. Esimerkiksi lukiossa minustakin tuntui, että matematiikan ja fysiikan opetus ei ollut riittävän visuaalista. Monia konsepteja voisi opettaa hyvillä visualisoinneilla, esimerkiksi: sini ja kosini, integrointi ja derivointi, permutaatiot, newtonin menetelmä, lepo- ja liikekitka ja valon taittuminen.

Zoomooz: zoomauskirjasto Javascriptillä

8.5.2010 klo 14:06

Sain vihdoinkin perjantaina FrozenRails-loppupresiksen aikana Zoomooz-Javascript-kirjaston sellaiseen kuntoon, että kehtasin laittaa sen verkkoon jakoon. Kirjaston avulla voi zoomata sivua niin, että tietty html-elementti näkyy täysilevyisenä selainikkunan keskellä. Se toimii Webkitissä ja Firefoxissa.

Koska Firefox ei tue vielä css-transformaatioiden animointia, vaati Firefox tuki jonkin verran javascript-magiaa. Muutenkin oli hauskaa pyöritellä matriiseja javascriptissä. Ihme kyllä, javascript-temput tuntuisivat myös toimivan! Lähdekoodista voi ihmetellä tarkemmin, mitä kaikkea tuolla tapahtuu.

Tämä on myös ensimmäinen open source -kirjasto, jonka olen tehnyt. On kiinnostavaa nähdä, olisiko tällä käyttöä myös jollekin toiselle.

Ääntä nuottiriveillä

26.9.2009 klo 14:39

Voisi tehdä visualisaation, jossa biisien spektrogrammeja olisi plotattu tyhjien nuottirivien päälle.

Värikkäitä osakkeita

31.8.2009 klo 15:08

Tein uuden version osakekurssien visualisoinnista. Kannattaa katsoa kuvan isompi versio (pdf). Ideana on, että käppyrät on normalisoitu suhteessa keskiarvoon. Taustalla näkyy harmaina kaikki S&P 500 -osakkeet ja etualalle on valittu kolme alaa (IT, Household ja Finance) sekä jokaisesta niistä yksi osake (Apple, Wal-Mart, Bank of America).

Tätä plottaillessa tajusi taas, kuinka melkein kaikessa visualisoinnissa on olennaista näyttää, miten yksittäiset datapisteet saavat arvoja suhteessa muihin datapisteisiin. Monesti tämä onnistuu parhaiten keskiarvoon vertaamalla.

Kuva on tehty Pythonilla Applen Core Graphics -rajapintoja käyttäen. Muuten olisin käyttänyt Cairoa, mutta jotenkin CMYK-värien tuen puuttuminen tuntui rasittavalta.

Mitä kuvasta sitten näkee? Visualisoinnin pitäisi kyetä vastaamaan kysymyksiin. Lähtökohtana graafille on ollut kysymys: “Mitä voidaan nähdä osakkeiden käyttäytymisestä näyttämällä iso määrä osakedataa samassa näkymässä?” Lopulta eri versioita tehdessä huomasin, että perinteisestä graafiplotista tulee aika epäselvä kun dataa on paljon. Esimerkiksi satojen graafiviivojen värikoodaaminen ei kerro kovinkaan paljoa, sillä eri värisiä käppyröitä on niin paljon, että sekamelska näyttää lähinnä lankakerältä.

Seuraavia asioita kuvaajasta kuitenkin voi nähdä:

  • Vuoden 2008 lopusta lähtien finanssialan osakkeet ovat pudonneet suhteessa muihin ja Bank of America on ottanut iskua selvästi finanssialan keskiarvoa enemmän.
  • Ruualla ja kotitaloushyödykkeillä (vihreä) on mennyt hyvin suhteessa muihin osakkeisiin ja Wal-Martilla jopa poikkeuksellisen hyvin. Suhteellinen kuvaaja näyttää Wal-Martin menestyksen absoluuttista kuvaajaa paremmin.
  • Applen osakkeen arvo on kasvanut tasaisesti suhteessa muihin osakkeisiin koko vuoden 2009 ajan, mutta silti sen keskimääräinen menestys on ollut vain hieman yli muun IT-alan.
  • Osakkeiden hajonta keskiarvon ympärillä kasvaa vuoden 2008 lopussa, eli erot paremmin ja huonommin menestyvien osakkeiden välillä suurenee (tämä näkyy selvemmin edellisen postauksen kuvasta). Tämä korjausliike näyttäisi kuitenkin loppuvan 2009 tammikuussa, josta eteenpäin osakkeiden hajonta pysyy suurin piirtein samana.

Harmaiden, taustalla olevien käppyröiden funktiosta en ole aivan varma. Ainakin ne antavat jonkinmoisen fiiliksen siitä, millä välillä graafin arvot tapaavat liikkua.

Graafi olisi parempi, jos sitä voisi käyttää interaktiivisesti. Silloin olisi helppoa kursorilla kokeilla, mitä eri osakkeet ovat ja verrata niitä toisiinsa.

Osakedataan voisi kokeilla myös DNA:n visualisointiin käytettävää heatplotia. Siinä ei tulisi ongelmaa päällekäisistä graafiviivoista, mutta siitä voisi silti saada jonkinmoisen yleiskuvan osakkeiden käyttäytymisestä ryhmittelemällä samalla tavalla käyttäytyvät osakkeet lähelle toisiaan.

Osakkeiden visualisointia

25.8.2009 klo 16:27

Tein pikaisen kokeilun field-grafiikkaympäristössä osakkekurssien visualisoimiseksi. Alkuperäinen idea osakekurssien visualisoinniksi tuli pari kuukautta sitten.

Yllä kaikki S&P 500 -indeksin osakkeet plotattuna päällekkäin alkaen 1.1.2008 ja päättyen tänään. Data on haettu Yahoon webservicellä ja lista indeksin firmoista on täältä. Osakkeiden kurssi on normalisoitu siten, että arvot on jaettu osakkeen alkuarvolla.

Muokattu 26.8.2009. Korjasin koodin ja vaihdoin kuvan uuteen. Graafin asteikko on nyt myös lineaarinen ja alkupäivä on 1.1.2008. Seuraavaksi voisi alkaa tuunailla tästä hienompaa. Vertailun vuoksi, buginen kuva on täällä.

Pörssikurssien visualisointia

3.6.2009 klo 15:14

Voisi olla hauskaa visualisoida osakedataa aikajanalla siten, että lähtöpisteessä kaikki osakkeet olisivat 100%:ssa ja sitten ne hiljalleen erottuisivat toisistaan menestyksensä mukaan. Näinhän muutamia osakkeita saa verrattua vaikkapa Google Financella. Ajatuksena oli, että piirtäisi samaan kuvaan vaikkapa kaikki Helsingin Pörssin tai NASDAQ:n osakkeet.

Lisäksi voisi kokeilla klusteroida osakkeita sen mukaan, mitkä tapaavat nousta tai laskea samoina päivinä. Jos olisi laiska, tähän voisi käyttää esimerkiksi verkkoklusterointimenetelmiä tai vaikkapa LDA:ta (sanat ovat osakkeita ja dokumentit päiviä jolloin osakkeet nousevat tai laskevat). Näitä osakeklustereita voisi sitten esittää graafissa eri värein.

Oikeastaan kurssien plottailu olisi helppoa jos vain saisi datan jostakin. Jenkkiosakedataa löytyy helposti verkosta, mutta suomalaisten osakkeiden historiallinen data pitäisi varmaan scrapettaa jostakin verkkopalvelusta.

Yahoolla on helppo web-service, jolla saa historiaalista osakedataa. Siihen löytyy myös valmista Python-koodia. Tämä koodiesimerkki ja sen kommentit näyttivät myös toimivilta.

Väripainotettu time-lapse

3.6.2009 klo 14:20

Olen katsellut viime päivinä sitä, kuinka aurinko kiertää meidän pihan yli ja heittää varjon eri aikoihin eri suunnista.

Voisi olla kiinnostavaa ottaa time-lapse kuvasarja pihasta vaikkapa tunnin välein ja sitten värjätä kuvat siten, että aamun kuvat olisivat punaisia, illan kuvat sinisiä ja päivän kuvat jotain siltä väliltä. Näiden yhdistelmänä saisi yhden kuvan, jossa eri alueet olisivat värjäytyneitä joko punaisiksi tai sinisiksi riippuen siitä, onko niitä valaissut aamu- vai ilta-aurinko.

Käsin piirrettyjä karttoja

3.6.2009 klo 14:14

Olisi hauskaa tehdä palvelu, jossa visualisoitaisiin karttoja uusin tavoin. Siis Google Maps -tyylinen saitti, jossa kartat eivät olisi tylsän karuja, vaan näyttäisivät vaikkapa merirosvokartoilta, 70-luvun modernilta sci-filtä tai jollakin muulla tapaa tyylitellyiltä.

Tällaisen voisi varmaankin toteuttaa Mapnikia tuunaamalla OpenStreetMapin datalla. Tuunaamista pitäisi kuitenkin tehdä jonkun verran, sillä Mapnikin perusrenderöinti perustuu siihen, että renderöijälle annetaan postscript-tyylisiä piirtokomentoja (“piirrä kolmen pikselin paksuinen musta viiva pisteestä x pisteeseen y”), minkä abstraktiotaso olisi liian matala hienojen karttojen tekemiseen. CloudMaden työkaluilla voi jonkin verran tuunata karttojen ulkoasua, mutta oikeastaan haluaisin tehdä vielä jotain selvästi rikkaampaa. Toinen vaihtoehto olisi tuoda vaan karttadata vaikkapa osm2pgsql-työkalulla tietokantaan ja sitten tehdä datalle aivan oma renderöijä.

Karttojen hienoa piirtämistä ei ole akateemisellakaan puolella tutkittu vielä turhan paljon — aiheesta voisi saada aikaan vaikkapa väikkärin. Berkeleyn visualisointilabrassa on tehty isometrisiä turistikarttoja. Stanfordissa on tehty kahdeksan vuotta sitten automaattisesti reittikarttoja.

Sitten vaan merirosvokarttapalvelu pystyyn, josta painettuja karttoja voisi ostaa vaikkapa viiden euron kappalehintaan tai t-paitoina. Palvelun voisi suunnata lapsille ja geocachettajille!

Oho, joku on hahmotellut jotain tämän suuntaista mutta vaan perus-Flash-filttereitä käyttäen. Oikeassa piraattikartassa pitää olla meressä lohikäärmeitä!

Erilainen samanlainen — uusi versio matka‑aikakartasta

10.3.2009 klo 22:37

Tein vielä uuden version matka-aikakartasta (ks. aikaisempi postaus). Kuvaa klikkaamalla pääsee isompaan versioon. Kuvassa valkoiset käyrät vastaavat 10, 20, 30, 40, 60 ja 90 minuutin matka-aikoja.

Python-skripti graafin piirtämiseksi matka-aikadatasta (graafi on vielä tämän jälkeen yhdistetty Googlen karttaan fotarissa):

import pylab, scipy, numpy, csv
import matplotlib.pyplot as pyplot
from scipy import signal, ndimage

# setup constants

MAX_VALUE = 120
SCALING = 10
SMOOTHING = 50
CONTOUR_LEVELS = [10,20,30,40,60,90]

# import data

fileName = 'routeDataGrid.raw'
w,h = 90, 80

sr = csv.reader(open(fileName), delimiter=',')
x,y = 0,0
Z = numpy.zeros((h,w))
for y, row in enumerate(sr):
   for x, item in enumerate(row):
      Z[y][x] = int(item)

Z = Z[::-1]
Z[Z>MAX_VALUE]=MAX_VALUE
Z[Z==-1]=MAX_VALUE

X, Y = numpy.meshgrid(numpy.arange(w), numpy.arange(h))

# interpolate

newx,newy = scipy.mgrid[0:1:complex(0,h)*SCALING, 0:1:complex(0,w)*SCALING]
coords = numpy.array([newx*(h-1), newy*(w-1)])

Z_large = ndimage.map_coordinates(Z, coords, order=3)
X_large, Y_large = numpy.meshgrid(numpy.arange(w*SCALING), numpy.arange(h*SCALING))

# smooth (this would be faster with fft)

def gauss_kern(size, sizey=None):
   size = int(size)
   if not sizey:
      sizey = size
   else:
      sizey = int(sizey)
   x, y = scipy.mgrid[-size:size+1, -sizey:sizey+1]
   g = scipy.exp(-(x**2/float(size)+y**2/float(sizey)))
   return g / g.sum()

G = gauss_kern(50)
Z_smooth = scipy.signal.convolve(Z_large, G, mode='same')

# plot contour

figsize=(numpy.array(Z_smooth.shape)/100)[::-1]
pyplot.rcParams.update({'figure.figsize':figsize})
pyplot.figure()
pyplot.axis('off')
pylab.imshow(120-Z_smooth, cmap=pyplot.cm.jet)
pyplot.contour(X_large, Y_large, Z_smooth, CONTOUR_LEVELS, colors='white', linewidths=1.5, linestyles='solid', antialiased=True)
pyplot.subplots_adjust(bottom=0.0, top=1.0, left=0.0, right=1.0, hspace=0.0, wspace=0.0)
pyplot.savefig('mapimage.pdf', format='pdf')

En ole vielä täysin tyytyväinen väritykseen. Idea valkoisista ääriviivoista tuli Chris Lightfootin toteuttamasta Lontoon matka-aikakartasta. Silti, ehkä vastaava kuva ilman ääriviivoja (mutta eri värisillä alueilla) olisi selkeämpi.

Chris Lightfootin ja Tom Steinberg kartasta on myös tehty interaktiivinen versio vuonna 2007. Siinä voi valita, kuinka pitkän työmatkan on valmis tekemään ja paljonko on valmis maksamaan asunnosta — kartta näyttää kaikki alueet jotka vastaavat näitä vaatimuksia.

Kiinnostava sivuhuomio: interaktiivisen kartan toteutukseen osallistui myös Tom Carden monia hienoja juttuja tekevästä Stamen Design -toimistosta. Tom Carden on tullut vastaan hienojen Processing-härpättimien tekijänä. ja joskus olen vilkuillut myös hänen Delicious-linkkilistaansa.

Julkisella kaupunkiin

17.2.2009 klo 10:28

Kuvasta näkee, kuinka pitkään eri pisteistä kestää tulla Stockan kellon alle. Kuvaa klikkaamalla pääsee isompaan versioon. Kiinnostavaa, kuinka nopeat matka-ajat kertyvät tiettyjen valtaväylien varrelle, kun taas niiden ulkopuolelta matka-ajat kasvavat nopeasti hyvin pitkiksi. Oranssi tarkoittaa alle 40 minuutin matka-aikaa, punaisen sävyt 40-50 minuuttia ja lilat/siniset yli 50 minuuttia.

Me tehtiin Annin kanssa vuonna 2004 koulukurssille ohjelma, joka hakee reittioppaasta matka-aikoja eri paikoista pääkaupunkiseudulla tiettyyn pisteeseen ja piirtää niistä kartan. Ylläoleva kuva syntyi, kun kaivoin viime viikolla koodin naftaliinista, ajoin uuden ajon ja siistin vähän svg-outputtia standardinomaisempaan muotoon. Kuvassa matka-ajat on piirretty Googlen karttadatan päälle.

Datan julkisuus

Sääli, että Reittiopas ei tarjoa julkista API:a, jonka päälle tämäntyyppisiä kyselyitä voisi tehdä. Sen avulla voisi tehdä mahtavia integraatioita, vaikkapa yhdistämällä matka-aikadatan Oikotie-palveluun.

Jenkeissä esimerkiksi on lainsäädäntö, jonka vuoksi julkishallinnon datasetit pitää tarjota monesti ilmaiseksi kaikille. Tämä tuo datan tehokkaaseen käyttöön. Briteissä on jo muutaman vuoden ajan lobattu avoimen datan puolesta.

Suomessakin pitäisi aloittaa kampanja datan vapauttamiseksi. Tämä vaatisi kyllä aika paljon vaivaa ennenkuin viesti menisi päättäjille perille. Tai sitten pitää vain odottaa, että Google toteuttaa Reittiopastoiminnallisuuden maps-palveluunsa.

Kartan väritystä voisi parantaa vielä, aika hieno esimerkki olisi vastaava visualisaatio Lontoossa.

Kartoista ja heat mapeistä lisää

Postaus alkuperäisestä ideasta vuodelta 2003.

Walkscore näyttää kartalla, kuinka kävelykelpoinen tietty alue on.

Heat mapien piirtäminen Flashilla.

Maailma amerikkalaisten silmin

11.12.2008 klo 0:32

Tein vielä uuden version maailmankartan piirtävästä härpättimestä. Tällä kertaa jokaisen kaupungin osalta tehdään Google-haku, jossa haetaan “is * for its”-tyyppisiä kuvauksia kaupungeista.

Lopputulos kuvastaa miten jenkit — ja englanninkieliset yleensäkin — näkevät maailman eri kaupungit.

Kartta adjektiivein

9.12.2008 klo 19:04

Piirtelen uutta versiota kahden vuoden takaisesta kartasta.

Tällä kertaa ideana on, että haetaan jokaisen kaupungin osalta Wikitravel-sivustolta ensimmäisenä kaupungin kohdalta löytyvä adjektiivi ja sitä seuraavat substantiivit. Näistä sitten piirretään kartta. Sivujen hakemisen tein tällä kertaa Pythonilla ja adjektiivien tunnistamiseen käytin mainiota NLTK-kirjastoa.

NLTK:n käyttöön on hyvä tutoriaali Stream Hacker -blogissa ja myös NLTK:n oma Taggers-opas on hyvä.

En ole vielä aivan tyytyväinen tähän versioon kartasta. Katsotaan jos vaikka jaksaisin vielä parannella sitä fontin, kernauksen ja teksteissä olevien pikkubugien osalta. Myös ylösalaisin oleville teksteille ja pitkille riveille voisi tehdä jotain.

Tällä kertaa dataa on kerätty 2445 suurimmasta kaupungista Geonames-datajoukossa.

Tähän liittyen verkossa tuli vastaan Dorothy Gambrellin kartat Craigslist Missed Connections -palstalta. Gambrellin mainioita visualisointeja on Very Small Array -blogissa, mutta tunnetumpi lienee hänen Cat and Girl -sarjakuvansa.

Inspiraatiota kirjoista

30.10.2008 klo 13:16

Eilen oli pieni joulu, kun sain kirjapaketin Amazonilta. Paketissa oli kuusi kirjaa, joiden ajattelin voivan inspiroida uusiin ajatuksiin. Meidän lähiposti on huoltoasemalla, joka on kätevästi auki ympäri vuorokauden. Niinpä iltakävelyn jälkeen eilen puoli kymmeneltä pääsin avaamaan pakettia.

1. The Works: Anatomy of a City

Kirja vaikuttaa kiinnostavalta, hyvin kuvitetulta teokselta Sim City -tyyppiseen kaupunkirakentamiseen ja voisi tuoda uudenlaisia inspiraatioita sekä vaikuttaa siihen, kuinka katselee maailmaa.

2. The Elements of Typographic Style

Typografian perusteos, joka kyllä pitää löytyä kirjahyllystä.

3. Maps and Civilization: Cartography in Culture and Society

Kartta-aiheinen kirja, joka on mainittu melko kiinnostavassa Informaatioarkkitehtuuri-presentaatiossa. Kirjassa on erilaisia historiallisia karttoja ja muuta materiaalia. Kirja on myös Tuften lukulistalla.

4. How Buildings Learn: What Happens After They’re Built

Kirja siitä kuinka rakennusten käyttö muuttuu sen jälkeen kun ne on otettu käyttöön. Ennen-jälkeen-kuvia, jotka näyttävät miten yksittäiset rakennukset ovat muuttuneet vuosien saatossa.

5. You Are Here: Personal Geographies and Other Maps of the Imagination

Karttoja voi tehdä esimerkiksi sosiaalisista suhteista, konsepteista, yms. Tässä käsitelty kartografiaa laajasti. Kirjassa tuntuisi olevan lähinnä kuvia ja sisältö on jotakin mitä voisi olla vaikkapa Strange Maps -blogissa.

6. Mark Lombardi: Global Networks

Näin muistaakseni Lombardin verkkokuvia, tai ainakin jotain hyvin samankaltaista, Venetsian biennaalissa vuonna 2001. Kiinnostavaa, mikä kaikki voi olla taidetta. Ja nämä käsinpiirretyt verkkovisualisoinnit ovat hienoja!

Lisää väripikseleitä

15.6.2008 klo 20:36

Jaakko kyseli aikaisemman postauksen kommenteissa voisiko kromatisiteettidiagrammia kokeilla jossain itse. Tein kaaviosta nyt applet-version, johon voi syöttää oman urlin ja piirtää sen pikselit ruudulle. Koska urlien hakeminen ei onnistu perus-appletilla, on tuo nyt itsesignattu ja herjaa turvallisuuskysymyksellä avatessa.

Lisäys 24.6.2008:

Laitoin verkkoon myös lähdekoodin, jota voi muokata haluamakseen. Koodi on perinteistä harrastekoodia: se ei ole kaunista eikä kommentoitua, mutta kyllä siitä pienellä ihmettelyllä varmaan saa selvää.

Koodin tviikkailu vaatii Processingin (Kuutio) ja controlP5-kirjaston, ei juuri muuta.

Pikseleiden visualisointia

18.5.2008 klo 20:19

Tein härpättimen Processingilla, jolla kuvan pikselit voi projisoida CIE XYZ-kaavion pinnalle. Tässä yllä on Joan Miró Harlequin’s Carnival -maalauksen pikselit (maalauksesta lisää Wikipediassa). Kuva on eräänlainen “Kromatisiteettidiagraammi” — onkohan suomennos oikea?

Kiinnostavaa kuvassa on, kuinka pikselit jakautuvat selvästi kasoihin: on valkoinen kasa, vaaleanruskea kasa, sininen pino ja keltaiset ja punaiset väripisteet. Lopputulos muistuttaa maalarin palettia. Sopivasti värejä tältä paletilta valitsemalla olisi voinut maalata maalauksen.

Koodin pohjana käytin Dave Bollingerin funktioita jotka pohjautuvat suoraan EasyRGB:n pseudokoodeihin. Hevosenkengän ääriviivapisteet löytyivät täältä.

good buys on software pirodr! 666