Kategori: Design

Fra SSB til SVG

I denne posten viser jeg hvordan du lager et fargerikt kart, som fargelegges med data fra data.ssb.no.

jupyter bare dukket opp. Jeg brukte Ipython tidligere, og har hatt et øye på utviklingen, men plutselig ble det like naturlig å skrive python i jupyter som noe annet sted. Hovedgrunnen tror jeg er fordi det er så interaktivt. Hver celle kan evalueres. Det er lett å «flytte ballen» framover, ved å sjekke at alt fungerer opp til punktet jeg jobber nå, og eksperimentere derfra. Det låner seg god til eksperimentell analyse, men også til å lære kode.

En annen ting jupyter gjør elegant er å vise fram datastrukturene. Pandas kanskje mer enn alt annet. Bilde under viser toppen av en dataframe, som hentet fram med df.head()

pandas dataframe i jupyter
pandas dataframe i jupyter

Andre strukturer er ikke like elegant, men som open source programvare, er det bare å utvide der du trenger. Det er det noen som har gjort med geografi. Jeg snubla over dette lille rammeverket chorogrid, som lager SVG-kart over USA, som kan farges av data du trenger å se som bilde. Canada og Europa-kartet kan chorogrid også tegne. Den kan gjøre statene om til firkanter, og heksagoner også. Dette er nyttig når areal og avstand ikke er viktig.

Chorogrid eksempler
Chorogrid eksempler

Så jeg brukte (alt for mye) tid på å legge til Norge i Chorogrid. Knota masse rundt og lærte nye ting (f.eks. måtte jeg legge til støtte for viewBox i SVG, som var tungt). Jeg fant ingen elegant måte å legge lat/long over i en grid som ser ut som Norgeskartet, selv om dette sikkert finnes. Jeg løste det ved å gjøre hver kommune om til en firkant, og deretter sortere de fra øst til vest og nord til sør. Så manuelt bygge opp noe som likner på Norge. Dermed ligger kommunene bare omtrent der de skal være, ikke perfekt. Gi meg en lyd om dette er noe du ønsker å fikse, så kan jeg peke. Versjonen som er ute nå har 426 kommuner, som er riktig antall kommuner just nå. Det sagt, så måtte jeg justere inn litt da det originale Norgeskartet som jeg bruker er fra wikipedia, og det hadde de 429 kommunene vi hadde for kun kort tid siden..

Inn og utflytting i kommune-Norge 2017K1.
Inn og utflytting i kommune-Norge 2017K1.

SSB på kartet

Bildet over viser et utsnitt av et kart der jeg henter data fra SSB (inn og utflytting av Norske kommuner første kvartal 2017), lager en metric for flytting gitt innbyggertall, slik at Oslo og Utsira (størst og minst i folketall) blir sammenliknbare, og plotter på firkant-Norgeskartet. Du finner en jupyter notatbok med hele leksa her.

Det er snart valg, da kan vi fargelegge med velgresultater :)
Det er snart kommunereform, da må hele kartet lages på nytt :/

Gamestorming – eller kunsten å planlegge kreativitet

I design forskning har vi en klassisk modell for iterativ prototyping ofte bare omtalt som «Hevner et al» (2004), etter forfatter’n. Det store prosjektet i paperet er å vise hvordan et rigid rammeverk kan tillate design som metode for å produsere ny scienc-y science. Den modellen er i stor grad akseptert, også inn i de mer naturvitenskapelige endene av informatikken. Det er på mange måter et viktig paper, selv om det bare er et av flere som bygger bro mellom analytiske (ta ting fra hverandre) og syntetiske (sette sammen, eller lage ting) metoder, fordi det er en anerkjennelse av «designerly ways of knowing» – design er ikke bare det å lage ting, det er en måte å forstå og å utforske verden på. En vei til viten.

Design thinking.
I den mer hum-sam rettede enden av informatikken fikk vi en tid tilbake en ny modell for å lage ting (syntetisk-analytisk), som har alle egenskapene som trengs for å få fart. Buzz! Den kommer med fargerik grafikk, den er fra silicon valley og brukes på Stanford, og den kan appliseres på all verdens problemer: design thinking.

Design thinking prosess

