var data = [];
var ageRanges = [ "0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84" ];

fetch("https://cors-anywhere.herokuapp.com/http://satyrium.pl:8080/work/media-3.0-datavis-course/data.json")
  .then(function(response) {
    return response.json();
  })
  .then(function(result) {
    data = result;
  });

function filterData(apiData, n1, n2) {
  var dataPoints;

  for (var i = 0; i < apiData.length; i = i + 1) {
    if (apiData[i].meta.n1 == n1 && apiData[i].meta.n2 == n2) {
      dataPoints = apiData[i].data.results[0].values;
    }
  }

  return dataPoints;
}

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(240);
  noStroke();

  var years = [];

  if (data.length > 0) {
    for (var i = 0; i < data[0].data.results[0].values.length; i = i + 1) {
      years.push(data[0].data.results[0].values[i].year);
    }
  }

  for (var i = 0; i < ageRanges.length; i = i + 1) {
    // ageRanges[i] to dany przedział wiekowy - wyszukujemy kobiety i mężczyzn osobno
    var women = filterData(data, ageRanges[i], "kobiety");
    var men = filterData(data, ageRanges[i], "mężczyźni");

    // przechodzimy po wszystkich latach
    for (var j = 0; j < years.length; j = j + 1) {
      // "wyciągamy" dane gdzie rok jest naszym poszukiwanym rokiem
      var womenValue = 0;
      var menValue = 0;

      for (var k = 0; k < women.length; k = k + 1) {
        if (women[k].year == years[j]) {
          womenValue = women[k].val;
        }
        if (men[k].year == years[j]) {
          menValue = men[k].val;
        }
      }

      // przeskalowane położenie na osi x i y - dobrane "eksperymentalnie"
      var x = i * 35 + 15;
      var y = j * 25 + 20;

      // przeskalowanie wartości - dobrane "eksperymentalnie" - można by wykorzystać min i max z wcześniejszych przykładów
      var rWomen = womenValue / 100000;
      var rMen = menValue / 100000;

      fill(255, 0, 0, 150);
      ellipse(x, y, rWomen, rWomen);

      fill(0, 0, 255, 150);
      // rysujemy mężczyzn "przesuniętych" o 10 pikseli, żeby obie wartości były widoczne
      ellipse(x + 10, y, rMen, rMen);
    }
  }
}