27:null 28:["$","title",null,{"children":"Lab 1: Introduction to Vega-Lite | chatchavan | Observable"}] 2d:T72e,## Exercise 1 1. Inspect the two data formats above (table and JSON array). Notice how the rows and columns corresponds to the JSON 2. Download the data of UK cities from [simplemaps.com](https://simplemaps.com/data/gb-cities) to your computer. 3. Use Observable's [attach file](https://observablehq.com/@observablehq/file-attachments) feature () to attach the file. 4. Create a cell below to load the data into this notebook and assign it to `ukCities`. 5. Preview the loaded data in a table 6. If you finished the steps above, let us know via [this poll](https://app.sli.do/event/1bpWRWSYwNjjB7Nx7pX7Pa/live/polls). 7. If you finish early, try the following: * Use the Observable keyboard shortcuts to create new cells * Write a temperature converter from °C to Fahrenheit. * Run your cell with a keyboard shortcut2e:T4f4,{ const selectedInterval = vl.selectInterval("selected_interval") .encodings("y"); const pointPlot = vl.markPoint() .params(selectedInterval) .encode( vl.color().fieldN("drv"), vl.opacity().if(selectedInterval, vl.value(1)).value(0.3), vl.size().if(selectedInterval, vl.value(100)).value(10) ); const linePlot = vl.markLine() .encode( vl.stroke().fieldN("drv") ) .transform( vl.filter(selectedInterval), // add selection interval vl.regression("hwy").on("displ").groupby("drv") ); const mainPlot = vl.layer(pointPlot, linePlot) .data(mpg) .encode( vl.x().fieldQ("displ"), vl.y().fieldQ("hwy") ); //----------------------- const histogramPlot = vl.markBar() .data(mpg) .transform( vl.filter(selectedInterval), // add selection interval ) .encode( vl.y().fieldQ("hwy").bin(true).scale({domain: [0, 45]}), vl.x().aggregate("count").scale({domain: [0, 100]}) ) .width(100); //----------------------- // concatenation return vl.hconcat(histogramPlot, mainPlot) .render() }2f:T4bc,forkIcon = () => htl.html``30:[] 2b:{"id":"639e780ffd3377c2","slug":null,"title":"Lab 1: Introduction to Vega-Lite","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-09T00:41:47.760Z","update_time":"$D2023-02-09T13:23:22.959Z","view_time":null,"first_public_time":"$D2023-02-09T00:41:47.760Z","has_unpublished_edits":null,"fork":{"id":"0b5bf7796c234050","slug":null,"title":"Playground","owner":{"id":"d466550c63861b95","login":"chatchavan","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d466550c63861b95","login":"chatchavan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3665cdbaa35796d248f50ae978e98506a11470628250bf2c08b7b061ca2a7029","tier":"starter_2024"},"version":1413,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac033e5860d0cb69","login":"chatchavan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3665cdbaa35796d248f50ae978e98506a11470628250bf2c08b7b061ca2a7029","tier":null}],"members":[{"type":"individual","id":"ac033e5860d0cb69","login":"chatchavan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3665cdbaa35796d248f50ae978e98506a11470628250bf2c08b7b061ca2a7029","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":70,"collection":{"id":"8cc73b4351cf75ce","slug":"swansea-university-data-visualisation-2023","title":"Swansea University Data Visualisation 2023","owner":{"id":"d466550c63861b95","login":"chatchavan","name":""}},"type":"notebook","body":{"title":"Lab 1: Introduction to Vega-Lite","cells":[{"id":265,"value":"# Lab 1: Introduction to Vega-Lite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1402,"value":"👉 If you usually arrive late on Thursday lecture (11:00), please answer this [3-question survey](https://forms.office.com/e/4U1B3CEp7v) (~1 min)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","output":"","database":"$undefined"},{"id":1397,"value":"## Learning objectives\n* Students can visualise table and map data.\n* Students can compose multiple views.\n* Students can create interactive charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"# Observable basics ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":859,"value":"Observable provides three types of cells. This cell is a **Markdown cell**, which allows using [Markdown syntax](https://observablehq.com/@observablehq/markdown-quick-reference) to write formatted text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":861,"value":"This cell is a HTML cell. Markdown syntax like **double-asterisks** won't work.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":863,"value":"// This cell is a Javascript cell. The results of the calculation is shown above the cell.\n1 + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"Observable provides many built-in utilities from [Observable Standard Library](https://observablehq.com/@observablehq/stdlib) that are helpful for data visualisation. We can access them directly in a cell.\nFor example, the variable `width` returns the current page width. Try resizing the window and observe how the value of the `width` in the following cell updates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"* Observable is reactive: Dependent cells are updated automatically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"height = width * 0.3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"## Reactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"* Swapping order of cells for execution is OK.\n * For more details, see [How Observable runs](https://observablehq.com/@observablehq/how-observable-runs)\n* Minimap (${minimapIcon()}) on the right-hand toolbar shows cell dependencies. \n * For more details, see [Minimap](https://observablehq.com/@observablehq/minimap)\n* Variable re-assignment in different cells is not possible","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"myVar = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"myVar += 10 // The SyntaxError in this cell is intentional","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"## Block","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"Wrapping multi-line code with curly braces creates a local scope within the block that is independent from others.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"{\n let myVar = 15;\n return myVar;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"myVar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"## String interpolation (dynamic value)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"\"height value is \" + height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"`height value is ${height}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"## Frequently-used keyboard shortcuts\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"\n\n\n