Design thinking er et mye rikere felt enn jeg har tenkt å framstille det som nå, men min reise i litteraturen rundt design thinking fant jeg mye optimisme og rike formuleringer, men som er vanskelig å overføre til praktisk arbeid. Design thinking er en veldig sentrert rundt empati, evnen til å se verden fra andres perspektiv. Dette gjør at det passer fint inn mot den skandinaviske modellen for programvareutvikling, der typisk veldig mange ulike roller forsøkes involvert i utviklingen (ikke bare «brukere», men også fagforeninger, drift, kunder, ulike ansatte, osv., skal ha et ord i laget når arbeid blir pakket inn i kode). Tilbake til vanskelig design thinking: Særlig fant jeg momentet «ideate» (ideering, eller idé-generering/raffinering/produksjon) vrient. Hvordan planlegger man spontanitet, kreativitet og produksjon av nye ideer? Helt konkret takk. Nå. Jeg fant aldri noen tilfredsstillende samling teknikker, øvelser eller framgangsmåter for dette da jeg leste meg opp på feltet, og det har bare gnagd i bakgrunnen siden.

Gamestorming.
Ved en tilfeldighet snubla jeg over en bok som i praksis er just det jeg ikke fant i design thinking verden. En samling teknikker for ideering. Tittelen er nødvendigvis et spill på brainstorming, og tilfører elementer fra spill (gamification) uten å egentlig gjøre prosessen om til et spill. Forfatterne Dave, Sunni & James bruker heller spill-elementene til å forklare hvordan teknikkene er bygget opp av elementer vi også finner i spill. De første 50 sidene av boken forklarer dette på en ypperlig måte, holder seg deilig faktuell og analytisk.

Gamestorming skrytevideo.

Asbjørnsen & Moe.
De neste 200 sidene er rett og slett en samling ideeringsteknikker. Dave, Sunni & James har brukt Brødrene Grimm som forbilde og samlet inn teknikker slik Grimm gjorde med folkeeventyr. Her hjemme ville vi sikkert heller brukt Asbjørnsen og Moe som forbilde. Resultatet er det samme. Et lesestykke, eller kanskje snarere et oppslagsverk, med teknikker for å generere ideer, for å utforske ideer og for å snevre inn ideer. Enkelte av disse er kjent for de fleste, brainstorming, dot voting, story boards, etc. Men her er mange, og du finner helt sikkert noe her du ikke har sett før. Og teknikkene kommer med opphav hvis det finnes noe kjent opphav. Disse teknikkene kommer fra slike bedrifter som folk ønsker å kopiere. Det er teknikkene som har overlevd crash-kurs på konferansehotell, det er teknikker som har vist seg å være nyttige nok til at de overlevde den orale fasen i bedriftene og nå er skrevet ned i samling.

Nå gleder jeg meg til jeg finner et problem som dette kan testes på. Kanskje gamestorming kan løse design-thinking-floken min, og gjøre det litt mer praktisk ved å levere et variert utvalg teknikker. Det var i alle fall befriende å finne denne boken, nå har jeg et sted å slå opp ved behov.

Jeg er også litt nysgjerrig på i hvor stor grad denne typen teknikker er i bruk ute i verden. I design-avdelinger, hippe it-startups og utdannings- og forskningsinstitusjoner joa, men gjør de det sånn i DnB, Statoil eller Kiwi? Tegner menn i dress på whiteboard full av post-its på Stortinget? Min magefølelse er at de ikke gjør det, men at det antagelig hadde hatt noe for seg om teknikkene fra design-verden traff flere aktører i samfunnet. Å skape er å eksponere seg selv, så det er ikke rart at gamestorming ikke er en bestselger hos Narvesen, men det er litt rart at teknikker for å løse vanskelige problemer i fellesskap ikke er mer framtredende enn de er. Verden er jo full av vanskelige problemer som kan løses.

Dopplrs farge-algoritme

At literatur er fargerikt er gitt. At enhver tekst også kan få sin egen, ufravikelige, farge i web-vennlige heksadesimalfarger var derimot en utenkt tanke i mitt hode. Fram til for en tid tilbake, da jeg snublet over optional.is som tok opp materiale (som nå er offline, lenken til optional.is funker dog) som Dopplr’s farge-algoritme.

Tanken er like enkel som den er genial:
$hex_color = sub-string(md5($original_string), 0, 6)
Ta en rekke bokstaver («Oslo», «Roser er røde», ect), lag en md5-hash av denne strengen, spar på de første seks karakterene i denne hash’n og legg på et numbertegn først i den forkortede hash’n. Da har vi en heksadesimalfarge som alltid vil være den samme, med samme streng som input. På den måten vill fargen for «Oslo», «Bergen», «Risør» og «Eirik Stavelin» være ulik hverandre, men alltid den samme uansett hvem som beregner den.

Her er et skjermbilde av noen sitater kjørt gjennom algoritmen, med fargen brukt som bakgrunnsfarge:

dopplrs farge-algoritme i bruk på sitater
Sitater kjørt gjennom farge-algoritmer

For at tekst skal kunne stå samme med fargen sin trengs det kontrast, og også dette har optional.is tenkt ferdig for oss: maximum-color-contrast.
Blant løsningen foreslått fikk jeg best resultater med 50%-kontrast-løsningen, og har brukt den.

Her er snuttene i PHP:
// dopplr color algorithm from: http://optional.is/required/2010/12/13/hls-world-map/
function str2hex($string){
$hex_color = substr(md5($string), 0, 6);
return "#".$hex_color;
}
// Contrast function: http://optional.is/required/2011/01/12/maximum-color-contrast/
// 50% function
function getContrast50($hexcolor){
return (hexdec($hexcolor) > 0xffffff/2)?'black':'white';
}

I javascript ser ting omtrent helt likt ut:
function str2hex(string){
var hex_color = md5(string).substring(0,6);
return "#"+hex_color;
}
men fordrer da et en implementering av md5 er tilgjengelig. Jeg brukte denne etter stackoverflows brukeres anbefalinger.

CSS Diner på Norsk

CSS Diner er et lite spill som forsøker å lære deg CSS selektorer. Spillet gjør dette ved å bytte ut vanlige HTML-tagger (som <div>, <span>, <ul>, osv) med epler og appelsiner, og slik muligens senke terskelen noe for deg som er ukjent for CSS. Å kunne dette er spesielt nyttig fordi denne syntaksen brukes i flere teknologier enn bare CSS, som jQuery, BeautifulSoup og mange andre. Å kunne hente ut ulike deler av et dokument er rett og slett ganske nyttig.

CSS Diner er laget av Luke Pacholski aka @flukeout. Som et eksperiment har jeg oversatt spillet, og du finner en Norsk versjon på stavelin.com/css-diner/.

Screen Shot 2014-04-03 at 16.03.39

Klarer du alle 26 brettene? – Prøv selv!

Samstemmer.net – unoter eller harmonisk taktfasthet?

Samstemmer.net er en prototype på en webapplikasjon som tilrettelegger for analyse av data fro Stortingets datatjeneste (tilgjengelig under Norsk lisens for offentlige data (NLOD)). Websiden oppdateres automatisk når ny data dukker opp i Stortingets data API. Slik nettsiden ser ut i dag er et førsteutkast, basert på leking og utforskning av datasettet. Man vet ikke alltid hva man ønsker seg før man ser det. For å virkelig skapenytteverdi for en bestemt gruppe bør denne brukergruppen selv definere hva som er riktig, viktig og nyttig. Gruppen jeg ønsker å fokusere på er journalister som dekker stortingspolitikk, og neste skritt i prosessen er i intervjue stortingsreportere for å fange opp deres ønsker og behov.

Nytteverdien for brukeren er løpende oppdatert bakgrunnsinformasjon på representanter og aktivitet i Stortinget, basert på den data som eksponeres i APIet. Per i dag utfordrer prototypen med automatisert tilrettelegging av politiske analyser, så vell ved å introdusere en spesialdesignet statistisk metode for å analysere voteringsdata som er noe mer avanser enn hva vi normalt ser bruk i Norsk politikk i pressen og på nett. Ved å fokusere på kvantitative metoder kan websiden holdes oppdatert uten menneskelig interaksjon.

Potensialet for å slå gjennom hos mange brukere er ganske liten, og heller ikke målet. Målet er å nyttiggjøre denne datasamlingen for spesielt interesserte (journalister og for politikk-hoder), denne gruppen har igjen gode muligheter til å nå gjennom til mange.

Journalistikkens samfunnsøkonomiske nytte er omstridt. Dragkampen mellom ”børs og katedral” er både en nøtt for pressen så vell som publikum. Det som kanskje er noe tydeligere er at nyhetsbransjen er inni i en dårlig periode, og trenger innovasjon og effektivisering. Bruk av åpne data og datastøttede metoder kan bidra her. Land som ikke har en fri presse, er land vi ofte helst unngår å sammenlikne oss med.

Siden er designet for å være enkel å navigere og forstå. Enkelte resultater krever noe kunnskap for å tolke, en kostnad som jeg mener er verdt potensielle misforståelser.

Samstemmer.net er ikke ferdig, det er en prototype som enda ikke har noen kravspesifikasjon eller som er brukertestet. Den er likevel fullt funksjonell. Koden er fri og finnes på github hvis noen har alternative ideer eller bruksområder.

Samstemmer.net er et skritt på veien mot en visjon. En visjon i Hans Roslings bilde om et faktabasert syn på verden, en visjon om et Dashboard som viser ”samfunnets status quo” basert på data, og som tilrettelegger for analyser som setter oss i stand til å ta gode rasjonelle valg som informerte borgere.

samstemmer.net from Eirik Stavelin on Vimeo.