Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active September 30, 2022 16:20
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/78863f92d0abb9fbdb70 to your computer and use it in GitHub Desktop.
Save badosa/78863f92d0abb9fbdb70 to your computer and use it in GitHub Desktop.
Download ZIP
The European Union Unemployment Map
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> <!--<![endif]-->
<head>
<title>Eurostat JSON-stat API + Idescat Visual choropleth map example</title>
<!-- DO NOT DO THIS IN PRODUCTION -->
<!-- js.org and json-stat.org ARE NOT CDNs -->
<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 -->
<script src="https://unpkg.com/jsonstat-toolkit@1.4.2"></script>
</head>
<body>
<div id="visual" class="visual"></div>
<script>
//Unemployment rate (dataset tesem120)
JSONstat("https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/tesem120?sex=T&age=Y15-74&unit=PC_ACT&lang=EN").then(function(j){
//1. Get info
var
//Select the only dataset available in the bundle
ds=j.Dataset(0),
t=ds.Dimension("time"),
//Get time id & label for the latest time available
last=t.id[t.length-1],
time=t.Category(last).label,
//Get countries IDs
countries=ds.Dimension( "geo" ).id,
//Get the values for the selected time
//for all the countries (free dimension).
//Then transform info to the Visual data format
data=ds.Data( { "time": last } ).map( function( e, i ){
return { id: countries[i], val: e.value };
})
;
//2. Draw map with retrieved and transformed info
visual(
{
lang: "en",
title: "Unemployment rate",
time: time,
geo: "European Union",
footer: "Source: Eurostat (dataset tesem120).",
unit: { symbol: "%" },
dec: 1,
legend: false,
type: "cmap",
by: "eu27",
data: data
}
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment