31:T43d,# Week 1 Lab: Introduction to Observable and Vega-Lite This lab exercise covers the basics of **Vega-Lite** and how to generate simple graphs from a few lines of code. Topics covered in this specific notebook include: - How to initialize **Vega-Lite** in a notebook - How to import data - The basic syntax for plotting imported data - The importance of data types and tidy data - Different graph types provided by **Vega-Lite** This **Observable** notebook is heavily adapted from Visnu Pitiyanuvath's excellent starter notebook ["Charting with Vega-Lite"](https://observablehq.com/@observablehq/vega-lite).

[Note:] If you happen to refer to any documentation about **Vega-Lite**, such as its [online documentation](https://vega.github.io/vega-lite/docs/), they will provide **Vega-Lite** code in JavaScript Object class code that looks similar to `JSON` objects. However, the **Vega-Lite** API used in notebooks such as these follow some different syntax. We'll try to provide equivalents between the two whenever we can.

32:T86a,### 2a. Chart Types The first thing we did is indicate to **Vega-Lite** what kind of graph we want to use. The chart type we ended up with is `markCircle()`, which sets the graph type as a scatter plot with circular markings representing each observed data point. ```javascript vl.markCircle() // Make a scatter chart ``` #### Understand: There are other graph types that are immediately accessible - check out [Vega-Lite's documentation](https://vega.github.io/vega-lite/docs/mark.html#types) on the different types of marks you can use. Through its API, **Vega-Lite** provides some basic chart types. Here's a short list of some interesting types: |Mark Type|API Equivalent|Description| |:-:|:-:|:-| |"circle"|`markCircle()`|Creates scatter plots with filled circles as the marks| |"point"|`markPoint()`|Creates scatter plots with unfilled circles as the marks| |"square"|`markSquare()`|Creates scatter plots with squares as the marks| |"text"|`markText()`|Creates scatter plots with text markers instead of shape markers| |"tick"|`markTick()`|Creates scatter plots where marks are short vertical lines instead of points. Makes it easier to visualize in certain cases| |"line"|`markLine()`|Creates line plots across all the marks| |"bar"|`markBar()`|Creates bar plots akin to histograms| |"area"|`markArea()`|Creates plots with area under the (assumed) curve highlighted| |"rect"|`markRect()`|Creates arbitrary rectangles within a plot| |"rule"|`markRule()`|Creates special lines that can either connect two points on the plot or span an entire height/width of the plot| |"geoshape"|`markGeoshape()`|Renders GeoJSON files in arbitrary shapes/formats in a plot| For the most part, simple visualizations will stick to the first few of this table.

Exercise:

Replace markCircle() to generate different scatter plots using point, square, and tick.

[Note]: To "run" a cell, simply press "Shift" + "Enter" when the block is selected.

33:[{"id":"903217a114c7962d7de1289f99556e101e3a3a59ae223ade199371ab591cbcee0b75eb794c756a42bdffeb0b2d96c2ca248117aab06f8e317b45bf47e0c4ad6a","href":"https://static.observableusercontent.com/files/903217a114c7962d7de1289f99556e101e3a3a59ae223ade199371ab591cbcee0b75eb794c756a42bdffeb0b2d96c2ca248117aab06f8e317b45bf47e0c4ad6a","name":"cars.json","type":"application/json","lastModified":1757045274573.521,"size":100492},{"id":"cd63491eabc0c698ddc9ac424aaa94e5f84bf2d2c75a0dec048edce8aa2fd4f05c7afcfb5caabce29972a4e6ecb1a64c08b9e416312986cab0e0df43a23da40b","href":"https://static.observableusercontent.com/files/cd63491eabc0c698ddc9ac424aaa94e5f84bf2d2c75a0dec048edce8aa2fd4f05c7afcfb5caabce29972a4e6ecb1a64c08b9e416312986cab0e0df43a23da40b","name":"fork-icon.png","type":"image/png","lastModified":1788379913371,"size":155646},{"id":"7c3a98ef52a0f2f7e3d76e043a281ddb36314871b09d14cba64e651d41ab4d0e6da5484e5b61e9e9d5ae5054c2ba631e54f765118cc89f5ce63bc90b31d34fc4","href":"https://static.observableusercontent.com/files/7c3a98ef52a0f2f7e3d76e043a281ddb36314871b09d14cba64e651d41ab4d0e6da5484e5b61e9e9d5ae5054c2ba631e54f765118cc89f5ce63bc90b31d34fc4","name":"observable-javascript.png","type":"image/png","lastModified":1788380875943,"size":61220}] 2f:{"title":"Week 1 Lab: Introduction to Observable and Vega-Lite","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"## 0. Forking this Notebook\n\nOne of the hallmark functions of **Observable** is the ability to fork notebooks. This means you get to mess around with your own versions of notebooks without the fear of mutating the original notebook contents. We encourage that you fork this notebook into your own **Observable** collections so that you can reference it whenever.\n\n> _**Try it Yourself:** Fork this notebook by scrolling up to the top of the page and clicking the \"Fork this notebook\" button. Save it into your personal collection._\n\n

\n${await FileAttachment(\"fork-icon.png\").image()}\n

","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"## 1. Initializing Vega-Lite\n\nTo initialize **Vega-Lite**, you simply need the following code line. This line of code creates a variable `vl` that serves as a reference to the **Vega-Lite** library and its methods.\n\nUp until very recently, we would have relied on this variant of the import command:\n\n```\nimport {vl} from \"@vega/vega-lite-api\"\n```\n\nHowever, due to updates on Observable's end, this is no longer possible. Instead, please call this version as it has been robustly tested to work with Observable's new 2026 package library:","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import {vl} from \"@rk2546/infovis-cse-backend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"

[Note]: be careful of the \"typing\" of each code cell. New Observable notebooks default to using TypeScript; you can observe this in the top-right of each code block with a .ts. Right now, we've set it to Observable JavaScript (.ojs). Vega-Lite is only compatible with .ojs blocks, so we have to be careful to change them from .ts to .ojs by clicking it and selecting \"Observable JavaScript\".

${await FileAttachment(\"observable-javascript.png\").image()}

","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"## 2. Importing Data From Files\n\nWe need data to work with! This means we need to _import_ the necessary data into this notebook and load it so that it becomes accessible all across the notebook. There are several ways to import data. For now, let's focus on importing `cars.json`, which is a simple file that contains some information about car features.\n\n

\n [Note]: If you forked over this notebook, then Observable does a neat trick for you by also forking the original data file that was loaded. However, datasets are only copied along with the fork if they are used! If your code does not use a data file, then forking the notebook will NOT copy the data.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"\n// FileAttachement() reads the provided file.\n// `.json()` considers its original format to be in JSON form.\n\ncars = FileAttachment(\"cars.json\").json()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"If successfully loaded, you should see the table below filled with 5 value rows.\n\n${Inputs.table(cars.slice(0,5))}","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"## 2. A First Example and Practice with Vega-Lite Graphs\n\nLet's start with a very simple example to showcase how **Vega-Lite** works: plotting some data about cars. Observe the code block below and the resulting graph:","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"\n// We save the chart data inside of variable `chart1`, for later use.\nchart1 = vl.markCircle() // Make a scatter chart with circles\n .data(cars) // Using the cars data (below)\n .encode(\n vl.x().fieldQ(\"Horsepower\"), // For x, use the Horsepower field\n vl.y().fieldQ(\"Miles_per_Gallon\"), // For y, use the Miles_per_Gallon field\n vl.tooltip().fieldN(\"Name\") // For tooltips, show the Name field\n )\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"\nchart1.render() // Draw the chart separately.\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"The graph above implicates a relationship between Horsepower and Miles/Gallon: as the Horsepower of a vehicle increases, their Miles/Gallon decreases. Feel free to hover over the data points with your mouse to see the labels attached to each point.\n\nLet's take a moment to understand and decompose the specific code used here.","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"\nchart2 = vl.markCircle() // TO-DO: Change this to show point, square and tick plots instead.\n .data(cars)\n .encode(\n vl.x().fieldT(\"Year\"),\n vl.y().fieldQ(\"Horsepower\"),\n vl.tooltip().fieldN(\"Origin\")\n )\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"\n// Do not modify this\nchart2.render()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"### 2b. Data Source & Data Types\n\nIn the second line of the original plot code, we used the following:\n\n```javascript\n.data(cars) // Using the cars data (below)\n```\n\nThis code tells **Vega-Lite** to generate the plot using the data from the `cars.json` file we imported. It's good practice to understand how the original data is shaped and what features are contained within it.\n\n#### Understand:\n\nThe code block below shows the first item of the `cars` array we imported from `cars.json`. Observe the first item's features and what their value types are.","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"cars[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"It's important to recognize the specific data types that **Vega-Lite** expects from any imported data. **Vega-Lite** can accept the following data types:\n\n|Data Type|API Equivalent|Description|Examples|\n|:--|:--|:--|:--|\n|quantitative|\\`fieldQ()\\`| numerical magnitudes | 1, 1.2, 3, 4, $1,230.60|\n|temporal|\\`fieldT()\\`| corresponding to Date values | 2019-01-02T00:01:23Z, 1996|\n|nominal|\\`fieldN()\\`| unordered, categorical data | Audi, Ford, Hyundai, Tesla|\n|ordinal|\\`fieldO()\\`| like nominal, but with an inherent order | small, medium, large|\n\nThe data types will be important to consider in the next section.","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"### 2c. Encoding\n\nThe third line and its subsequent field functions define how the data should be treated in the graph. In Section 3b, we ended with acknowledging data types. Here is where that is important.\n\n```javascript\n .encode(\n vl.x().fieldQ(\"Horsepower\"),\n vl.y().fieldQ(\"Miles_per_Gallon\"),\n vl.tooltip().fieldN(\"Name\")\n )\n```\n\n#### Understand:\n\nHere, we have defined the `x()` and `y()` axes. Each axis requires 1) the name of the feature we want to represent along that axis, and 2) the data type of that feature. In the above, the \"Horsepower\" field is a quantitative value and thus is defined as:\n\n```javascript\nvl.x().fieldQ(\"Horsepower\")\n```\n\nThe `tooltip()` method allows you to adjust what happens when you hover the mouse over each data point. In this case, the tooltip will show the \"Name\" associated with each data point. Since the \"Name\" is a nominal (or categorical) data type, we need `fieldN()`.","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"

Exercise:

\n Modify the code below in the following ways:\n

Modify the x-axis to display Year.
Modify the y-axis to display Horsepower.
Modify the tooltip to display Origin instead of Name.

","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"\nchart3 = vl.markCircle()\n .data(cars)\n .encode(\n vl.x().fieldT(\"Year\"), // TO-DO: Change this to represent \"Year\"\n vl.y().fieldQ(\"Horsepower\"), // TO-DO: Change this to represent \"Horsepower\"\n vl.tooltip().fieldN(\"Origin\") // TO-DO: Change this to represent \"Origin\"\n )\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"\n// Do not modify\nchart3.render()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"### 2d. Render()\n\nThis one is the last thing that should be called when rendering a graph. This, too, can be modified in certain ways. One of the biggest ways is that we can ask **Vega-Lite** to generate the graph not as an HTML `