This example connects to Eurostat's API, processes the JSON-stat response with the JSON-stat Javascript Toolkit and uses Google Charts to represent trade in goods, by main world traders in 2014.
Last active
November 20, 2019 20:23
-
-
Save badosa/2d5c9d9925c7e3fd6742 to your computer and use it in GitHub Desktop.
World Traders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>World Traders</title> | |
| <script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script> | |
| <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart" style="height: 500px;width: 500px;"></div> | |
| <script type="text/javascript"> | |
| var | |
| title="Trade in goods, by main world traders", | |
| url="https://ec.europa.eu/eurostat/wdds/rest/data/v2.1/json/en/tet00018?precision=1&geo=BR&geo=CA&geo=CN_X_HK&geo=EU28&geo=IN&geo=JP&geo=KR&geo=MX&geo=RU&geo=SG&geo=US&sitc06=TOTAL&time=2014&indic_et=MIO_EXP_VAL&indic_et=MIO_IMP_VAL&indic_et=PC_EXP_WRL", | |
| col={ | |
| id: "geo", | |
| t: "time", | |
| metric: "indic_et", | |
| x: "MIO_EXP_VAL", | |
| y: "MIO_IMP_VAL", | |
| z: "PC_EXP_WRL" | |
| } | |
| ; | |
| google.charts.load( "current", {packages:["corechart"]} ); | |
| JSONstat( url, function(){ | |
| var | |
| ds=this, | |
| metric=ds.Dimension( col.metric ), | |
| time=ds.Dimension( col.t ), | |
| geo=ds.Dimension( col.id ), | |
| label={ | |
| title: title + ". " + time.Category( 0 ).label, | |
| id: geo.label, | |
| x: metric.Category( col.x ).label, | |
| y: metric.Category( col.y ).label, | |
| z: metric.Category( col.z ).label | |
| }, | |
| getData=function(c){ | |
| var | |
| s='{"' + col.t + '":"' + time.id[0] + '","'+ col.metric + '":"' + c + '"}', | |
| json=JSON.parse( s ) | |
| ; | |
| return ds.Data( json, false ); | |
| }, | |
| x=getData( col.x ), | |
| y=getData( col.y ), | |
| z=getData( col.z ), | |
| input=[ [ | |
| label.id, | |
| label.x, | |
| label.y, | |
| "Country", | |
| label.z | |
| ] ] | |
| ; | |
| geo.id.forEach(function(e,i){ | |
| input.push( [geo.id[i], x[i], y[i], geo.Category(i).label, z[i]] ); | |
| }); | |
| google.charts.setOnLoadCallback(function(){ | |
| var | |
| data=google.visualization.arrayToDataTable( input ), | |
| options={ | |
| title: label.title, | |
| hAxis: { | |
| title: label.x, | |
| textStyle: { | |
| fontSize: 12, | |
| }, | |
| titleTextStyle: { | |
| italic: false | |
| }, | |
| maxValue: 2000000 | |
| }, | |
| vAxis: { | |
| title: label.y, | |
| textStyle: { | |
| fontSize: 12 | |
| }, | |
| titleTextStyle: { | |
| italic: false | |
| }, | |
| maxValue: 2000000 | |
| }, | |
| sizeAxis: { | |
| maxSize: 50 | |
| }, | |
| bubble: { | |
| opacity: 0.2, | |
| textStyle: { | |
| fontSize: 12 | |
| } | |
| }, | |
| legend: { | |
| position: "none" | |
| } | |
| }, | |
| chart=new google.visualization.BubbleChart( document.getElementById( "chart" ) ) | |
| ; | |
| chart.draw( data, options ); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment