31:[] 2f:{"title":"World Bank API - Meet Vega Lite","cells":[{"id":0,"value":"md`# World Bank API - Meet Vega Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`\nThe [**World Bank Open Data**](https://data.worldbank.org/) portal is designed to make World Bank data easy to find, download, and use. Data can be used free of charge with [minimal restrictions](https://data.worldbank.org/summary-terms-of-use). Data are a subset of those available in the World Bank’s [**DataBank**](http://databank.worldbank.org/), which contains extensive collections of time series data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`\nThe World Bank Open Data Portal also offers a data viewer, which helps users easily find, filter, and view information—for example with the following chart:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\nIt is possible to quickly chart out the World Bank data in a similar way using [**Vega-Lite**](https://vega.github.io/vega-lite)—a declarative language for interactive data visualization, offering a concise visualization grammar for a range of statistical graphics. ^{[[ref](https://observablehq.com/@uwdata/introduction-to-vega-lite)]}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`\n**Walkthough**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`\nGrab out specific information on a topic of interest via the DataBank API:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"electric_power_consumption_india = (await fetch(\"https://api.worldbank.org/v2/country/ind/indicator/EG.USE.ELEC.KH.PC?format=json&per_page=100\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"electric_power_consumption_bangladesh = await fetch(\"https://api.worldbank.org/v2/country/bgd/indicator/EG.USE.ELEC.KH.PC?format=json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"electric_power_consumption_sri_lanka = await fetch(\"https://api.worldbank.org/v2/country/lka/indicator/EG.USE.ELEC.KH.PC?format=json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"electric_power_consumption_india_focused = electric_power_consumption_india[1].map(({\"date\":date, \"value\":value,}) => ({\n date: parseInt(date),\n value,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"electric_power_consumption_sri_lanka_focused = electric_power_consumption_sri_lanka[1].map(({\"date\":date, \"value\":value,}) => ({\n date: parseInt(date),\n value,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"electric_power_consumption_bangladesh_focused = electric_power_consumption_bangladesh[1].map(({\"date\":date, \"value\":value,}) => ({\n date: parseInt(date),\n value,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"india_range = electric_power_consumption_india_focused.filter(f => \n f.date >= 1971 && f.date <= 2014\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"bangladesh_range = electric_power_consumption_bangladesh_focused.filter(f => \n f.date >= 1971 && f.date <= 2014\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"sri_lanka_range = electric_power_consumption_sri_lanka_focused.filter(f => \n f.date >= 1971 && f.date <= 2014\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`\nVisualizing the results of one API query at a time is pretty straight forward:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"sri_lanka_table = printTable(sri_lanka_range.slice(0, 5)) // display the first five rows","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"sri_lanka_line_chart = vl.markLine({ \n interpolate: \"monotone\" // \"step\" | \"linear\" | \"monotone\" | ...\n })\n .title(\"Electric power consumption (kWh per capita)\")\n .width(400)\n .height(200)\n .data(vl.inlineData(sri_lanka_range).format({parse: {date: \"date:'%Y'\"}}))\n .encode(\n vl.x().fieldT(\"date\")\n .title('Year'),\n \n vl.y().fieldQ(\"value\")\n .title('kWh')\n .axis({ tickCount: 2 }),\n ).render(\n {renderer: \"SVG\" }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`\nIn order to visualize the results of mulitple API calls, one must merge the outputs of each into a single [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"grouped_data = [\n ...india_range.map(row => ({ country: 'India', ...row })), // I am guessing 'row' is explained in the docs?\n ...bangladesh_range.map(row => ({ country: 'Bangladesh', ...row })), // Sorry, 'row' is just a variable name I invented\n ...sri_lanka_range.map(row => ({ country: 'Sri Lanka', ...row }))\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`\nOnce the data processing is in order, one has two options for rendering the data in Observable:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`\nUsing the embed method, and [defining the chart in JSON](https://vega.github.io/vega-lite/docs/spec.html):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"embed({\n description: \"Electric power consumption (kWh per capita)\",\n data: {\n values: grouped_data,\n format: { parse: { date: \"date:'%Y'\" } }\n },\n mark: \"line\", \"tooltip\": {\"content\": \"data\"},\n encoding: {\n x: { field: \"date\", type: \"temporal\" },\n y: { field: \"value\", type: \"quantitative\" },\n color: { field: \"country\", type: \"nominal\" }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"grouped_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`\nSimilarly [using the API](https://vega.github.io/vega-lite-api/):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"vl\n .markLine()\n .description(\"Electric power consumption (kWh per capita)\")\n .width(width / 2)\n .data(vl.inlineData(grouped_data).format({parse: {date: \"date:'%Y'\"}})) // Using the country_group_array data (below)\n .encode(\n vl\n .x()\n .fieldT(\"date\") // For x, use the date field // .fieldT is equivalent to .type(\"temporal\")\n .title('Year'),\n vl\n .y()\n .fieldQ(\"value\") // For y, use the one_observation_per_row \"value: field // fieldQ is equivalent to .type(\"quantitative\")\n .title('KWh'),\n vl.tooltip([vl.fieldO('date'), vl.fieldQ('value')]),\n vl\n .color()\n .fieldN('country')\n .title('Country'),\n vl.opacity().value(1)\n )\n .render() // Draw the chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`\n### Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"embed = require('vega-embed@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof lionel = Object.defineProperty(\n html`

`,\n 'value',\n {\n get() {\n return this.outerHTML;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof chrispahm = Object.defineProperty(\n html`

`,\n 'value',\n {\n get() {\n return this.outerHTML;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"viewof visnu = Object.defineProperty(\n html`

`,\n 'value',\n {\n get() {\n return this.outerHTML;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"viewof dominik = Object.defineProperty(\n html`

`,\n 'value',\n {\n get() {\n return this.outerHTML;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\n### References\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`\n#### Official Docs\n\n* [Introduction to Vega-Lite](https://vega.github.io/vega-lite/tutorials/getting_started.html#the-data)\n* [Data](https://vega.github.io/vega-lite/docs/data.html)\n* [Exploring Data](https://vega.github.io/vega-lite/tutorials/explore.html)\n* [Repeat and Layer to Show Different Movie Measures](https://vega.github.io/vega-lite/examples/repeat_layer.html)\n* [Example Gallery](https://vega.github.io/vega-lite/examples/#line-charts)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`\n#### Notebooks\n* Jeffrey Heer. [Introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite)\n* Jeffrey Heer. [\"Multi-Line Chart Data Preparation\"](https://observablehq.com/@uwdata/multi-line-chart-data-preparation).\n* Jeffrey Heer. [\"Tidy Data in JavaScript\"](https://observablehq.com/@uwdata/tidy-data-in-javascript).\n* Luc Guillemot. [\"Workshop: The Grammar of vega-lite.\"](https://observablehq.com/@lucguillemot/the-grammar-of-vega-lite)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`\n#### Collections\n* [Observable for Vega-lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite), a collection of notebooks by Visnu Pitiyanuvath.\n* [Visualization Curriculum](https://observablehq.com/collection/@uwdata/visualization-curriculum), a collection of notebooks by Jeffrey Heer.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`\n---\n**Big thanks** to ${viewof lionel} [Lionel Radisson](https://observablehq.com/@makio135) for showing me how an API works, to ${viewof chrispahm} [Christoph Pahmeyer](https://observablehq.com/@chrispahm) for walking me through [Vega Lite](https://vega.github.io/vega-lite/), and to ${viewof visnu} [Visnu Pitiyanuvath](https://observablehq.com/@visnup) for [opening my eyes](https://www.youtube.com/watch?v=ZV_Yjcs5WtM&list=PLdRZWLkK99Q9TMyYJ0ZlpUo95AIrx0qBg&index=1) to the power of this charting library! Thanks also to ${viewof dominik} [Dominik Moritz](https://observablehq.com/@domoritz) for the [kind suggestions for improvement](https://observablehq.com/compare/a10dc0b262f721ac@495...1bf2a635edc383e8@539)!\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}