-
Notifications
You must be signed in to change notification settings - Fork 24
Examples
Wiki ▸ Examples
An example on retrieving the JSON-stat Javascript Toolkit and Highcharts using ECMAScript modules.
Tags: JJT, module, Highcharts, linechart
This example shows how to import and use JSON-stat Javascript Utilities Suite's datalist() to display a table of post-Brexit EU unemployment rate by sex and age.
Tags: JJUS, datalist, module
This example shows how to retrieve the latest post-Brexit EU unemployment rate using the JSON-stat Javascript Toolkit module.
Tags: JJT, module
Population pyramid built with Flot and SURS API.
Tags: Flot, pyramid
Simultaneously fetching data from several countries.
Tags: Visual, linechart
Simultaneously fetching data from several sources and countries.
Tags: .fromSDMX(), JJUS
Simultaneously fetching data from Statistics Norway, Eurostat, OECD and UNECE.
Tags: .fromSDMX(), JJUS
Converting ABS SDMX-JSON to JSON-stat.
Tags: .fromSDMX(), ChartJS, linechart, JJUS
Converting the Canary Islands JSON to JSON-stat.
Tags: .tbrowser(), JJUS
Converting the Canary Islands JSON to JSON-stat.
Tags: .tbrowser(), JJUS
A collection of donuts built with Chartist.js and Eurostat's API.
Tags: Chartist.js, pie, donut
Converting data in the arrobj pattern to JSON-stat and visualized with ChartJS.
Tags: fromTable(), ChartJS, linechart, JJUS
Population pyramid built with Flot and Istat's API.
Tags: Flot, pyramid
Conversion from the U.S. Census Bureau's JSON to JSON-stat with JJUS' fromTable().
Tags: fromTable(), ChartJS, JJUS
Conversion of SDMX-JSON to JSON-stat with JJUS' fromSDMX().
Tags: fromSDMX(), .tbrowser(), JJUS
Conversion of SDMX-JSON to JSON-stat with JJUS' fromSDMX().
Tags: fromSDMX(), .Data(), ChartJS, linechart, JJUS
A bar chart built with ChartJS.
Tags: .Data(), ChartJS, barchart
A line chart built with ChartJS.
Tags: .Data(), ChartJS, linechart
How to use JJUS join() to create a JSON-stat dataset from six datasets split by the "sex" and "concept" dimensions.
Tags: .join(), .tbrowser(), JJUS
How to use JJUS join() to create a JSON-stat dataset from three datasets split by the "sex" dimension.
Tags: .join(), .tbrowser(), JJUS
How to use JJUS join() to create a JSON-stat dataset from two datasets split by the "concept" dimension.
Tags: .join(), .tbrowser(), JJUS
How to use JJUS join() to create a JSON-stat dataset from a metadata-only response and two data-only responses.
Tags: .join(), .tbrowser(), JJUS
A choropleth map built from a big dataset filtered using Slice().
Tags: .Slice(), Visual, map
Compare the unemployment series of two UNECE countries.
Tags: .Data(), Visual, linechart
A line chart built with Idescat Visual using data of a saved query from Statistics Greenland that illustrates how to deal with providers that split the time dimension (in this example, there's a dimension for years and a different one for quarters).
Tags: .toTable({...}), Visual, linechart
A bubble chart built with Google Charts.
Tags: .Data(), GCharts, bubblechart
An example of creating JSON-stat from other JSON flavor and using the tbrowser() functionality included in the JSON-stat Javascript Utilities Suite (JJUS) to display the data.
Tags: .tbrowser(), JJUS
A bubble chart built with Google Charts.
Tags: .Data(), GCharts, bubblechart
An example of the fromCSV() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).
Tags: .fromCSV(), JJUS, Visual, linechart
An example of the tbrowser() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).
Tags: .tbrowser(), JJUS
An example of the tbrowser() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).
Tags: .tbrowser(), JJUS
A choropleth map that uses Eurostat's API to retrieve information on GDP per capita for the current 28 EU countries.
Tags: .Data(), Visual, map
An example of the datalist() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).
Tags: .datalist(), JJUS
Compare the unemployment series of two (mainly European) countries.
Tags: .Data(), Visual, linechart
A choropleth map like the one in the previous example but with the ability to change the time reference.
Tags: .Data(), Visual, map
A choropleth map that uses Eurostat's API to retrieve information on unemployment rate for the current 28 EU countries.
Tags: .Data(), Visual, map
Same as the previous example but with interaction features (the user can select time).
Tags: .Data(), Visual, map
A line chart that uses Eurostat's API to retrieve information on US unemployment rate.
Tags: .Data(), Visual, linechart
Same as the previous example but with interaction features (the user can select countries).
Tags: .Data(), Visual, linechart
A visualization that uses the APIs from Statistics Denmark and Statistics Norway to compare inflation in both countries. Both support the JSON-stat format: both responses can be processed in the same way using the JSON-stat Javascript Toolkit.
Tags: .Data(), Visual, linechart
A visualization that uses the 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.
Tags: .Data(), Visual, linechart
An always up-to-date graphical inflation calculator similar to the Swedish and Norwegian ones.
The application uses the Central Statistics Office API to retrieve the data 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.
Tags: .toTable({type: "arrobj", content: "id"}, callback), .Data(), Visual, linechart
The Statistical Institute of Galicia (IGE) supports the JSON-stat format. In this example, data is retrieved using the IGE's API, processed with the JSON-stat Javascript Toolkit and finally visualized with Idescat Visual.
Tags: .Data(), Visual, linechart
Statistics Denmark supports the JSON-stat format. In this example, data is retrieved using the Danish API, processed with the JSON-stat Javascript Toolkit and finally visualized with Idescat Visual.
Tags: .Data(), Visual, linechart
Statistics Denmark supports the JSON-stat format. In this example, data is retrieved using the Danish API, processed with the JSON-stat Javascript Toolkit and finally visualized with Idescat Visual.
Tags: .Data(), Visual, linechart
Converting a JSON-stat response into a CSV file is trivial using the JSON-stat Javascript Toolkit: apply the .toTable() method to the dataset and a forEach() to the resulting array.
Tags: .toTable({type: "array"}), CSV
An always up-to-date graphical inflation calculator similar to the Norwegian one.
The application uses the Statistics Sweden API to retrieve the data 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.
Tags: .toTable({type: "arrobj", content: "id"}, callback), .Data(), Visual, linechart
This sample code retrieves data from UK's ONS in the JSON-stat format, then these data are processed with the JSON-stat Javascript Toolkit and are finally visualized with Visual.
Tags: .Data(...), .Category(void), Visual, pyramid
This code is based on the Norway JSON-stat API and Idescat Visual. The visualization uses the default Visual "filter" option (0.05) to avoid getting an all-white map (Norwegian population is concentrated in a few municipalities).
Tags: .Data(...), Visual, map
This sample code uses JSON-stat + Visual to create a choropleth map of the US population and Gross State Product.
The data are retrieved from us-gsp.json. The US map is one of the sample maps provided by Visual.
Tags: .toTable(callback), metric, Visual, map
This sample code uses JSON-stat + Visual to create a choropleth map of the US Gross State Product. Could it be simpler?
The data are retrieved from us-gsp.json. The US map is one of the sample maps provided by Visual.
Tags: .toTable(callback), metric, Visual, map
This sample code retrieves data from Statistics Norway in the JSON-stat format using JSONP, processes them with the JSON-stat Javascript Toolkit and visualizes them with Visual. Technically, this is done in a couple of lines of code!
Tags: .Data(...), .Category(void), Visual, pyramid
This sample code allows you to connect to a JSON-stat provider, get a JSON-stat response and show the datasets, dimensions and categories in that response. Three examples are provided but you can type your own JSON-stat address.
This sample code uses .Dataset(), .Dimension() and .Category() without parameters for generalization's sake.
Tags: .Dataset(void), .Dimension(void), .Category(void), tree
The JSON-stat format allows providers to declare hierarchical relationships between categories in a dimension using the child property.
This visualization uses hierarchy.json, a sample JSON-stat file that contains the Australian Bureau of Statistics’ Consumer Price Index (CPI) Commodity Classification.
It shows how to build a tree structure with the JSON-stat Javascript Toolkit using a recursive function (the tree function).
Tags: .Category(...).id, D3, child, tree
This sample code uses the Statistics Norway API to retrieve the data in the JSON-stat format. The data is then processed with the help of the JSON-stat Javascript Toolkit. Finally, it is visualized using Flot.
This example illustrates how to use the JSON-stat .Data() method with a free non-constant dimension to retrieve a slice of the original cube. The original data has 5 dimensions (region, sex, age, time, contents). 2 of them are constant dimensions (region and contents). By calling .Data() for a certain sex and time the developer gets an array with all the age data (for that time and sex).
Tags: .Data(), Flot, pyramid
See also: Cross-browser version
An always up-to-date graphical inflation calculator based on an original idea and code by Trygve Falch.
The application uses the Statistics Norway API to retrieve the data in the JSON-stat format. The data is then processed with the help of the JSON-stat Javascript Toolkit. Finally, it is visualized using the Google Visualization API.
Tags: .toTable({type: "object", content: "id"}, callback), .Data(), Google Visualization API, linechart
In this visualization, countries are ranked according to unemployment rate (OECD data). The green ones are countries with a lower rate than OECD; red ones are countries that are expected to have a higher rate than OECD. The current rate can be displayed placing the cursor on the chart. The color of the sparkline is a trend indicator: orange means unemployment is not be significantly higher or lower (10% change) than in the first year in the period; red indicates increases bigger than 10% and green decreases bigger than 10%.
Tags: .toTable({type: "object", content: "id"}), .Data(), fromSDMX(), Google Visualization API, sparkline, JJUS
Based on OECD data, the bar chart in this example displays a list of countries ranked by unemployment rate. Select a different year to see how things changed (check, for example, Ireland). The country with the highest unemployment rate in each year is highlighted in red. To focus on selected countries, click on their bars to change their color to black.
Tags: .toTable({type: "arrobj", content: "id"}, callback), .Dimension({role: ...}), fromSDMX(), D3, barchart, animation, JJUS
An example of how to connect a JSON-stat response with Google Visualization API using the .toTable() method.
Tags: .toTable({type:"object"}), Google Visualization API, map
This sample shows how to display the data in a JSON-stat response in a sortable table, using the Google Visualization API.
This is done in a script of less than 40 lines, thanks to the JSON-stat .toTable() method.
Tags: .toTable({type:"object"}), Google Visualization API, table
This choropleth displays unemployment rates by US county in 2012 (annual averages). This sample tries to show how to use JSON-stat in combination with D3.
Tags: .toTable({type: "arrobj", content: "id"}, callback), D3, map