2d:null 2e:["$","title",null,{"children":"Introduction to the JSONSTAT-TOOLKIT | JSON-stat.org | Observable"}] 33:T420,inputs = ({ orgs: [ "Eurostat", "UNECE", "Statistics Norway", "Central Statistical Office of Ireland", "Statistics Denmark", "Statistics Sweden", "Statistics Finland", "Federal Statistical Office of Switzerland", "JSON-stat.org" ], urls: [ "https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/tesem120?lang=en&lastTimePeriod=5", "https://w3.unece.org/PXWeb2015/sq/7606161f-5f03-432b-9906-5c1a6e950629", "https://data.ssb.no/api/v0/dataset/1054.json?lang=en", "https://ws.cso.ie/public/api.restful/PxStat.Data.Cube_API.ReadDataset/PEA01/JSON-stat/2.0/en", "https://api.statbank.dk/v1/data/AKU110K/JSONSTAT?lang=en&valuePresentation=Default&timeOrder=Ascending&Tid=(-n%2B41)&K%C3%98N=*&BESKSTATUS=AKUL", "https://www.statistikdatabasen.scb.se/sq/105582", "https://pxdata.stat.fi:443/PxWeb/sq/19cad991-4bdd-483d-a155-5c171ea27a52", "https://www.pxweb.bfs.admin.ch/sq/22fe8061-a157-438d-8c44-bcee31f6420e", "https://json-stat.org/samples/oecd-canada-col.json" ] })34:T96c,helper = ({ dimensions: function(ds){let list = []; ds.id.map(i => list.push( "

*" + i + "* (**" + ds.Dimension(i).label + "**): " + ds.Dimension(i).length + (ds.Dimension(i).length > 1 ? " categories" : " category") + (ds.Dimension(i).role ? " (role: " + ds.Dimension(i).role + ")" : "") + "

" ) ); return "

" + list.join("") + ""; }, getMaxDim: function(ds) { const max = Math.max(...ds.size); return ds.id[ds.size.indexOf(max)]; }, filterText: function(ds, filter) { return ( "

**" + ds.Dimension(e[0]).label + "**: _" + ds.Dimension(e[0]).Category(e[1][0]).label + "_

" ); }, randomText: function(ds, random) { return ( "

*" + e + "* (**" + ds.Dimension(e).label + "**): " + "“" + random[i] + "” (_" + ds.Dimension(e).Category(random[i]).label + "_)

" ); }, random: ds.id.map( (e, i) => ds.Dimension(e).id[Math.floor(Math.random() * Math.floor(ds.size[i] - 1))] ), dataText: function(ds, random) { const obj = {}; random.forEach((e, i) => (obj[ds.id[i]] = e)); return obj; }, classText: function(clss) { switch (clss) { case 'dataset': return 'The previous line retrieves the first dataset in a bundle or a collection. Because the response already returned a dataset, Dataset(0) does nothing.'; default: return ( 'In the previous line, Dataset(0) retrieves the first dataset in the ' + clss + '.' ); } }, openRandom: function(random) { const arr = [...random]; arr.pop(); return arr; }, objectify: function(filter) { const obj = {}; filter.forEach(e => (obj[e[0]] = e[1])); return obj; }, codify: function(o) { return JSON.stringify(o).replace(/(:|,)/g, "$1 "); }, getOrg: function(n, orgs, urls) { return n < orgs.length ? orgs[n] : urls[n]; } })35:[{"id":"39030e2a8556142ff461547dd82c9bc87067f7f3d505d517d7ac65161d619c97cb702757acbf9507739d0b694e52ecbd1457873c0655f2f2a601d70acdb5b307","href":"https://static.observableusercontent.com/files/39030e2a8556142ff461547dd82c9bc87067f7f3d505d517d7ac65161d619c97cb702757acbf9507739d0b694e52ecbd1457873c0655f2f2a601d70acdb5b307","name":"milad-fakurian-PpgY7sjpf_0-unsplash.jpg","type":"image/jpeg","lastModified":1772312755043.78,"size":357520}] 31:{"id":"5a61f54818aad168","slug":"toolkit","title":"Introduction to the JSONSTAT-TOOLKIT","thumbnail":"e284767dfad0570738d362227973cca67a9d277202965550ef638c7a36ec5403","access_level":"public","create_time":"$D2021-03-11T20:46:39.837Z","update_time":"$D2026-03-02T17:26:37.837Z","view_time":null,"first_public_time":"$D2021-03-25T22:14:24.172Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"0f02e1a34acf82cd","login":"jsonstat","name":"JSON-stat.org","avatar_url":"https://avatars-next.observableusercontent.com/03bef2f0aa512420dbe59396de0314608eb5edfd966b7ec15e286cdcef3ff2ca","tier":"starter_2024"},"version":1113,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8de43c67196234cf","login":"jsonstat","name":"JSON-stat.org","avatar_url":"https://avatars-next.observableusercontent.com/03bef2f0aa512420dbe59396de0314608eb5edfd966b7ec15e286cdcef3ff2ca","tier":null}],"members":[{"type":"individual","id":"aea8e641bbbeafc7","login":"badosa","name":"Xavier Badosa","avatar_url":"https://avatars-next.observableusercontent.com/25d67f3e1008eee8a3ae63f1fab06a82814698ec762fb9ebecf1957384c3b0f1","tier":null,"role":"editor"},{"type":"individual","id":"8de43c67196234cf","login":"jsonstat","name":"JSON-stat.org","avatar_url":"https://avatars-next.observableusercontent.com/03bef2f0aa512420dbe59396de0314608eb5edfd966b7ec15e286cdcef3ff2ca","tier":null,"role":"editor"}],"comments":[{"id":"cf0b04d7be56b6c2","reply_to_id":null,"content":"Edit this line to include your own URL and ignore the examples. For example:\n\nurl = \"https://json-stat.org/samples/canada.json\"","create_time":"$D2021-03-22T20:26:48.226Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8de43c67196234cf","login":"jsonstat","name":"JSON-stat.org","avatar_url":"https://avatars-next.observableusercontent.com/03bef2f0aa512420dbe59396de0314608eb5edfd966b7ec15e286cdcef3ff2ca","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"title":"Introduction to the JSONSTAT-TOOLKIT","cells":[{"id":64,"value":"md`# Introduction to the JSONSTAT-TOOLKIT\n\n### _By_ Xavier Badosa`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"

\n ${await FileAttachment(\"milad-fakurian-PpgY7sjpf_0-unsplash.jpg\").image()}\n\n

Photo by Milad Fakurian on Unsplash

\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"md`This notebook shows you the main features of the **[jsonstat-toolkit](https://www.npmjs.com/package/jsonstat-toolkit)** using data from different official statistics providers like *Eurostat*, *UNECE*, *Statistics Norway*, the *Central Statistical Office of Ireland*, *Statistics Denmark*, *Statistics Sweden*, the *Federal Statistical Office of Switzerland* or *Statistics Finland*. It includes **${\n inputs.urls.length\n} sample URLs**, but you can fork this notebook and use your own examples.\n\nThis notebook covers the following topics:\n\n- Getting JSON-stat datasets \n\n- Analyzing the main metadata of a dataset\n\n- Retrieving data points\n\n- Filtering data\n\n- Processing data\n\nThe currently selected data provider is **${helper.getOrg(\n index,\n inputs.orgs,\n inputs.urls\n)}**. The URL is: ${url}. You can change this in the next section.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`## Choosing a JSON-stat Request`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"viewof bar = vl\n .markBar()\n .data(JSON.parse(JSON.stringify(data)))\n .encode(\n vl\n .x()\n .fieldO(d)\n .axis({ title: dimensionLabel }),\n vl.y().fieldQ(\"value\")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`Choose a provider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"viewof index = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md `## Dealing with the Response`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`First thing is to (1) **request the data** and (2) convert the response into a **jsonstat instance**. You can use your favorite fetch method for (1) and _JSONstat()_ for (2). Or you can use _JSONstat()_ for both, like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"jsonstat = JSONstat(url)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`(Take into account that, in a regular context, _JSONstat()_ fetches data asyncronously and returns a [promise](https://github.com/jsonstat/toolkit/blob/master/docs/API.md#res-required).)\n\nJSON-stat supports several document classes (collections, datasets, dimensions, bundles...). The selected sample is a **${clss}**. This is how we know:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"clss = jsonstat.class","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"clss === \"dataset\"\n ? md`Because it is already a dataset, it is unnecessary to use _Dataset()_: it does nothing, but it doesn't hurt either. _Dataset()_ is used to retrieve datasets from a _bundle_ (JSON-stat v.1) or a _collection of datasets_ (JSON-stat v.2).`\n : md`Because it is a ${clss} and it may contain several datasets, we will use _Dataset(0)_ to retrieve the first one.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"ds = jsonstat.Dataset(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`${helper.classText(clss)}\n\nIn the original set of sample URLs in this notebook, there are examples of datasets, bundles and collections.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`You can make sure _ds_ is a dataset like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"dsclss = ds.class","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"md `## Analyzing the Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`What do we know about this dataset?\n\nIts title is **${label}**. The source of the dataset is ${source \n ? \"**\"+source+\"**\"\n : \"_none_ (the dataset does not contain source information)\"}. It was updated on ${updated \n ? \"**\"+updated+\"**\"\n : \"_none_ (the dataset does not specified when it was updated)\"}. It has **${ndim.toLocaleString(\n \"en-US\"\n)} dimensions** and **${n.toLocaleString(\"en-US\")} values**.\n\nThis is how we know:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"label = ds.label","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"source = ds.source","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"updated = ds.updated","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"ndim = ds.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"n = ds.n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`The dataset has the following **dimensions**: ${helper.dimensions(ds)}\n\nThis is how we know the dimensions of a dataset:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"dims = ds.id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`Let's analyze step by step a single dimension: _${d}_ (**${dimensionLabel}**).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"d = helper.getMaxDim(ds)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"dimensionLabel = ds.Dimension(d).label","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"dimensionRole = ds.Dimension(d).role","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"numberOfCategories = ds.Dimension(d).length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"md`You can list the categories of a dimension like this:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"dimensionCategories = ds.Dimension(d).id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`Or retrieve the label of a particular category like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"categoryLabel1 = ds.Dimension(d).Category(0).label","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md`Datasets, dimensions and categories can be referred by position (0) or by name (\"${\n ds.Dimension(d).id[0]\n}\"). Meaning \n\nds.Dimension(${ds.id.indexOf(d)}).Category(0).label\n\nis the same as \n\nds.Dimension(\"${d}\").Category(\"${ds.Dimension(d).id[0]}\").label\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"md `## Retrieving Data Points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"md `Because the dataset has ${ndim} dimensions, a data point is defined by its position in each of the ${ndim} dimensions. Imagine you want to retrieve a data point that matches the following properties:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md`${helper.randomText(ds, helper.random)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`This data point is specified like this:\n\n${helper.codify(helper.dataText(ds, helper.random))}\n\nYou can use the _Data()_ method to retrieve a data point. If you run\n\nds.Data(${helper.codify(helper.dataText(ds, helper.random))})\n\nyou get:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"ds.Data(helper.dataText(ds, helper.random))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"md`A data point has a value (_${\n ds.Data(helper.dataText(ds, helper.random)).value\n}_) and can have a status (_${\n ds.Data(helper.dataText(ds, helper.random)).status\n}_).\n\nIf you specify a category for each dimension but one (for example, _${\n ds.id[ds.length - 1]\n}_), _Data()_ returns a collection of data points. For example, \n\nds.Data(${helper.codify(\n helper.dataText(ds, helper.openRandom(helper.random))\n)})\n\nreturns:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"ds.Data(helper.dataText(ds, helper.openRandom(helper.random)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`Tip: If you don't care about status, run instead:\n\nds.Data(${helper.codify(\n helper.dataText(ds, helper.openRandom(helper.random))\n)}, **false**)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"ds.Data(helper.dataText(ds, helper.openRandom(helper.random)), false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`Each data point corresponds to a category of the _${\n ds.id[ds.length - 1]\n}_ dimension:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"md`*Ids*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"ds.Dimension(ds.id[ds.length-1]).id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"md`*Labels*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"ds.Dimension(ds.id[ds.length-1],false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md `## Applying Filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`_Data()_ is used to extract simple data (single data points or one-dimensional arrays). Do not use it to define a subset. If you need to create a subset of the original dataset use _Dice()_.\n\nIn this notebook, we will build a smaller dataset by selecting the first category of each dimension but _${d}_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`To create a subset, we need to define a filter:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"filter = ds.id.filter(e => e !== d).map(e => [e, [ds.Dimension(e).id[0]]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`Filters can be expressed as objects or as arrays. Objects are probably more expressive. The previous filter looks like this in object form:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"helper.objectify(filter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`Even though they are very similar, filters are not to be confused with the data points objects used in _Data()_. For instance, a filter can include a single dimension while _Data()_ cannot. Or a filter can include several categories of a dimension while _Data()_ cannot.\n\nYou can use _Dice()_ to create a subset of _ds_. The information of the new subset will be stored as a jsonstat instance named _filtered_. _filtered_ is like _ds_ but with the following dimensions filtered for the following categories: ${helper.filterText(\n ds,\n filter\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"filtered = ds.Dice(filter, { clone: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"md`(By default, _Dice()_ modifies the original dataset unless the option _clone: true_ is specified.)\n\nThe subset has **${filtered.n.toLocaleString(\"en-US\")} values**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md `## Processing the Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`In JSON-stat, data and metadata are totally apart. If you need to process or display the data you will probably need a simpler structure. You can use _Transform()_ (see [Avoiding JSON-stat semantics: The JSONSTAT-TOOLKIT Transform Method](https://observablehq.com/@jsonstat/transform)) to create an array of objects from a jsonstat instance:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"data = filtered.Transform({ type: \"arrobj\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`(In older version of the **jsonstat-toolkit**, use _toTable()_ instead of _Transform()_.)\n\n_Transform()_ has many options and supports several output formats. Please check the [docs](https://github.com/jsonstat/toolkit/blob/master/docs/API.md#totable).\n\n## _Bonus Track_: Displaying the Data\n\nUsing the output from _Transform()_ you can design a process that, for example, creates a table to embed in a web page. If you are in a hurry and you just want to browse the data, you can always use one of the solutions included in the **[jsonstat-suite](https://www.npmjs.com/package/jsonstat-suite)**, a set of high level functions built on top of jsonstat-toolkit.\n\nTo display the contents of the _filtered_ dataset we are going to use [_datalist()_](https://github.com/jsonstat/suite/blob/master/docs/datalist.md). This is the result:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"html`${datalist(filtered, { counter: true })}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## Further Reading \n\n- The [jsonstat-toolkit API](https://github.com/jsonstat/toolkit/blob/master/docs/API.md)\n\n---\n\n## Requirements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md`### jsonstat-toolkit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"JSONstat = require(\"jsonstat-toolkit@2.2.2\").catch(() => window[\"JSONstat\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`### jsonstat-suite _datalist()_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import { datalist } from \"@jsonstat/suite\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`### Vega-lite for the bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"md`### Sample URLs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"url = inputs.urls[index]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`### Helper Functions and Variables Used in this Notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"md`### Styles Used in this Notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"