Examples

Xavier Badosa edited this page May 11, 2016 · 25 revisions
Clone this wiki locally

WikiExamples

UNECE Unemployment Trend Comparison

Compare the unemployment series of two UNECE countries.

Tags: .Data({...}), Visual, linechart

Greenlandish Labor Market

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

World Traders

A bubble chart built with Google Charts.

Tags: .Data({...}), GCharts, bubblechart

From Spanish NSI JSON to JSON-stat

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

US Gross State Product Bubble Chart

A bubble chart built with Google Charts.

Tags: .Data({...}), GCharts, bubblechart

fromCSV() example

An example of the fromCSV() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).

Tags: .fromCSV(), JJUS, Visual, linechart

nonconst tbrowser() example

An example of the tbrowser() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).

Tags: .tbrowser(), JJUS

tbrowser() example

An example of the tbrowser() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).

Tags: .tbrowser(), JJUS

GDP per capita in the European Union

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

datalist() example

An example of the datalist() functionality included in the JSON-stat Javascript Utilities Suite (JJUS).

Tags: .datalist(), JJUS

Unemployment Trend Comparison

Compare the unemployment series of two (mainly European) countries.

Tags: .Data({...}), Visual, linechart

EU Unemployment Time Map

A choropleth map like the one in the previous example but with the ability to change the time reference.

Tags: .Data({...}), Visual, map

The European Union Unemployment 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

EU Unemployment Time Map

Same as the previous example but with interaction features (the user can select time).

Tags: .Data({...}), Visual, map

EU vs US

A line chart that uses Eurostat's API to retrieve information on US unemployment rate.

Tags: .Data({...}), Visual, linechart

Unemployment Trend Comparison

Same as the previous example but with interaction features (the user can select countries).

Tags: .Data({...}), Visual, linechart

Dano-Norwegian Inflation

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

Finnish Labor Market

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

Ireland's Harmonised Inflation Calculator

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

Registered Unemployment in Galicia

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

Danish Labor Market

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

Danish Unemployment by Sex

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

From JSON-stat to CSV

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

Swedish Inflation Calculator

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

Non-UK Born Pyramid

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

Norway's Choropleth Map

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

The US Gross State Product per Capita 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

Choropleth Maps Made Trivial

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

A Population Pyramid in a Couple of Lines of Code

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

Traversing the Cube Tree

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

CPI, a Hierarchical Dimension

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

Dynamic Norwegian Pyramid

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

Norwegian Inflation Calculator

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

Unemployment Patterns

In this visualization, countries are ranked according to unemployment rate in 2014 (OECD data). The green ones are countries with a lower rate than OECD in 2014; red ones are countries that are expected to have a higher rate than OECD. The 2014 rate can be displayed placing the cursor on the chart. The color of the sparkline is a trend indicator: orange means unemployment in 2014 will not be significantly higher or lower (10% change) than in 2013; red indicates increases bigger than 10% and green decreases bigger than 10%.

Tags: .toTable({type: "object", content: "id"}), .Data({...}), Google Visualization API, sparkline

The Unemployment Ranking Chart

Based on OECD data for the years 2003-2014, the bar chart in this example displays a list of countries ranked by unemployment rate in 2003. 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: ...}), D3, barchart, animation

OECD Unemployment Choropleth

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

From JSON-stat to Table

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

Choropleth with D3 & JSON-stat

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