Skip to content

Examples

Xavier Badosa edited this page Apr 16, 2015 · 36 revisions

WikiExamples

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

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 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

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

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

Clone this wiki locally