2b:null 2c:["$","title",null,{"children":"Untitled | Swansea Data Visualisation | Observable"}] 31:T4bc,## Further Reading After completing all lab tasks, further read this documentation on map charts (Cartographic Visualisation): https://observablehq.com/@uwdata/cartographic-visualization?collection=@uwdata/visualization-curriculum ## Vega-lite Documentation and Additional Resources After completing all lab tasks, please check and familiarize yourself with the [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/) for more details on how to use its different JSON-based specifications. - Introduction to Vegalite API (Javascript programming-based) [here](https://observablehq.com/@uwdata/introduction-to-vega-lite?collection=@uwdata/visualization-curriculum). - Introduction to Vegalite (JASON-based) [here](https://observablehq.com/@uwdata/introduction-to-vega-lite-json). - More info and resources about use of marks and channels here using the VegaLite API version 5 [here]( https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels?collection=@uwdata/visualization-curriculum). - Check the full Vega-Lite API reference [here](https://vega.github.io/vega-lite-api/api/). - Observable user manual [here](https://observablehq.com/@observablehq/user-manual).32:T4bc,forkIcon = () => htl.html``33:[{"id":"10e614da600ff93a87f2b687f5d1019acc2fbf2a49fc6147201f57eb5fc7a1571148250217d936bc7a797c63311f9f7a49eb6531eb33c4e1011f0c6d7b768a92","href":"https://static.observableusercontent.com/files/10e614da600ff93a87f2b687f5d1019acc2fbf2a49fc6147201f57eb5fc7a1571148250217d936bc7a797c63311f9f7a49eb6531eb33c4e1011f0c6d7b768a92","name":"gb.csv","type":"text/csv","lastModified":1761055522235.016,"size":18027}] 2f:{"id":"e26126d0068a989a","slug":"untitled","title":"","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-10-21T13:58:25.570Z","update_time":"$D2026-09-10T08:50:36.669Z","view_time":null,"first_public_time":"$D2026-09-10T09:04:55.873Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"027897a0403d17c5","login":"swansea-data-visualisation","name":"Swansea Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/733938faec3dc38bb7b64457127cd46df078b54b45eac75c895dd27971210f95","tier":"starter_2024"},"version":2312,"publish_version":2312,"role":null,"authored":false,"authors":[{"type":"individual","id":"d2069daef79534b5","login":"matt-ploszajski","name":"Matt Ploszajski","avatar_url":"https://avatars-next.observableusercontent.com/ba1251b4b4c8f6df7b01180a6a9af4ae162fd586f838a8e777ec105482066a45","tier":null}],"members":[{"type":"individual","id":"d2069daef79534b5","login":"matt-ploszajski","name":"Matt Ploszajski","avatar_url":"https://avatars-next.observableusercontent.com/ba1251b4b4c8f6df7b01180a6a9af4ae162fd586f838a8e777ec105482066a45","tier":null,"role":"editor"},{"type":"team","id":"027897a0403d17c5","login":"swansea-data-visualisation","name":"Swansea Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/733938faec3dc38bb7b64457127cd46df078b54b45eac75c895dd27971210f95","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":1392,"value":"Use the Fork button (${forkIcon()}) to make a copy of this notebook in your Observable account.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2307,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1857,"value":"# Lab 4 Guideline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1860,"value":"Learning objectives:\n - Identify and familiarize with the Vega-lite documentation available online.\n - Create map charts from an imported dataset.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2110,"value":"## Map Chart (Cartographic Visualisation)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2124,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"## UK Cities Map Chart\n\n1) Import the UK cities dataset from [simplemaps.com.](https://simplemaps.com/data/gb-cities) and store it in the variable data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2113,"value":"// Import the UK cities dataset from simplemaps.com. and store it in the variable data\ndata = FileAttachment(\"gb.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2297,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldN('city'),\n vl.y().fieldQ('population_proper'),\n vl.tooltip(['city', 'population_proper'])\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2118,"value":"With VegaLite, it is possible to visualise map geometry data according to latitude and longitude: vl.longitude() and vl.latitude().\n\n2) Generate a visualisation that shows city location based on geographic location data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2120,"value":"//Generate a visualisation that shows city location based on geographic location data\nvl.markSquare({size: 1, opacity: 1})\n.data(data)\n.encode(\nvl.longitude().fieldQ('lng'),\nvl.latitude().fieldQ('lat')\n)\n.config({view: {stroke: null}})\n.render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2122,"value":"Let's use the TopoJSON data from UKGeoJSON for UK geometry.\n\n3) import UK topography","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2126,"value":"//import UKtopo\nukTopo = await d3.json(\"https://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2273,"value":"4) Generate visualisation based on UKtopo data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2128,"value":"//generate visualisation based on UKtopo data\nvl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})\n.data(vl.topojson(ukTopo).feature('eer'))\n.render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2153,"value":"5) Combine the city data layer and the geometry layer in one single map chart:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2133,"value":"//Combine the city data layer and the geometry layer in one single map chart\n{\nconst map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})\n.data(vl.topojson(ukTopo).feature('eer'));\nconst points = vl.markCircle({size: 9})\n.data(data)\n.encode(\n vl.latitude().fieldQ('lat'),\nvl.longitude().fieldQ('lng'),\nvl.tooltip().fieldN('city')\n);\nreturn vl.layer(map, points)\n.width(900).height(500)\n.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"## USA Zipcodes Map Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2175,"value":"import {vl} from '@vega/vega-lite-api-v5'\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2198,"value":"- Import datasets from the vega-lite library:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2246,"value":"datasets = require('vega-datasets@1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2200,"value":"1) Import USA zipcodes data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"//Import USA zipcodes data.\nzipcodes = \"https://cdn.jsdelivr.net/npm/vega-datasets@1.31.1/data/zipcodes.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2196,"value":"2) Generate a visualisation for zipcode location on USA map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2145,"value":"//Generate a visualisation for zipcode location on USA map\nvl.markSquare({size: 1, opacity: 1})\n.data(zipcodes)\n.encode(\nvl.longitude().fieldQ('longitude'),\nvl.latitude().fieldQ('latitude')\n)\n.project(vl.projection('albersUsa'))\n.width(900)\n.height(500)\n.config({view: {stroke: null}})\n.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2230,"value":"## USA Airports Map Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2206,"value":"1) Import USA topology:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2173,"value":"//Import USA topology\nusa = datasets['us-10m.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2209,"value":"2) Import USA airports dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2305,"value":"Inputs.table(airports)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2179,"value":"//Import USA airports dataset\nairports = \"https://cdn.jsdelivr.net/npm/vega-datasets@1.31.1/data/airports.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2211,"value":"3) Create visualisation of the USA topography with airport location information:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2171,"value":"//Create visualisation of the USA topography with airport location information\n{\nconst map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})\n.data(vl.topojson(usa).feature('states'));\n \nconst points = vl.markCircle({size: 9})\n.data(airports)\n.encode(\nvl.latitude().fieldQ('latitude'),\nvl.longitude().fieldQ('longitude'),\nvl.tooltip().fieldN('iata')\n);\nreturn vl.layer(map, points)\n.project(vl.projection('albersUsa'))\n.width(900).height(500)\n.config({view: {stroke: null}})\n.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2050,"value":"\n\n## How to find which functions to call? \n1. Search for what you wish to do in the following location:\n * [Vega-Lite API collection](https://observablehq.com/collection/@vega/vega-lite-api)\n * [Vega-Lite gallery](https://vega.github.io/vega-lite/examples/)\n * [Vega gallery](https://vega.github.io/vega/examples/)\n2. Look for the relevant part of the specification.\n3. Check [Vega-Lite reference](https://vega.github.io/vega-lite-api/api/) for function calls.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":759,"value":"---\n\n\n\n\n\n\n### \n### \n### \n### Appendix\nStuff below are defined so that code above show accordingly. Feel free to ignore them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":180,"value":"minimapIcon = () => htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1390,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"import {mac, keySymbols, keyWords} from \"@observablehq/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"function keys(keyset) {\n return mac\n ? keyWords(keyset) === keySymbols(keyset)\n ? html`

${keyWords(keyset)}

`\n : html`

${keyWords(keyset)} ${keySymbols(\n keyset\n )}

`\n : html`

${keyWords(keyset)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"