|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<link rel="stylesheet" type="text/css" media="all" href="/d/5723134/styles.css"/> |
|
<script src="https://cdn.jsdelivr.net/combine/npm/jsonstat@0.13.13,npm/jsonstat-utils@2.5.5"></script> |
|
<script src="https://www.google.com/jsapi"></script> |
|
</head> |
|
<body> |
|
<div id="content"></div> |
|
<script type="text/javascript"> |
|
|
|
google.load('visualization', '1', {packages:['corechart']}); |
|
|
|
var |
|
url="https://stats.oecd.org/SDMX-JSON/data/LFS_SEXAGE_I_R/AUS+AUT+BEL+CAN+CHL+CZE+DNK+EST+FIN+FRA+DEU+GRC+HUN+ISL+IRL+ISR+ITA+JPN+KOR+LUX+MEX+NLD+NZL+NOR+POL+PRT+SVK+SVN+ESP+SWE+CHE+TUR+GBR+USA+OECD.MW.900000.UR.A/all?startTime=2006&dimensionAtObservation=allDimensions", |
|
content=document.getElementById("content"), |
|
html='<div class="info text">UN</div><div class="info text">EM</div><div class="info text">PL</div><div class="info text">OY</div><div class="info text">ME</div><div class="info text">NT</div><div class="info text"> </div><div class="info text">PA</div><div class="info text">TT</div><div class="info text">ER</div><div class="info text">NS</div><div class="info text"> </div>', |
|
gap=0.10, |
|
line=function(data,geo,trend, max){ |
|
var |
|
opts={ |
|
colors: [trend], |
|
enableInteractivity: false, |
|
chartArea:{ |
|
height: 66, |
|
width: 66 |
|
}, |
|
legend: { |
|
position: 'none' |
|
}, |
|
hAxis: { |
|
textPosition: 'none' |
|
}, |
|
vAxis: { |
|
textPosition: 'none', |
|
gridlines: { |
|
color: 'none' |
|
}, |
|
baselineColor: 'none', |
|
maxValue: max, |
|
minValue: 0 |
|
}, |
|
lineWidth: 3 |
|
}, |
|
lineview=new google.visualization.DataView(data) |
|
; |
|
|
|
lineview.setRows(lineview.getFilteredRows([{column: 0, value: geo}])); |
|
lineview.setColumns([1, 6]); |
|
new google.visualization.LineChart(document.getElementById(geo)).draw(lineview,opts); |
|
}, |
|
init=function(){ |
|
fetch(url) |
|
.then(function(resp) { |
|
resp.json().then(function(json){ |
|
var |
|
ds=JSONstat(JSONstatUtils.fromSDMX(json)), |
|
max=ds.value.reduce(function(a, b) { |
|
return Math.max(a, b); |
|
}), |
|
time=ds.Dimension("TIME_PERIOD").id, |
|
last=time[time.length-1], |
|
first=time[0], |
|
oecdUR=ds.Data({COUNTRY: "OECD", TIME_PERIOD: last}).value, |
|
area=ds.Dimension("COUNTRY"), |
|
id=area.id, |
|
table=ds.toTable({type:'object', content: 'id'}), |
|
data=new google.visualization.DataTable(table,0.6), |
|
sorted=id.filter(function(e){ return (e!=="OECD"); }) |
|
.map(function(e){ |
|
var |
|
start=ds.Data({COUNTRY: e, TIME_PERIOD: first}).value, |
|
end=ds.Data({COUNTRY: e, TIME_PERIOD: last}).value, |
|
change=(end-start)/start, |
|
trend=(change>gap) ? "#600610" : (change<(-1*gap)) ? "#004f00" : "orange" |
|
oecd=(end<oecdUR) ? "green" : "red" |
|
; |
|
return {geo: e, end: end, trend: trend, oecd: oecd}; |
|
}) |
|
.sort(function(a,b){return a.end - b.end}) |
|
; |
|
|
|
sorted.forEach(function(e){ |
|
var label=area.Category(e.geo).label; |
|
html+='<div class="info '+e.oecd+'" title="'+label+'">'+e.geo+'</div><div class="spark" title="'+Math.round(e.end*10)/10+'" id="'+e.geo+'"></div>'; |
|
}); |
|
|
|
for(var c=0, len=last.length; c<len; c++){ |
|
html+='<div class="info text">'+last[c]+'</div>'; |
|
} |
|
|
|
content.innerHTML=html; |
|
sorted.forEach(function(e){ |
|
line(data,e.geo,e.trend, max); |
|
}); |
|
}); |
|
}) |
|
; |
|
} |
|
; |
|
google.setOnLoadCallback(init); |
|
</script> |
|
</body> |
|
</html> |
