JSON i p5*js czyli obrabiamy dane

JSON (JavaScript Object Notation) to sposób zapisywania danych świetnie współpracujący z biblioteką p5*js. Typowy plik JSON wygląda tak:

{
  "meta": {
    "zasob": "1.2 Dzielnice",
    "aktualizacja": "dzienna",
    "url": "http://otwartedane.gdynia.pl/portal/data/city/1/2/data.json"
  },
  "data": [
    {
      "gestosc_zaludnienia": 2801,
      "liczba_ludnosci": 8289,
      "powierzchnia": 2.96,
      "dzielnica": "Redłowo",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 1110,
      "liczba_ludnosci": 12757,
      "powierzchnia": 11.49,
      "dzielnica": "Śródmieście",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 732,
      "liczba_ludnosci": 11002,
      "powierzchnia": 15.03,
      "dzielnica": "Wielki Kack",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2585,
      "liczba_ludnosci": 8471,
      "powierzchnia": 3.28,
      "dzielnica": "Witomino Leśniczówka",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 1883,
      "liczba_ludnosci": 9841,
      "powierzchnia": 5.23,
      "dzielnica": "Witomino Radiostacja",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 5954,
      "liczba_ludnosci": 11639,
      "powierzchnia": 1.95,
      "dzielnica": "Wzgórze Św. Maksymiliana",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 952,
      "liczba_ludnosci": 2108,
      "powierzchnia": 2.21,
      "dzielnica": "Babie Doły",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 418,
      "liczba_ludnosci": 10674,
      "powierzchnia": 25.53,
      "dzielnica": "Chwarzno-Wiczlino",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 6071,
      "liczba_ludnosci": 23298,
      "powierzchnia": 3.84,
      "dzielnica": "Chylonia",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 2088,
      "liczba_ludnosci": 12074,
      "powierzchnia": 5.78,
      "dzielnica": "Cisowa",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 2291,
      "liczba_ludnosci": 14258,
      "powierzchnia": 6.22,
      "dzielnica": "Dąbrowa",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 4037,
      "liczba_ludnosci": 7858,
      "powierzchnia": 1.95,
      "dzielnica": "Działki Leśne",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 2144,
      "liczba_ludnosci": 9392,
      "powierzchnia": 4.38,
      "dzielnica": "Grabówek",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 6313,
      "liczba_ludnosci": 4075,
      "powierzchnia": 0.65,
      "dzielnica": "Kamienna Góra",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 3080,
      "liczba_ludnosci": 10448,
      "powierzchnia": 3.39,
      "dzielnica": "Karwiny",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 3421,
      "liczba_ludnosci": 14940,
      "powierzchnia": 4.37,
      "dzielnica": "Oksywie",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 2781,
      "liczba_ludnosci": 8232,
      "powierzchnia": 2.96,
      "dzielnica": "Redłowo",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 1085,
      "liczba_ludnosci": 12473,
      "powierzchnia": 11.49,
      "dzielnica": "Śródmieście",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 729,
      "liczba_ludnosci": 10963,
      "powierzchnia": 15.03,
      "dzielnica": "Wielki Kack",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 941,
      "liczba_ludnosci": 2079,
      "powierzchnia": 2.21,
      "dzielnica": "Babie Doły",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 440,
      "liczba_ludnosci": 11230,
      "powierzchnia": 25.53,
      "dzielnica": "Chwarzno-Wiczlino",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 5934,
      "liczba_ludnosci": 22788,
      "powierzchnia": 3.84,
      "dzielnica": "Chylonia",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 2044,
      "liczba_ludnosci": 11813,
      "powierzchnia": 5.78,
      "dzielnica": "Cisowa",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 2275,
      "liczba_ludnosci": 14152,
      "powierzchnia": 6.22,
      "dzielnica": "Dąbrowa",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 968,
      "liczba_ludnosci": 2145,
      "powierzchnia": 2.21,
      "dzielnica": "Babie Doły",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 6173,
      "liczba_ludnosci": 23687,
      "powierzchnia": 3.84,
      "dzielnica": "Chylonia",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2966,
      "liczba_ludnosci": 8157,
      "powierzchnia": 2.75,
      "dzielnica": "Leszczynki",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 1109,
      "liczba_ludnosci": 8804,
      "powierzchnia": 7.94,
      "dzielnica": "Mały Kack",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 5192,
      "liczba_ludnosci": 18999,
      "powierzchnia": 3.66,
      "dzielnica": "Obłuże",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 1383,
      "liczba_ludnosci": 6949,
      "powierzchnia": 5.02,
      "dzielnica": "Orłowo",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 5549,
      "liczba_ludnosci": 13116,
      "powierzchnia": 2.36,
      "dzielnica": "Pogórze",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 554,
      "liczba_ludnosci": 8409,
      "powierzchnia": 15.18,
      "dzielnica": "Pustki Cisowskie-Demptowo",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 399,
      "liczba_ludnosci": 10197,
      "powierzchnia": 25.53,
      "dzielnica": "Chwarzno-Wiczlino",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2118,
      "liczba_ludnosci": 12244,
      "powierzchnia": 5.78,
      "dzielnica": "Cisowa",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2312,
      "liczba_ludnosci": 14385,
      "powierzchnia": 6.22,
      "dzielnica": "Dąbrowa",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 4115,
      "liczba_ludnosci": 8009,
      "powierzchnia": 1.95,
      "dzielnica": "Działki Leśne",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2181,
      "liczba_ludnosci": 9552,
      "powierzchnia": 4.38,
      "dzielnica": "Grabówek",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 6488,
      "liczba_ludnosci": 4188,
      "powierzchnia": 0.65,
      "dzielnica": "Kamienna Góra",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 3951,
      "liczba_ludnosci": 7705,
      "powierzchnia": 1.95,
      "dzielnica": "Działki Leśne",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 2108,
      "liczba_ludnosci": 9231,
      "powierzchnia": 4.38,
      "dzielnica": "Grabówek",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 6137,
      "liczba_ludnosci": 3989,
      "powierzchnia": 0.65,
      "dzielnica": "Kamienna Góra",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 3036,
      "liczba_ludnosci": 10292,
      "powierzchnia": 3.39,
      "dzielnica": "Karwiny",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 2916,
      "liczba_ludnosci": 8020,
      "powierzchnia": 2.75,
      "dzielnica": "Leszczynki",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 1142,
      "liczba_ludnosci": 9069,
      "powierzchnia": 7.94,
      "dzielnica": "Mały Kack",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 5117,
      "liczba_ludnosci": 18727,
      "powierzchnia": 3.66,
      "dzielnica": "Obłuże",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 3416,
      "liczba_ludnosci": 14926,
      "powierzchnia": 4.37,
      "dzielnica": "Oksywie",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 1371,
      "liczba_ludnosci": 6882,
      "powierzchnia": 5.02,
      "dzielnica": "Orłowo",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 5469,
      "liczba_ludnosci": 12908,
      "powierzchnia": 2.36,
      "dzielnica": "Pogórze",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 553,
      "liczba_ludnosci": 8398,
      "powierzchnia": 15.18,
      "dzielnica": "Pustki Cisowskie-Demptowo",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 2763,
      "liczba_ludnosci": 8179,
      "powierzchnia": 2.96,
      "dzielnica": "Redłowo",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 1054,
      "liczba_ludnosci": 12113,
      "powierzchnia": 11.49,
      "dzielnica": "Śródmieście",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 728,
      "liczba_ludnosci": 10936,
      "powierzchnia": 15.03,
      "dzielnica": "Wielki Kack",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 2497,
      "liczba_ludnosci": 8189,
      "powierzchnia": 3.28,
      "dzielnica": "Witomino Leśniczówka",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 1820,
      "liczba_ludnosci": 9518,
      "powierzchnia": 5.23,
      "dzielnica": "Witomino Radiostacja",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 5785,
      "liczba_ludnosci": 11281,
      "powierzchnia": 1.95,
      "dzielnica": "Wzgórze Św. Maksymiliana",
      "dzien": "2017-12-31"
    },
    {
      "gestosc_zaludnienia": 3126,
      "liczba_ludnosci": 10605,
      "powierzchnia": 3.39,
      "dzielnica": "Karwiny",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2996,
      "liczba_ludnosci": 8240,
      "powierzchnia": 2.75,
      "dzielnica": "Leszczynki",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 1097,
      "liczba_ludnosci": 8716,
      "powierzchnia": 7.95,
      "dzielnica": "Mały Kack",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 5275,
      "liczba_ludnosci": 19302,
      "powierzchnia": 3.66,
      "dzielnica": "Obłuże",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 3408,
      "liczba_ludnosci": 14885,
      "powierzchnia": 4.37,
      "dzielnica": "Oksywie",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 1399,
      "liczba_ludnosci": 7027,
      "powierzchnia": 5.02,
      "dzielnica": "Orłowo",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 5659,
      "liczba_ludnosci": 13378,
      "powierzchnia": 2.36,
      "dzielnica": "Pogórze",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 559,
      "liczba_ludnosci": 8486,
      "powierzchnia": 15.18,
      "dzielnica": "Pustki Cisowskie-Demptowo",
      "dzien": "2015-12-31"
    },
    {
      "gestosc_zaludnienia": 2551,
      "liczba_ludnosci": 8362,
      "powierzchnia": 3.28,
      "dzielnica": "Witomino Leśniczówka",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 1858,
      "liczba_ludnosci": 9712,
      "powierzchnia": 5.23,
      "dzielnica": "Witomino Radiostacja",
      "dzien": "2016-12-31"
    },
    {
      "gestosc_zaludnienia": 5840,
      "liczba_ludnosci": 11397,
      "powierzchnia": 1.95,
      "dzielnica": "Wzgórze Św. Maksymiliana",
      "dzien": "2016-12-31"
    }
  ]
}

