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 :/

Slik setter du kartverkets kart bak openstreetmaps

Vi som er opptatt av åpne data ender tidvis om å snakke om kartverket. Det er ikke alltid (særlig noen år tilbake) at kartverket får de peneste adjektivene, men i dag skal jeg trekke fram noe fint.

I openstreetmap (osm) er det fortsatt mye av Norge som ikke er kartlagt fullt ut. Kart er også levende dokumenter, i alle fall de som kan endre seg slik som openstreetmap, så det trengs stadig noen rettelser. Når slike rettelser er vanskelige å tracke med GPS eller tegne for hånd, har openstreetmap et sett med bakgrunner du kan legge bak det du lager i kartet, f.eks. flyfoto.

For Norge er ikke alltid disse flyfotoene og alternativene til osm like gode. Lav oppløsning. Skyer. Uvær. Motgang. Men her kommer altså statkart inn og gir en hjelpende hånd. Ved å velge «custom» og så «edit custom background», kan du lime inn en URL til statkart.no sine kart, og ha disse bak det du mapper. Det er nyttig, presist og gjør at kartverkets proffe data kan komme til nytte i mange andre kontekster.

Her er URL’n du trenger:
http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart&zoom={zoom}&x={x}&y={y}

Jeg har ikke funnet noen liste over hvilke kart som funker (fant dog valgene til Anders Eriksens her, og at tjenestenavnene herfra (uten «wsm.» forran) ser ut til å funke), det er altså parametre som heter ‘layers=’ der jeg har brukt norges_grunnkart i eksemplet over.

Risør i openstreetmap redigeringsmodus
Risør sentrum i openstreetmaps redigeringsmodus. Legg merke til gråe bygg, de er fra statkart, mens de røde er mappede polygoner som blir til bygninger i openstreetmap. Når noen velger å mappe dem da..

Dette er sikkert et kjent knep for ivrige OSM-brukere, men det var nytt for meg. Om du vet hvor jeg kan finne den fulle listen med tjenestenavn som funker, eller andre nyttige knep for en fersk kartmaker, legg gjerne igjen en kommentar under.

Isn’t is nice to have a computer that will talk to you?

OSX har en talesyntese som er morsom kanskje mer enn nyttig. Det er uansett et spennende område der naturlig språk møter teknologi, og jeg ville gjerne teste alle stemmene i OSX for å finne den som kanskje kan brukes i et prosjekt. Her er scriptet fra min lille test:

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.

Ta skjermbilde av en kindle

Slik tar du en skjermdump av en kindle whitepaper.

Jeg blir støtt litt usikker på hva slags kindle jeg har, men det er snakk om en slik en:

Kindle whitepaper, er det det samme som kindle touch? Usikker…

  • Naviger deg til det du ønsker å ta bilde av
  • Legg en finger øverst i høyre (eller venstre) hjørne av skjermbildet, og en finger i venstre (eller høyre, slik at det diagonalt matcher den andre finger’n din
  • Legg merke til at skjermen blinker en gang, dette viser at bildet tas
  • Koble til kindle’n til en pc/mac med USB og finn skjermbildene som .png-bilder liggende på kindle’n

Slik ser det da ut når jeg ok bilde av Anders Hofseths blogpost* fra nrkbeta:

* Jeg overfører nettinnhold som blogposter til kindle’n (gratis) med firefox innstikket «kindle-it» fra fivefilters.