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));
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.