Dataformater

Hva

p5js har en del funksjonalitet som lar oss laste og bruke noen vanlige dataformater på en enkel måte. Vi skal se på JSON (Json Object NotatioN), CSV (Comma Separated Values) og XML (eXtendable Markup Language).

De viktigste begrepene vi bruker, se Reference

loadStrings(), split()
loadJSON()
loadXML(), getChildren(), getContent(), getString()

Det vi lager blir slik:

Websiden er minimalistisk:

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>test-data</title>
    
   <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
    <script src="showJson.js"> </script>
    <script src="showCsv.js"> </script>
    <script src="showXml.js"> </script>
</head>
<body>
<div id="canvasHere">
</div>
</body>
</html>

Sketchen som leser filene 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();
}

JSON

Datafila, valg.json, er slik;

{"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"}
]
}

Presentasjonen er slik

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();
}

Når vi arbeider med JSON er det erfaringsmessig veldig nyttig å teste data, for å se om de er riktig formatert. Det blir fort mange parenteser av ulik type. Det finnes flere steder på nettet der du kan teste JSON-formatering. Jeg har hatt nytte av denne: Json-parser-online. Ellers ser det ut til at de noen nettleserne forsøker å tolke json-data. Du kan jo prøve: valg.json

CSV

Når vi bruker betegnelsen CSV så betyr ikke det at vi nødvendigvis må bruke komma til å skille dataelementer. Vi kan vel generelt si at vi vil ha en enhet pr linje og at vi skiller egenskapene til en enhet med et annonsert tegn. I eksempelet her er det ; som skiller navn, verdi og farge, mens fargekomponenetenbe (RGB) er skilt med ,. Jeg har dessuten valgt å bruke den første linja til tittel og jeg har gjort det slik at jeg kan legge inn kommentarlinjer som begynner med //.

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

Presentasjonen er slik

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.

XML

XML versonen tar ganske mye plass:

<?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>

Presentasjonen er slik

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), og vi kan endre formatet etter formålet (XSLT). Vi har også verktøy for å ekstrahere data på en enkel måte, (xpath). Ulempen er at de tar ganske mye plass.