function filterData(apiData) {
  var dataPoints;

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

  return dataPoints;
}

function visualize(year, value, scaledValue) {
  var div = document.createElement("div");
  div.innerText = year + ": " + value;
  document.body.appendChild(div);

  var bg = document.createElement("div");
  bg.style.width = scaledValue * 300 + "px";
  bg.style.height = "2px";
  bg.style.background = "#bbb";
  document.body.appendChild(bg);
}

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

    for (var i = 0; i < filtered.length; i = i + 1) {
      if (filtered[i].val > max) {
        max = filtered[i].val;
      }
    }
  
    var min = max;
  
    for (var i = 0; i < filtered.length; i = i + 1) {
      if (filtered[i].val < min) {
        min = filtered[i].val;
      }
    }

    for (var i = 0; i < filtered.length; i = i + 1) {
      visualize(filtered[i].year, filtered[i].val, (filtered[i].val - min) / (max - min));
    }
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.