${keys(\"Shift-Enter\")}: Run cell
${keys(\"Mod-Enter\")}: Insert cell below
${keys(mac ? \"Shift-Cmd-Enter\" : \"Shift-Ctrl-Enter\")}: Insert cell above
${keys(\"Mod-/\")}\n: Comment lines
${keys(\"Ctrl-Space\")}: Show code suggestions
${keys(\"Tab\")}: Accept code suggestion

\n\nFor other keyboard shortcuts, see [Observable Keyboard Shortcuts page](https://observablehq.com/@observablehq/keyboard-shortcuts?collection=@observablehq/introduction)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":851,"value":"# SVG\nSVG is a mark up language, like HTML, but it represents vector graphics. For example, we can draw a circle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":853,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"We can use the [Web Element Inspector](https://blog.hubspot.com/website/how-to-inspect) to check the actual elements.\n\nFor list of possible SVG tags and their attributes, see [MDN SVG references](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#svg_elements_by_category).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"# Loading data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1338,"value":"We will use a function from `d3.js` library to read the data from the CSV format and parse it into a JSON format.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1335,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"mpg = await d3.csv(\"https://raw.githubusercontent.com/tidyverse/ggplot2/main/data-raw/mpg.csv\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"Data loading only work if the given URL allows [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).\n* GitHub files or gist: Use the URL from the \"Raw\" button.\n\n## Other ways to load data\n* [Attach file](https://observablehq.com/@observablehq/file-attachments) to Observable notebook\n* Provide [file input](https://observablehq.com/@observablehq/input-file) for the user to select a file from their local machine\n* [Other data formats](https://observablehq.com/@dakoop/reading-in-data-learn-js-data)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1327,"value":"## Previewing the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1319,"value":"You can preview the data by the following command. The [`Inputs.table()`](https://observablehq.com/@observablehq/inputs#cell-359) is from the [Observable Standard Library](https://observablehq.com/@observablehq/stdlib).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1317,"value":"viewof rows = Inputs.table(mpg)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"This data is about [car fuel economy](https://ggplot2.tidyverse.org/reference/mpg.html).\n\nAttribute | Description\n --: | :--\n`manufacturer`\t|\tmanufacturer name\n`model`\t|\tmodel name\n`displ`\t|\tengine displacement, in litres\n`year`\t|\tyear of manufacture\n`cyl`\t|\tnumber of cylinders\n`trans`\t|\ttype of transmission\n`drv`\t|\tdrive train type (f:front-wheel drive, r: rear wheel drive, 4: 4-wheel drive)\n`cty`\t|\tcity miles per gallon\n`hwy`\t|\thighway miles per gallon\n`fl`\t|\tfuel type (e = etahnol, d: diesel, r: regular, p: premium, c: compressed natural gas)\n`class`\t|\tcar type (e.g., compact, SUV, pickup)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1333,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1350,"value":"// TODO: add code to load data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"// TODO: add code to preview data in a table","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"# Vega-Lite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().field(\"displ\").type(\"quantitative\"),\n vl.y().field(\"hwy\").type(\"quantitative\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"By default, Vega-Lite uses HTML5 `canvas` for high-performance rendering. We can change the rendering to SVG to make it easier to debug with web element inspector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().field(\"displ\").type(\"quantitative\"),\n vl.y().field(\"hwy\").type(\"quantitative\")\n )\n .render({renderer: \"svg\"}) // changed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"Try commenting out the following lines and observe how the output changes. Also use Web inspector to check the changes in the elements.\n* Comment out the line `vl.x()…`\n* Commenting out the entire `.encode()` function (4 lines)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"`field().type()` are frequently used, so Vega-Lite provide shortcuts `fieldQ()`, `fieldN()` and [several others](https://vega.github.io/vega-lite-api/api/#references):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"), // changed\n vl.y().fieldQ(\"hwy\") // changed\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"Let's add the drive (`drv`) attribute, which is nominal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.color().fieldN(\"drv\") // changed\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"## Inspecting the Vega-Lite specification","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"We can see the generated JSON specification.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"{\n const plot = vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.color().fieldN(\"drv\")\n )\n return plot.toObject()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"We can also look into the Vega specification, which is the result of the compilation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"{\n const plot = vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.color().fieldN(\"drv\")\n )\n return vl.vegalite.compile(plot.toObject()).spec // changed\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"Vega specification contains more details. Vega-Lite supply these sensible details, but we can change them to customize our plots. Possibilities are in the [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/). \n\nExamples:\n* [`markPoint`](https://vega.github.io/vega-lite/docs/point.html)\n* [`mark`](https://vega.github.io/vega-lite/docs/mark.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"From the documentation, we can change the blank points to filled points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":845,"value":"{\n const plot = vl.markPoint({filled: true}) // changed\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.color().fieldN(\"drv\")\n )\n return plot.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"## Exercise 2\n1. Create a scatterplot from the UK cities dataset to show the relationship between `population` and `population_proper` (population in the city-proper area).\n2. Because of the high population in London, other cities are compressed into a corner. Improve your plot by applying the [log scale](https://vega.github.io/vega-lite/docs/scale.html#log).\n3. If you finished the steps above, let us know via [this poll](https://app.sli.do/event/1bpWRWSYwNjjB7Nx7pX7Pa/live/polls).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1356,"value":"// TODO make a scatter plot here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"## Transformation\nLet's modify the code to create regression lines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":390,"value":"vl.markLine() // changed mark type\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.stroke().fieldN(\"drv\") // encode stroke color (instead of previously fill color)\n )\n .transform( // added the transformation\n vl.regression(\"hwy\").on(\"displ\").groupby(\"drv\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"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","output":"","database":"$undefined"},{"id":406,"value":"## Layering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":410,"value":"We will now combine the two plots above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"{\n const pointPlot = vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.color().fieldN(\"drv\")\n )\n\n // ------------------------\n const linePlot = vl.markLine()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\"),\n vl.stroke().fieldN(\"drv\")\n )\n .transform( \n vl.regression(\"hwy\").on(\"displ\").groupby(\"drv\")\n )\n\n // ------------------------\n // layering\n return vl.layer(pointPlot, linePlot)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"Both layers commonly use the same dataset (`mpg`) and encode the same attributes (`displ`, `hwy`). We can refactor those specification out and apply them to the layer. In this way, we avoid writing duplicate code, which could be tricky to maintain.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"{\n const pointPlot = vl.markPoint()\n .encode(\n vl.color().fieldN(\"drv\")\n )\n\n const linePlot = vl.markLine()\n .encode(\n vl.stroke().fieldN(\"drv\")\n )\n .transform( \n vl.regression(\"hwy\").on(\"displ\").groupby(\"drv\")\n )\n\n return vl.layer(pointPlot, linePlot)\n .data(mpg) // common specification\n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\")\n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"## Histogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"Let's create a histogram of highway miles per gallon (`hwy`). This plot exemplifies the bar mark, binning, and aggregation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"vl.markBar()\n .data(mpg)\n .encode(\n vl.y().fieldQ(\"hwy\").bin(true),\n vl.x().aggregate(\"count\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"## Concatenation\nWe can combine the histogram and the scatterplot together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"{\n const pointPlot = vl.markPoint()\n .encode(\n vl.color().fieldN(\"drv\")\n );\n\n const linePlot = vl.markLine()\n .encode(\n vl.stroke().fieldN(\"drv\")\n )\n .transform( \n vl.regression(\"hwy\").on(\"displ\").groupby(\"drv\")\n );\n\n const mainPlot = vl.layer(pointPlot, linePlot)\n .data(mpg) \n .encode(\n vl.x().fieldQ(\"displ\"),\n vl.y().fieldQ(\"hwy\")\n );\n\n //-----------------------\n \n const histogramPlot = vl.markBar()\n .data(mpg)\n .encode(\n vl.y().fieldQ(\"hwy\").bin(true).scale({domain: [0, 45]}), // same scale for both plots\n vl.x().aggregate(\"count\").scale({domain: [0, 100]}) // also fix the scale here\n )\n .width(100); // added specification for the plot width\n\n //-----------------------\n \n // concatenation\n return vl.hconcat(histogramPlot, mainPlot)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"For more view composition, check out the following:\n* [Layered plots and multiple view examples](https://vega.github.io/vega-lite/examples/#layered-plots)\n* Documentation on [View composition](https://vega.github.io/vega-lite/docs/composition.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1359,"value":"## Exercise 3\n1. Try creating a histogram based on the `displ` attribute and concatenate it at the bottom of the scatterplot.\n2. Check how [this example](https://vega.github.io/vega-lite/examples/concat_marginal_histograms.html) removes the axis titles. Try removing the axis titles from your histograms.\n3. If you finished the steps above, let us know via [this poll](https://app.sli.do/event/1bpWRWSYwNjjB7Nx7pX7Pa/live/polls).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1367,"value":"// TODO: Write your code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"## Interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"We can substitute static values with a **parameter** that could be changed interactively. To allow the user to change the parameter value, we **bind** the parameter to a user interface control such as slider.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"{\n\n // creating a parameter\n const xMaxParam = vl.param(\"x_max\")\n .value(10) // initial value\n .bind(vl.slider(0, 10, 1).name(\"Max. engine displacement: \")) // adding slider with min, max, step\n\n const plot = vl.markPoint()\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\").scale({domain: [0, 10]}), // fix the horizontal axis scale\n vl.y().fieldQ(\"hwy\").scale({domain: [0, 45]}), // ditto for vertical axis\n vl.color().fieldN(\"drv\")\n )\n .params(xMaxParam) // specify that we use this parameter in the spec\n .transform(\n vl.filter(\"datum.displ < x_max\") // filter to check each data point (referred to as `datum`)\n )\n\n \n return plot.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"When layering, `param()` needs to be added to the `layer()` instead of individual plots inside.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"{\n const xMaxParam = vl.param(\"x_max\")\n .value(10) \n .bind(vl.slider(0, 10, 1).name(\"Max. engine displacement: \"))\n\n const pointPlot = vl.markPoint()\n .encode(\n vl.color().fieldN(\"drv\")\n )\n \n const linePlot = vl.markLine()\n .encode(\n vl.stroke().fieldN(\"drv\")\n )\n .transform(\n vl.regression(\"hwy\").on(\"displ\").groupby(\"drv\")\n )\n\n // layering\n return vl.layer(pointPlot, linePlot)\n .data(mpg)\n .encode(\n vl.x().fieldQ(\"displ\").scale({domain: [0, 10]}),\n vl.y().fieldQ(\"hwy\").scale({domain: [0, 45]})\n )\n .params(xMaxParam) // param\n .transform(\n vl.filter(\"datum.displ < x_max\")\n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"We can also allow the users to interact with data directly by using **selections**:\n* [`vl.selectPoint()`](https://vega.github.io/vega-lite-api/api/selectPoint) allows interactions with data points.\n* [`vl.selectInterval()`](https://vega.github.io/vega-lite-api/api/selectInterval) allows the user to select a range of values.\n\nLet's first have a look at point selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":531,"value":"{\n const selectedPoint = vl.selectPoint(\"selected_point\") // creating the point selection\n .on(\"click\") // mouse click for selection\n .nearest(true) // when clicked, select the nearest point\n .clear(\"dblclick\"); // double click to clear selection\n \n const plot = vl.markPoint()\n .data(mpg)\n .params(selectedPoint) // param\n .encode(\n vl.x().fieldQ(\"displ\").scale({domain: [0, 10]}),\n vl.y().fieldQ(\"hwy\").scale({domain: [0, 45]}),\n vl.color().fieldN(\"drv\"),\n vl.opacity().if(selectedPoint, vl.value(1)).value(0.3), // change opacity based on selection\n vl.size().if(selectedPoint, vl.value(100)).value(10) // change opacity based on selection\n )\n \n return plot.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"The [`if()`](https://vega.github.io/vega-lite-api/api/opacity#if) function implements Vega-Lite [`condition`](https://vega.github.io/vega-lite/docs/condition.html). In the previous sentence, the first link shows Vega-Lite API webpage where you can find all functions that could be chained from `.opacity()`. The syntax and concepts are in the Vega-Lite documentation in second link.\n\nNow, let's have a look at the [`vl.selectInterval()`](https://vega.github.io/vega-lite-api/api/selectInterval).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"{\n const selectedInterval = vl.selectInterval(\"selected_interval\"); // creating the interval selection\n \n const plot = vl.markPoint()\n .data(mpg)\n .params(selectedInterval)\n .encode(\n vl.x().fieldQ(\"displ\").scale({domain: [0, 10]}),\n vl.y().fieldQ(\"hwy\").scale({domain: [0, 45]}),\n vl.color().fieldN(\"drv\"),\n vl.opacity().if(selectedInterval, vl.value(1)).value(0.3),\n vl.size().if(selectedInterval, vl.value(100)).value(10)\n )\n \n return plot.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"We can restrict the interval selection to one axis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"{\n const selectedInterval = vl.selectInterval(\"selected_interval\")\n .encodings(\"y\"); // restricting to vertical selection (y-axis)\n \n const plot = vl.markPoint()\n .data(mpg)\n .params(selectedInterval)\n .encode(\n vl.x().fieldQ(\"displ\").scale({domain: [0, 10]}),\n vl.y().fieldQ(\"hwy\").scale({domain: [0, 45]}),\n vl.color().fieldN(\"drv\"),\n vl.opacity().if(selectedInterval, vl.value(1)).value(0.3),\n vl.size().if(selectedInterval, vl.value(100)).value(10)\n )\n \n return plot.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"We can also the the interactivity in concatenated views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"## Exercise 4\n1. Write the code to allow interval selection on the histogram. Modify the scatterplot to show the selected data points.\n2. When you finish, let us know via [this poll](https://app.sli.do/event/1bpWRWSYwNjjB7Nx7pX7Pa/live/polls).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1365,"value":"// TODO: Write your code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"For more interaction possibilities, check out the following:\n* [John Frohlich's tutorial for interactivity](https://observablehq.com/@jonfroehlich/intro-to-interaction-in-vega-lite)\n* [Interactive chart examples](https://vega.github.io/vega-lite/examples/#interactive)\n* Documentation\n * [Dynamic behaviors](https://vega.github.io/vega-lite/docs/parameter.html)\n * [Bind](https://vega.github.io/vega-lite/docs/bind.html)\n * [Select](https://vega.github.io/vega-lite/docs/selection.html)\n* (Advanced) You can even implement [custom event handlers](https://observablehq.com/@visnup/vega-lite-data-out) in Javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1369,"value":"# Maps and cartographic data\nYou can visualize map geometry and plot data according to latitude and longitude. We will use the `ukCities` data that you attached to this notebook and loaded in Exercise 1:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1371,"value":"ukCities // This cell should not have RuntimeError if you have loaded the data from exercise 1 above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"We replace `vl.x()` and `vl.y()` with `vl.longitude()` and `vl.latitude()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1383,"value":"vl.markSquare({size: 1, opacity: 1})\n .data(ukCities)\n .encode(\n vl.longitude().fieldQ('lng'),\n vl.latitude().fieldQ('lat')\n )\n .config({view: {stroke: null}})\n .render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"Additionally, we will use the TopoJSON data from the [TopoJSON collection](https://github.com/deldersveld/topojson) for the geometry of the UK","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1379,"value":"ukTopo = await d3.json(\"https://raw.githubusercontent.com/deldersveld/topojson/master/countries/united-kingdom/uk-counties.json\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"{\n const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})\n .data(vl.topojson(ukTopo).feature('GBR_adm2'));\n return map.render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"## Exercise 5\n1. Combine the city data layer and the geometry layer.\n2. When you finish, let us know via [this poll](https://app.sli.do/event/1bpWRWSYwNjjB7Nx7pX7Pa/live/polls).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1389,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"# When Vega-Lite are not suitable\n* Vega-Lite cannot be programmatically manipulated at run time (short of re-generate the whole new view).\n* No interactions directly on the axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1399,"value":"# Leaving Observable\nIf you wish to use Observable outside notebook, you can [embed Observable runtime](https://observablehq.com/@observablehq/advanced-embeds) to your Javascript environment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":759,"value":"---\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","output":"","database":"$undefined"},{"id":180,"value":"minimapIcon = () => htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"import {mac, keySymbols, keyWords} from \"@observablehq/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"