2f:T5e8,A more detailed description can be found in [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code) and [Observable's not Javascript](https://observablehq.com/@observablehq/observables-not-javascript). If you're already familiar with Javascript, there are a few key differences between Observable and vanilla JS. Primarily: - Cells** re-run** when the referenced cell changes (we just saw this above by changing the value of `Math.sqrt(64)`) - Cells run in topological order, meaning **we can define our cells in any order** as opposed to a top-down approach (we also saw this above) - Named cells are **declarations**, not assignments. Cell names must be unique, and assigning the value of another cell is generally not allowed unless you use [mutables](https://observablehq.com/@observablehq/introduction-to-mutable-state) (don't worry about mutables for now) - A cell body can be a simple expression, such as a number or string literal, or a function call. But sometimes you want statements, such as for loops. For that you’ll need **curly braces**, and a return statement to give the cell a value. Confused? No worries, let's see how we code in Javascript using Observable below. Each cell in a notebook is a separate script that runs independently. A syntax error in one cell won’t prevent other cells from running. There are two types of cells: expressions & blocks **Expression** cells are concise and are intended for simple definitions, such as **basic arithmetic:**30:T7e6,# GitHub and gists Github is a site where you can store, manage, and collaborate on open-source projects. Built on Git's software, Github provides *version control* for you to track and control changes to your code as you develop. Github has repositories (repos) that contain all your project files and revision history. Some terminology in the GitHub workflow: - **Branch**: A workspace where you can make changes to the project with your own version. Branches get merged with the 'master' directory once changes are done. - **Fork**: Create a permanent copy of the repository, allowing you to make changes without affecting the original project. - **Clone**: Downloads a .git repository from the internet to your computer, extracts the latest snapshot of the repository. You won’t be able to pull down changes from the original repository you cloned from, and you can't contribute back to someone else's project unless you're a collaborator. A forked repository differs from a clone, in that your fork is still connected to the original repository and a that a connection exists between your fork and the original repository itself. - **Commit**: Creates a snapshot of your repository at this point in time, think of saving your changes to your local repository. - **Push**: Updates the remote branch with commits from your local branch. **Pull request**: Submit the local changes made in the branch to be merged back into another branch of the main repo - **Merging**: The approved pull request is merged from one branch to another See [the difference between forking and cloning](https://github.community/t/the-difference-between-forking-and-cloning-a-repository/10189) for more nuanced details about forking and cloning. Another feature of Github is *[gists](https://www.jetbrains.com/help/webstorm/share-code-with-gists.html)*, which allows you to create and share code snippets (like Pastebin). Gists are controlled by git revision control, so they have their own complete revision histories31:[{"id":"6673bb4110148da93713ad292bafe43a20d337bc5f5eb5c7e0f1880accb3daa00e45415ecb50e3c8c70646256d2cc6c306db1076fa1bacb186b9b73c1833afad","href":"https://static.observableusercontent.com/files/6673bb4110148da93713ad292bafe43a20d337bc5f5eb5c7e0f1880accb3daa00e45415ecb50e3c8c70646256d2cc6c306db1076fa1bacb186b9b73c1833afad","name":"image@3.png","type":"image/png","lastModified":1692899656282.429,"size":29405}] 2d:{"title":"[IAT355] Tutorial 1: The Basics of Observable, Github, and D3 | SOLUTION","cells":[{"id":0,"value":"# [IAT355] Tutorial 1: The Basics of Observable, Github, and D3 | SOLUTION\n","pinned":false,"hidden":false,"mode":"md"},{"id":1648,"value":"This is the solution version, with cell functions added for demonstration purposes. The tutorial version is available [here](https://observablehq.com/@iat355/01t-basics?collection=@iat355/iat-355-tutorials-exercises)","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"toc(\"h1, h2, h3, h4\") // alternatively toc(\"h1, h2, h3, h4\") if you wanted to include the title heading","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"---\n# Notebooks and Cells in Observable\n\n\n^{Content adapted from [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code)}\n\nFor a more in-depth explanation of Obervable, read [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/introduction)\n\nThis is an Observable Notebook. Cells are where you can place content, from text, Javascript code, or other instructions","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"---\n## Notebooks, and their *cells*\nObservable notebooks are made of cells (think of cells like those in spreadsheets). Observable cells can contain text, charts, images, and more.\n - **Create** a new cell by clicking on the plus (+) \n - **Open/close** a cell by clicking on the three dots : and select ```edit```\n - **Specify** the type of cell content (Javascript, Markdown, HTML, etc.) on the top right of an active (empty) cell, or change the cell type in the left hand margin of an active cell with content \n - **Evaluate a cell** with Play (▶︎) or ```Shift-Enter```\n - **Pin** or **unpin** a cell with the pin button, next to Play(▶︎). The code of pinned cells remain visible after they are closed, with visible shading\n - **Close** the active cell with x on the bottom right, or ```Esc```\n - Cells run in topological order, so they can be **defined in whatever order makes sense.**\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1873,"value":"//Try uncommenting the lines below\n//b*b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1874,"value":"//b = Math.sqrt(64)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1000,"value":"- Cells re-run when the referenced cells change. Try changing the value of 64 to another number\n\nLet's try changing the cell specification here from Javascript to Markdown.\n\n**Note:** By default, it is good practice to have Markdown cells **unpinned** for easier readability. Javascript cells should be **pinned** in most cases if it would benefit the reader to understand the code","pinned":false,"hidden":false,"mode":"md"},{"id":1880,"value":"Now try changing this cell from Javascript to Markdown\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"Cells can be imported from other notebooks\n","pinned":false,"hidden":false,"mode":"md"},{"id":965,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"ramp(d3.interpolateViridis, 12)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1594,"value":"---------------------","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"# HTML, CSS, Javascript, and Markdown\n\nThere's a few different languages and styles that we'll encounter within Observable and within web programming as a whole. \n\n- **HTML (Hyper Text Markup Link)**: Markup language that defines what the content is. HTML5 is the current standard\n","pinned":false,"hidden":false,"mode":"md"},{"id":1828,"value":"This is a sentence with bolding and italics in HTML","pinned":true,"hidden":false,"mode":"html"},{"id":319,"value":"\n- **CSS (Cascading Style Sheets)**: Defines the style of an HTML page - how it should be displayed\n","pinned":false,"hidden":false,"mode":"md"},{"id":1831,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1835,"value":"\n- **Javascript**: The programming language of the web. It supports multiple programming paradigms (e.g., object-oriented, functional, imperative)\n","pinned":false,"hidden":false,"mode":"md"},{"id":1839,"value":"x = 12 * 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1841,"value":"\n- **Markdown**: A markup language allowing people to easily read/write in plain text, and converts it to HTML\n","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"** *This is a sentence with bolding and italics in Markdown* **","pinned":true,"hidden":false,"mode":"md"},{"id":1846,"value":"In Observable, we'll largely work with Javascript and Markdown, and maybe a bit of HTML. Generally, we'll use Markdown for writing non function related text as it is a lot faster than HTML. \n\nFor example, let's compare how Markdown compares to HTML when adding a link","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"This is a link to Google in HTML","pinned":true,"hidden":false,"mode":"md"},{"id":314,"value":"This is a link to [Google](https://www.google.ca) in Markdown","pinned":true,"hidden":false,"mode":"md"},{"id":323,"value":"See the [Markdown Quick Reference](https://observablehq.com/@observablehq/markdown-quick-reference) guide for a more complete list","pinned":false,"hidden":false,"mode":"md"},{"id":847,"value":"----------------------------","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"## Coding Cells using Javascript","pinned":false,"hidden":false,"mode":"md"},{"id":1603,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"//this is an expression\n2 * 32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1854,"value":"or **variable** definitions","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"//this is an expression as well\nnameOfPerson = \"Michael\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1888,"value":"**Blocks** are surrounded by curly braces `{}` and are intended for more complex definitions, such as ones involving local variables or loops:","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"//this is a block that runs a calculation\n//Observable requires {} when running a block or object literal\n\n{\n //content here\n //Cells in observables require a value to be returned\n //for example, if I just want to compute the running sum of a number using a loop, I need brackets\n\n let count = 0;\n for (let i = 0; i <= 10; i++){\n count = count+i;\n }\n return count;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"Cell names must be unique. Here we assign the **value** 2 to the **variable** called foo","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"//foo = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"Assigning the value of another cell like so is generally not allowed (unless you use [mutables](https://observablehq.com/@observablehq/introduction-to-mutable-state))","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"//foo = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"Now, let's look at objects/functions in javascript. To repeat operations or share code between cells without copying and pasting, we define a **function** \n","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"//this is a constructor function\n//remember that functions are considered objects in Javascript\n\nfunction drink(a, b, c){\n\tthis.name = a;\n\tthis.price = b;\n\tthis.flavour = c;\n\n//Below is an anonymous function (function without a name) that is called with the object's sayOrder property. It is only accessible within the scope of the object\n this.sayOrder = function(){ \n return \"The \"+ this.name + \" is \" + this.price + \" dollars\"; \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"**TRY THIS**: try defining a new drink object called 'order'. Remember that we use the keyword new to create a new object\n\nGive it a name, a price, and a flavour description","pinned":false,"hidden":false,"mode":"md"},{"id":1771,"value":"//DEFINE YOUR NEW DRINK OBJECT HERE\norder = new drink('Americano', '3', 'bitter')","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"order.sayOrder()","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"order.soldOut = false \n\n//Uncomment the above line, and see how the order object has a new property called soldOut","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"//This is another function\nfunction listPrice(a, b){\n //return `The ${a} is ${b} dollars`; //this is another way of referencing the object's local \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"listPrice('Mocha', '5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"An [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals) is an object with a set of name-value pairs that define properties of the object:","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"//This is an object literal. It returns a value, but has no assignment\n//Observable requires {} when defining an object literal\n//The object literal contains key-value pairs: (name, price, flavour) are keys, and (Single Expresso, 3, floral and light) are values\n\n{\n var espresso = {\n name: 'Single Espresso',\n price: '3',\n flavour: 'floral and light'\n }\n return espresso \n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"espresso //espresso is not defined because we did not assign the object literal to a variable","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"//This is an object literal. We can use object literals to create comma-separated lists of name-value pairs inside curly braces\n\ndoubleEspresso = ({\n name: 'Double Espresso',\n price: '3',\n flavour: 'fruity and balanced'\n }\n) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"doubleEspresso.price","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"-----------------","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"![image@3.png](${await FileAttachment(\"image@3.png\").url()})\n^{Image from [https://www.nobledesktop.com/blog/what-is-git-and-why-should-you-use-it](https://www.nobledesktop.com/blog/what-is-git-and-why-should-you-use-it)}\n","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"-------------\n","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"# D3\n\n[D3](https://github.com/d3/d3 ) is a data-driven library created by Mike Bostock. It's a powerful library for visualizing data with HTML, CSS, and SVG. D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document, allowing for powerful interactivity with elements. Observable is built on D3!\n","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"## Importing the D3 library\n\nIn Observable, libraries are usually imported at the bottom of the notebook for readability.","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"d3 = require('d3@7') //7 refers to the version of D3","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"-------","pinned":false,"hidden":false,"mode":"md"},{"id":467,"value":"## Importing Data into Observable\n","pinned":false,"hidden":false,"mode":"md"},{"id":1072,"value":"^{Content adapted from [Introduction to Data](https://observablehq.com/@observablehq/introduction-to-data)}","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"There are several ways of getting data into Observable\n\n* **files** - attached to the notebook, for medium amounts of data (*e.g.*, CSV, SQLite)\n* **inline** - embedded in the notebook as code, for small amounts of data\n* **inline with gists** - embedded in the notebook as code, for small amounts of data\n* **APIs** - queried from a remote server, for programmatic access to data\n* **databases** - via an Observable database client, for accessing SQL databases\n\nYou can also download generated data from notebooks.\nFor this tutorial, we'll look at files and inline. We'll focus especially on gists, as that is how you will be getting in your data for your assignments","pinned":false,"hidden":false,"mode":"md"},{"id":1025,"value":"### Files","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"\n//attach a file here and give it a name to refer to\n//Click on the paperclip on the right side of the buttons panel to see all files attached","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"You can also click on the cell menu (:) to download the data as a CSV or JSON.","pinned":false,"hidden":false,"mode":"md"},{"id":599,"value":"### Inline","pinned":false,"hidden":false,"mode":"md"},{"id":1673,"value":"flavours = ['strawberry', 'cherry', 'grape', 'blueberry']","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"//get the value 'grape' here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1038,"value":"Inlining tiny CSV files is also possible if they are parsed","pinned":false,"hidden":false,"mode":"md"},{"id":1043,"value":"menu = d3.csvParse(`item,price,flavour,customizable,\namericano,3,bitter,no\ncafe mocha,4,sweet,yes\nespresso,3,floral,no\nespresso cortado,3.5,milky,no\ndrip coffee,2.5,strong,no\ncappuccino,4,delicate,yes\nlatte,4,delicate,yes\nturkish coffee,4.5,strong,yes\ngreen tea,3.5,jasmine,no\nrooibos tea, 3.5,vanilla,no,\norange pekoe,3.5,brisk,no\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"### Inline with gists\n[Gists](https://docs.github.com/en/github-ae@latest/github/writing-on-github/editing-and-sharing-content-with-gists/creating-gists) are snippets of plain text hosted on GitHub and can be used for various purposes (similiar to Pastebin), ranging from strings of code, scripts, or bits of data. \n\nFor example, here are the gists hosted on my Github Account\n[https://gist.github.com/krispybird](https://gist.github.com/krispybird)\n\n#### **Exercise:** \nDownload [TitanicPassengers.csv](https://canvas.sfu.ca/courses/74729/files/folder/Datasets?preview=20705479) from Canvas **(not Titanic.xlsx)**, save it into gists, and copy the link into Observable. Make sure that you get the link from the raw version of your gist. We're going to use your link for the second part of the tutorial!\n ","pinned":false,"hidden":false,"mode":"md"},{"id":1058,"value":"\ntitanic = d3.csv('https://gist.githubusercontent.com/krispybird/56bbacb2dfd84c7c6083c62d62a5417a/raw/1b937a4e7404920ea6d3f729611ec06d43e7ae8e/titanic_train.csv')\n\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"## MORE RESOURCES\n- The filled version of the notebook can be found [here](https://observablehq.com/d/3e4899e8e2957a66)\n- For a more in-depth explanation of Obervable, read [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/introduction)\n- A more detailed explanation of Observable cells in [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code)\n- How does [Observable differ from Javascript](https://observablehq.com/@observablehq/observables-not-javascript)\n- The [Markdown Cheat Sheet](https://observablehq.com/@observablehq/markdown-quick-reference)\n- For a collection of resources on Observable, read [Observable User Manual](https://observablehq.com/@observablehq/user-manual?collection=@observablehq/introduction)\n- The [D3](https://d3js.org/) library - we will cover this in the following weeks","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}