Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/README.md

Last active January 24, 2020 07:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badosa/a5f33fdf0509ad850fa915c586ea8780 to your computer and use it in GitHub Desktop.
Save badosa/a5f33fdf0509ad850fa915c586ea8780 to your computer and use it in GitHub Desktop.
Download ZIP
GDP per capita in Europe (modern version)
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GDP per capita in Europe</title>
<!-- DO NOT DO THIS IN PRODUCTION -->
<!-- JS.ORG IS NOT A CDN -->
<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css">
<script src="https://visual.js.org/lazyvisualsetup.js"></script>
<!-- /DO NOT DO THIS IN PRODUCTION -->
<link href="/d/02294839c6a82661d1f48baa50b02b8e/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="title"></h1>
<div id="cmap" class="visual"></div>
<div class="more">
<div id="tsline" class="visual"></div>
<div id="card"></div>
</div>
<script nomodule>
//For old browsers not supporting ES modules
window.alert("Sorry, your browser does not support ECMAScript modules!");
</script>
<script type="module">
import {fetchDataset} from "https://unpkg.com/jsonstat-euro@latest/import.mjs";
const
query={
lang: "en",
dataset: "tec00001",
filter: {
na_item: ["B1GQ"],
unit: ["CP_EUR_HAB"],
time: ["2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"],
geo: ["AT","BE","BG","CY","CZ","DE","DK","EE","EL","ES","FI","FR","HR","HU","IE","IT","LT","LU","LV","MT","NL","PL","PT","RO","SE","SI","SK","UK","EU28"]
}
},
main=ds=>{
const
time=ds.Dimension("time"),
geo=ds.Dimension("geo"),
last=time.id.slice(-1)[0],
countries=geo.id,
more=o=>{
const
id=o.id,
label=o.label,
country=ds.toTable({type: "arrobj", content: "id", status: true}).filter(e=>e.geo===id),
eu=ds.toTable({type: "arrobj", content: "id", status: true}).filter(e=>e.geo==="EU28"),
time=country.map(e=>e.time),
max=Math.max.apply(null, ds.value),
lastPoint=country.slice(-1)[0],
firstPoint=country[0],
card=()=>{
document.getElementById("card").innerHTML=
'<div id="value">' +
"<p><strong>Year</strong>: " +
last + (lastPoint.status ? " (" + lastPoint.status + ")": "") +
"</p>"+
"<p><strong>" + id + "</strong>: " +
lastPoint.value.toLocaleString("en-EN") +
" €</p>"+
"<p><strong>Growth since " + time[0] + "</strong>: " +
((lastPoint.value-firstPoint.value)*100/firstPoint.value).toFixed(2) +
"%</p>"+
"<p><strong>" + id + " / EU28</strong>: " +
(lastPoint.value / eu.slice(-1)[0].value).toFixed(2) +
"</p>" +
"</div>"
;
}
;
visual({
id: "tsline",
fixed: [300, 300],
lang: "en",
time: time,
geo: label,
grid: {
lastPoint: 4,
line: 3
},
legend: true,
unit: {symbol: "€"},
dec: 0,
range: [0, max],
type: "tsline",
data: [
{ label: id, val: country.map(e=>e.value) },
{ label: "EU28", val: eu.map(e=>e.value) }
],
//Card: we want it drawn after the tsline chart
callback: card
});
}
;
visual({
id: "cmap",
fixed: [450, 600],
lang: "en",
title: "European Union (28 countries)",
time: last,
legend: true,
unit: {symbol: "€"},
range: 0,
dec: 0,
type: "cmap",
by: "eu28",
data: ds.Data( { "time": last } ).map( (e, i)=>{ return { id: countries[i], val: e.value }; }),
//Execute on click
click: more
});
}
;
fetchDataset(query).then(main);
//No iframe
if(window.location===window.parent.location){
document.getElementById("title").innerHTML="Gross domestic product per capita at current market prices";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment