Dataformater

Hva

p5js har en del funksjonalitet som lar oss laste og bruke noen vanlige dataformater på en enkel måte. Det finnes en rekke verktøy i Javascript som gjør tilsvarende, men p5js-løsningene er lett tilgjengelige og greie.

Vi skal se på text, json og xml. Alle er en beskrivelse av relutatet av stortingsvalget 2017.

Den sketcen vi skal lage produserer i all sin enkelhet dette:

Utgangspunktet er resultatene fra stortingsvalget 2017. Vi leser inn dette i tre formater og skriver en kolonne for hvert datasett.

Sketchen er slik:

var jsonValg;  
var csvValg;
var xmlValg;
function preload(){
    jsonValg=loadJSON("data/valg.json");
    csvValg=loadStrings('data/valg.csv');
    xmlValg=loadXML('data/valg.xml');
}
function setup() {
    var canvas = createCanvas(450, 250);
    canvas.parent('canvasHere');
    fill(0);
    textFont("SansSerif",14);
}
function draw() {
    background(255);
    showJsonData(jsonValg,0);
    showCsvData(csvValg,150);
    showXmlData(xmlValg,300);
    noLoop();
}

Text

p5js lar oss laste inn en tekstfil som en array av linjer med funksjonen loadStrings(). I dette eksempelet har vi laget en enkel fil. Vi bruker den første linja til tittel og vi ignorerer alle linjer som begynner med // eller er mindre enn 10 tegn lange. I de andre linjene skiller vi datafeltene med ;. Altså Comma Separated Values (CSV) med ; som skilletegn. Fargen er lagt ut som RGB-verdier, skilt med komma. Fila er slik:

Stortingsvalg 2017
//parti;resultat;R,G,B
AP;27.4;240,60,54
H;25.0;106,155,198
Frp;15.2;95,65,121
SP;10.3;0,119,68
SV;6.0;222,104,47
V;4.4;131,189,66
Krf;4.2;255,190,46
MDG;3.2;0,167,120
R;2.4;164,31,45
Andre;1.9;102,102,102

Parsing og utskrift. Merk at push() lagrer status både på koordinatsystemet og stilsettinger, og pop() gjennoppretter tilsvarende.

function showCsvData(lines,left){
    push();
    translate(left,0);
    text("CSV",0,20);
    text(lines[0],0,40);
    var yPos=60;
    for(var i=1; i< lines.length;i++){
        if((!lines[i].startsWith("//")||
           (lines[i].length< 10))){
            var parts=lines[i].split(";");
            var cs=parts[2].split(",");
            fill(cs[0],cs[2],cs[2]);
            text(parts[0],0,yPos);
            text(parts[1],50,yPos);
            yPos+=16;
        }
    }
    pop();
}

Fordelene med csv-filer er at de tar liten plass og at de er enkle å ha med å gjøre. Ulempene er at vi har lite kontroll med at formatet er riktig.

JSON

I p5js laster vi inn en json-fil med loadJASON(). Fila parses og vi kommer ut med et JavaScript objekt Dette er file vi bruker:

{"tittel":"Stortingsvalg 2017","resultater":[
    {"navn":"AP",    "verdi":27.4, "farge":"240,60,54"},
    {"navn":"H",     "verdi":25.0, "farge":"106,155,198"},
    {"navn":"Frp",   "verdi":15.2, "farge":"95,65,121"},
    {"navn":"SP",    "verdi":10.3, "farge":"0,119,68"},
    {"navn":"SV",    "verdi":6.0, "farge":"222,104,47"},
    {"navn":"V",     "verdi":4.4, "farge":"131,189,66"},
    {"navn":"Krf",   "verdi":4.2, "farge":"255,190,46"},
    {"navn":"MDG",   "verdi":3.2, "farge":"0,167,120"},
    {"navn":"R",     "verdi":2.4, "farge":"164,31,45"},
    {"navn":"Andre", "verdi":1.9, "farge":"102,102,102"}
]
}

Parsing og utskrift

function showJsonData(jsObj,left){
    push();
    translate(left,0);
    text("JSON",0,20);
    text(jsObj.tittel,0,40);
    var res=jsObj.resultater;
    var yPos=60;
    for(var i=0; i< res.length;i++){
        var cs=res[i].farge.split(",");
        fill(cs[0],cs[2],cs[2]);
        text(res[i].navn,0,yPos);
        text(res[i].verdi,50,yPos);
        yPos+=16;
    }
    pop();
}

Fordelene med json-filer er at lett kan sjekkes om de er formelt riktige, men vi har ingen enkel metode forå sjekke f.eks. at alle verdier er lagt inn og at formatet på enkeltelementer er riktig.

XML

I p5js laste inn en json-fil med loadXML() og vi sitter igjen med rotobjektet.

<?xml version="1.0" encoding="UTF-8"?>
<resultat tittel="Stortingsvalg 2017">
<parti navn="AP">
    <verdi>27.4</verdi>
    <farge>240,60,54</farge>
</parti>
<parti navn="H">
    <verdi>25.0</verdi>
    <farge>106,155,198</farge>
</parti>
<parti navn="Frp">
    <verdi>15.2</verdi>
    <farge>95,65,121</farge>
</parti>
<parti navn="SP">
    <verdi>10.3</verdi>
    <farge>0,119,68</farge>
</parti>
<parti navn="SV">
    <verdi>6.0</verdi>
    <farge>222,104,47</farge>
</parti>
<parti navn="V">
    <verdi>4.4</verdi>
    <farge>131,189,66</farge>
</parti>
<parti navn="Krf">
    <verdi>4.2</verdi>
    <farge>255,190,46</farge>
</parti>
<parti navn="MDG">
    <verdi>3.2</verdi>
    <farge>0,167,120</farge>
</parti>
<parti navn="R">
    <verdi>2.4</verdi>
    <farge>164,31,45</farge>
</parti>
<parti navn="Andre">
    <verdi>1.9</verdi>
    <farge>102,102,102</farge>
</parti>
</resultat>

Parsing og utskrift

function showXmlData(xmlObj,left){
    push();
    translate(left,0);
    text("XML",0,20);
    text(xmlObj.getString("tittel"),0,40);
    var yPos=60;
    var res=xmlObj.getChildren("parti");
    for(var i=0; i< res.length;i++){
        var navn=res[i].getString("navn");
        var verdi=res[i].getChildren("verdi")[0].getContent();
        var cs=res[i].getChildren("farge")[0].getContent().split(",");
        fill(cs[0],cs[2],cs[2]);
        text(navn,0,yPos);
        text(verdi,50,yPos);
        yPos+=16;
    }    
    pop();
}

Fordelene med xml-filer er vi har verktøy som lar oss validere og sjekke at formatet er riktig (XSD), vi kan endre formatet etter formålet (XSLT). Vi kan også verktøy for å ekstrahere data på en enkel måte, (xpath). Ulempen er at de tar ganske mye plass.

Referanser

Processing.js Processing.js JavaScript interpretator for Processing processingjs.org/ 01-04-2014