Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active October 2, 2022 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save badosa/02294839c6a82661d1f48baa50b02b8e to your computer and use it in GitHub Desktop.
Save badosa/02294839c6a82661d1f48baa50b02b8e to your computer and use it in GitHub Desktop.
Download ZIP
GDP per capita in Europe
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Idescat Visual sample page</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" />
<!-- Old JSONstat Toolkit example -->
<script src="https://unpkg.com/jsonstat@0.13.13"></script>
</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>
var
service="https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/",
dataset="tec00001?na_item=B1GQ&unit=CP_EUR_HAB",
time="&lastTimePeriod=1",
geo="&geo=AT&geo=BE&geo=BG&geo=CY&geo=CZ&geo=DE&geo=DK&geo=EE&geo=EL&geo=ES&geo=FI&geo=FR&geo=HR&geo=HU&geo=IE&geo=IT&geo=LT&geo=LU&geo=LV&geo=MT&geo=NL&geo=PL&geo=PT&geo=RO&geo=SE&geo=SI&geo=SK&geo=EU27_2020",
url=service+dataset+time+geo,
main=function(){
var
ds=this,
time=ds.Dimension("time"),
geo=ds.Dimension("geo"),
last=time.id.slice(-1)[0],
countries=geo.id,
more=function(o){
var
id=o.id,
label=o.label,
country=ds.toTable({type: "arrobj", content: "id", status: true}).filter(function(e){ return e.geo===id; }),
eu=ds.toTable({type: "arrobj", content: "id", status: true}).filter(function(e){ return e.geo==="EU28"; }),
time=country.map(function(e){ return e.time; }),
max=Math.max.apply(null, ds.value),
lastPoint=country.slice(-1)[0],
firstPoint=country[0],
card=function(){
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(function(e){ return e.value; }) },
{ label: "EU27", val: eu.map(function(e){ return e.value; }) }
],
//Card: we want it drawn after the tsline chart
callback: card
});
}
;
visual({
id: "cmap",
fixed: [450, 600],
lang: "en",
title: "European Union",
time: last,
legend: true,
unit: {symbol: "€"},
range: 0,
dec: 0,
type: "cmap",
by: "eu27",
data: ds.Data( { "time": last } ).map( function(e, i){ return { id: countries[i], val: e.value }; }),
//Execute on click
click: more
});
}
;
JSONstat(
url,
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>
Raw
styles.css
* {
box-sizing: border-box;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
h1 {
margin: 10px;
font-size: 15px;
}
.visual {
display: inline-block;
vertical-align: top;
text-align: center;
}
#tsline .legend {
text-align: left;
}
.visual h1 {
color: #284b71;
}
.more {
display: inline-block;
height: 530px;
}
#value {
padding: 10px;
background-color: #333;
color: #fff;
margin-top: 4em;
}
#value p {
margin: 0.3em;
font-size: 13px;
}
.visual .VisualJSarea path:hover,
.visual .VisualJSarea path:focus {
stroke: orange;
stroke-width: 1px;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment