CS 465 - Tutorial One

Deliverable	Due Date
Tutorial 1	September 22, 2025 at 11:59 PM
Tutorial 1 (revision)	October 12, 2025 at 11:59 PM

Objectives

• Get familiar with working with Observable Framework
• Get practice making some simple visualizations with Plot

Prerequisites

1. Make sure that you have read through Welcome to Observable, Introduction to JavaScript and Observable and Observable Plot before you have begun.

2. You should also have performed the steps in Getting started.

Directions

Setting up

1. Create the git repository for your practical by accepting the assignment from GitHub Classroom. This will create a new repository for you with a bare bones npm package already set up for you.

2. Clone the repository to you computer with git clone (get the name of the repository from GitHub). See the git basics guide if you are new to this

3. Open the directory with VSCode. You should see all of the files down the panel on the left in the Explorer.

4. Bring up the embedded Terminal by selecting it from the View menu or by typing ^` (the control key and the back tick).

5. In the terminal, type pnpm install. This will install all of the necessary packages.

6. In the terminal, type pnpm dev ¹. This will start up the development server so you can see the output of your website. It will do live updating every time you save your work.

Note

Starting the development server will probably open a window or a tab in your default web browser. If it does not, look at the output in the Terminal. Provided there were no errors, you should see some lines that look like this:

Observable Framework v1.13.3
↳ http://127.0.0.1:3001/

The URL is where you will find your page. You can either open it by clicking on it in VSCode with the command key held down (for Mac users) or the Control key (for others), or you can just open a tab in your browser and enter it in manually.

Doing the tutorial

We are going to be making use of Observable Framework for this class. Framework allows us to create interactive websites using a combination of Markdown and Javascript². The framework provides a lot of power and flexibility, and we will explore it over the semester. For right now, we are going to just focus on creating some simple visualizations on a single page.

Tip

If you aren’t familiar with Markdown, it is a simplified approach to formatting documents that is easier than using something like HTML. If this is your first experience using it, you should probably keep a reference, like the Markdown Guide handy.

In the tutorial directory, open up src/index.md. You will find the rest of the directions for the tutorial in there. Follow along with the tutorial, filling in the requested code, then come back here for directions on submitting your work.

Submitting your work

• commit your work to the repository (see the git basics guide if you are unfamiliar with this process)
• push the work to github
• submit the repository on Gradescope (see the Gradescope submission guide)

Footnotes

1. The dev refers to a script that is defined in package.json (it is just calling observable preview). If you look at the bottom of the panel on the left, you may see a section called NPM SCRIPTS. If it is not there, you can enable it with the ... menu at the top right of that panel. In that section, you will find all of the package.json scripts that VSCode has recognized. If you hover your mouse over the scripts, you will see a little play button (a right facing triangle). You can click that instead of manually typing the pnpm command into the terminal, and VSCode will open a new Terminal tab for you and run the script.

2. Framework advertises using Python, R and SQL as well, but that is for creating data loaders. We may dip into that, but our focus will be primarily on the visualizations, which we will construct with JavaScript.