badosa/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This visualization uses Statistics Finland API to retrieve information about the population by labor force status in the JSON-stat format. The data is then processed with the help of the JSON-stat Javascript Toolkit. Finally, it is visualized using Idescat Visual.

  
## 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>Finnish Labor Market</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<!-- DO NOT DO THIS IN PRODUCTION -->
		<!-- js.org and json-stat.org ARE NOT CDNs! Link to your own copies or to a CDN. -->
		<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" />
		<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
		<script src="https://visual.js.org/lazyvisualsetup.js"></script>
		<!-- /DO NOT DO THIS IN PRODUCTION -->

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>

	<body>
		<section id="visual" class="visual"></section>
		<script>
			var
				//Population by labor force status
				url="https://pxnet2.stat.fi/PXWeb/api/v1/en/StatFin/tym/tyti/vv/statfin_tyti_pxt_11pl.px",
				query='{ "query": [ { "code": "Sukupuoli", "selection": { "filter": "item", "values": [ "SSS" ] } }, { "code": "Ikäluokka", "selection": { "filter": "item", "values": [ "15-74" ] } }, { "code": "Tiedot", "selection": { "filter": "item", "values": [ "Tyovoima", "Tyolliset" ] } } ], "response": { "format": "json-stat" } }'
			;

			$.ajax({
				type: "POST",
				url: url,
				data: query,
				success: function( json ) {
					var
						//dim names
						year="Vuosi", concept="Tiedot",

						status={
							active: {
								value: "Tyovoima",
								label: "Labor force"
							},
							employ: {
								value: "Tyolliset",
								label: "Employment"
							}
						},

						ds=JSONstat(json).Dataset(0),
						time=ds.Dimension(year).id,
						empl=[],
						act=[]
					;

					time.forEach(function(t){
						var
							active={},
							employ={}
						;

						active[year]=employ[year]=t;

						active[concept]=status.active.value;
						employ[concept]=status.employ.value;

						act.push( ds.Data(active).value*1000 );
						empl.push( ds.Data(employ).value*1000 );
					});

					visual({
						lang: "en",
						title: "15-74 years old population by labor force status",
						geo: "Finland",
						time: time,
						footer: "Source: "+ds.source+".",
						unit: {label: "people"},
						dec: 0,
						grid: {
							line: 5,
							shadow: 6,
							point: 0
						},
						type: "tsline",
						data: [
							{ label: status.active.label, val: act },
							{ label: status.employ.label, val: empl }
						]
					});
				},
				error: function() {
					$("#visual").html("There was an error while connecting to the data provider. Please, try later.");
				}
			});
		</script>
	</body>
</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>Finnish Labor Market</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<!-- DO NOT DO THIS IN PRODUCTION -->
	<!-- js.org and json-stat.org ARE NOT CDNs! Link to your own copies or to a CDN. -->
	<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
	<script src="https://visual.js.org/lazyvisualsetup.js"></script>
	<!-- /DO NOT DO THIS IN PRODUCTION -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>

	<body>
	<section id="visual" class="visual"></section>
	<script>
	var
	//Population by labor force status
	url="https://pxnet2.stat.fi/PXWeb/api/v1/en/StatFin/tym/tyti/vv/statfin_tyti_pxt_11pl.px",
	query='{ "query": [ { "code": "Sukupuoli", "selection": { "filter": "item", "values": [ "SSS" ] } }, { "code": "Ikäluokka", "selection": { "filter": "item", "values": [ "15-74" ] } }, { "code": "Tiedot", "selection": { "filter": "item", "values": [ "Tyovoima", "Tyolliset" ] } } ], "response": { "format": "json-stat" } }'
	;

	$.ajax({
	type: "POST",
	url: url,
	data: query,
	success: function( json ) {
	var
	//dim names
	year="Vuosi", concept="Tiedot",

	status={
	active: {
	value: "Tyovoima",
	label: "Labor force"
	},
	employ: {
	value: "Tyolliset",
	label: "Employment"
	}
	},

	ds=JSONstat(json).Dataset(0),
	time=ds.Dimension(year).id,
	empl=[],
	act=[]
	;

	time.forEach(function(t){
	var
	active={},
	employ={}
	;

	active[year]=employ[year]=t;

	active[concept]=status.active.value;
	employ[concept]=status.employ.value;

	act.push( ds.Data(active).value*1000 );
	empl.push( ds.Data(employ).value*1000 );
	});

	visual({
	lang: "en",
	title: "15-74 years old population by labor force status",
	geo: "Finland",
	time: time,
	footer: "Source: "+ds.source+".",
	unit: {label: "people"},
	dec: 0,
	grid: {
	line: 5,
	shadow: 6,
	point: 0
	},
	type: "tsline",
	data: [
	{ label: status.active.label, val: act },
	{ label: status.employ.label, val: empl }
	]
	});
	},
	error: function() {
	$("#visual").html("There was an error while connecting to the data provider. Please, try later.");
	}
	});
	</script>
	</body>
	</html>