Kod, który umożliwia załadowanie pliku i wyświetlenie zawartości przedstawia się tak:

var jsondata;

function preload() {
  jsondata = loadJSON("Gdynia_dzielnice.json")
}

function setup() {
  noCanvas();
  createElement ('h1', "Gdyńskie dzielnice: ");
  createElement('h3',  jsondata.meta.url);

  for( var i = 0; i < jsondata.data.length; i++){
     createElement('h2', jsondata.data[i].dzielnica);
     createElement('p', "gęstość zaludnienia = " + jsondata.data[i].gestosc_zaludnienia);
     createElement('p', "liczba ludności = " + jsondata.data[i].liczba_ludnosci);
     createElement('p', "powierzchnia = " + jsondata.data[i].powierzchnia);
     createElement('p', "dane z dnia: " + jsondata.data[i].dzien);
  }

//console.log(JSONdata.data.length);
}

To samo ale dane ściągam z zewnątrz. Jest z tym pewien problem – zabezpieczenia. Nie wszystkie serwery dają nieograniczony dostęp. Jest sposób. Wystarczy dodać przed adresem tekst: https://crossorigin.me/ i wszystko działa świetnie. Może nie wszystko, ale sporo.

var jsondata;

//function preload() {
//  jsondata = loadJSON("Gdynia_dzielnice.json")
//}



function setup() {

  var url = 'https://crossorigin.me/http://otwartedane.gdynia.pl/portal/data/city/1/2/data.json'
  loadJSON(url, gotData);
  noCanvas()
  }

function gotData(jsondata) {
  //print(jsondata);

  createElement ('h1', "Gdyńskie dzielnice: ");
  createElement('h3',  jsondata.meta.url);
  for( var i = 0; i < jsondata.data.length; i++)
  {
    createElement('h2', jsondata.data[i].dzielnica);
    createElement('p', "gęstość zaludnienia = " + jsondata.data[i].gestosc_zaludnienia);
    createElement('p', "liczba ludności = " + jsondata.data[i].liczba_ludnosci);
    createElement('p', "powierzchnia = " + jsondata.data[i].powierzchnia);
    createElement('p', "dane z dnia: " + jsondata.data[i].dzien);
  }
}

Dodatkowe informacje:

https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON
http://rebecca-ricks.com/2015/10/27/first-p5-js-sketch-using-the-nyt-api/
https://github.com/processing/p5.js/issues/1535
http://jsonviewer.stack.hu
http://api.jquery.com/jQuery.getJSON/

Listy publicznych baz API JSON
https://github.com/toddmotto/public-apis
https://github.com/abhishekbanthia/Public-APIs

Dodaj komentarz