25:["$","title",null,{"children":"Week 2 Tutorial 1: Markdown | vis4sense | Observable"}] 49:[{"id":"9be536a46a0e7fc2c5647fdaa888e1dea25e93a6a9b3306d69a4a2db0ce7419644448efdb480e4e89ddf421304f21b526af05a30e7f733aeb7c3544c3afcd6d0","href":"https://static.observableusercontent.com/files/9be536a46a0e7fc2c5647fdaa888e1dea25e93a6a9b3306d69a4a2db0ce7419644448efdb480e4e89ddf421304f21b526af05a30e7f733aeb7c3544c3afcd6d0","name":"observable-markdown-image@3.png","type":"image/png","lastModified":1730933388539.339,"size":59522},{"id":"2d0ce2124053667d4024b4ebcc5c33cfc1fe6225f1ab7312d5f3a7d9906f84bb2de5d10d05037a0cd78e3332779245073e58290a0501f9d4c4590350bacba58a","href":"https://static.observableusercontent.com/files/2d0ce2124053667d4024b4ebcc5c33cfc1fe6225f1ab7312d5f3a7d9906f84bb2de5d10d05037a0cd78e3332779245073e58290a0501f9d4c4590350bacba58a","name":"Copy Link.gif","type":"image/gif","lastModified":1696973594033.521,"size":1590654},{"id":"e15090064345a1ef42cd66c3044321887371fe8790410dbd86d9808f006f4d0e1d301fc7c20ec2114795a1773e127737c47395b6af26657ddece4fef82bac0e9","href":"https://static.observableusercontent.com/files/e15090064345a1ef42cd66c3044321887371fe8790410dbd86d9808f006f4d0e1d301fc7c20ec2114795a1773e127737c47395b6af26657ddece4fef82bac0e9","name":"grayLogo.png","type":"image/png","lastModified":1696973594033.521,"size":14396},{"id":"1126b41706eb9341c80a36ce49c7dd563b993bb9e3f27d2af147ed2daef1cdd147bfff240c07555dcbb58f52de292117f291ba31fdece47ae541a2e8c2433424","href":"https://static.observableusercontent.com/files/1126b41706eb9341c80a36ce49c7dd563b993bb9e3f27d2af147ed2daef1cdd147bfff240c07555dcbb58f52de292117f291ba31fdece47ae541a2e8c2433424","name":"newMarkdownCell.gif","type":"image/gif","lastModified":1696973594033.521,"size":342885},{"id":"8d2c90fd55560e5d6c46ebb43121ec70b254d4557fdcbc842e415ddabae4e4eda35515a00a678bdd1e398133d1a3886cf80f5ce97640ef57418aa26a5e3e87e7","href":"https://static.observableusercontent.com/files/8d2c90fd55560e5d6c46ebb43121ec70b254d4557fdcbc842e415ddabae4e4eda35515a00a678bdd1e398133d1a3886cf80f5ce97640ef57418aa26a5e3e87e7","name":"web-development-icon2.png","type":"image/png","lastModified":1773055712161.62,"size":47772}] 29:{"id":"12bf00ee290dc089","slug":null,"title":"Week 2 Tutorial 1: Markdown","thumbnail":"be8d73eebb1dcd86c804ae7a960ac8f3b5fdfb7053f02b375765c4085b7eb426","access_level":"public","create_time":"$D2023-10-10T21:33:14.033Z","update_time":"$D2026-03-09T11:39:47.171Z","view_time":null,"first_public_time":"$D2024-11-12T18:06:36.482Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":820,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea89374c7616fbb2","login":"viskai","name":"Kai Xu","avatar_url":"https://avatars-next.observableusercontent.com/f4fdffee0c29ae69192e0c36f3a10b3c92dc6714fd89b5464ceb9ec5e4289f47","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ea89374c7616fbb2","login":"viskai","name":"Kai Xu","avatar_url":"https://avatars-next.observableusercontent.com/f4fdffee0c29ae69192e0c36f3a10b3c92dc6714fd89b5464ceb9ec5e4289f47","tier":null,"role":"editor"},{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"45864fcd91db4694","slug":"observable-tutorials","title":"Observable tutorials","owner":{"id":"ee33646169618d88","login":"vis4sense","name":"vis4sense"}},"type":"notebook","body":{"titling":"auto","title":"Week 2 Tutorial 1: Markdown","cells":[{"id":0,"value":"# Week 2 Tutorial 1: Markdown\n\n- Observable notebooks are great for telling data stories, but besides visualisation you also need text, lists, and other text elements.\n- This is what [_Markdown_](https://observablehq.com/@observablehq/markdown-quick-reference) is for. It is a _markup language_, similar to HTML.\n- It is very close to plain text (i.e., human readable), and works everywhere that accepts Markdown, including GitHub.com.\n- You will use Observable notebook for the coursework report, which includes both the visualisations and text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"## Creating a Markdown cell\n- To create a new Markdown cell, click the plus sign (+) that appears to the right of the editor.\n- You'll see the add cell menu appear. Use the mouse or arrow keys to select **Markdown**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":605,"value":"

\n FileAttachment(\"newMarkdownCell.gif\").url())}\n />\n

Creating a new Markdown cell

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"## Basic formatting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"Basic text formatting includes *italics*, **bold**, and ~~strikethrough~~. \n\nYou can also *put one **inside** the other!*\n\nParagraphs are separated by blank lines.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"\n👆 *Tip: Three dashes make a horizontal divider!*\n\n---","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"---\n## Lists\n\n### Unordered\n\nUse either - or * follow by a space. The indentation before decides the list level.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"- Item 1\n - Sub-item 1\n - Sub-sub-item 1\n - Sub-sub-item 2\n* Item 2\n* Item 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"### Ordered\nUse 1. follow by a space. Again, the indentation decides the level.\n\nYou don't need to change the number; markdown does that automatically.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"1. Item 1\n 1. Sub-item 1\n 1. Sub-sub-item 1\n 1. Sub-sub-item 2\n 1. Sub-sub-item 3\n1. Item 2\n1. Item 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"## Headings\nThis is very similar to the heading in HTML. You will need these to structure the report for the coursework.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"# Heading 1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Heading 2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"### Heading 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"#### Heading 4","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"##### Heading 5","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"## Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"URLs will automatically turn into links: https://observablehq.com/\n\nhttps://www.google.co.uk\n\nBut you can also [use text as link label](https://google.com/).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"---\n## Cell links\nYou can link directly to a section of the notebook with an auto-generated anchor link using the \"Copy Link\" action in the cell menu. \n\nThis will copy a special URL to the clipboard like:\nhttps://observablehq.com/@observablehq/markdown-quick-reference#cell-147","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"

\n \n

Copying a link to a cell from the cell menu

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"---\n## Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"### Images in Markdown\n- You can add a markdown image using similar syntax to a link, though prepended with a `!`.\n- First, add image to the notebook as an attachment.\n- Select the cell where you want to add the image\n- Choose 'Insert into notebook' from the attachment file option on the right (three dots)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"observableMarkdownImage = FileAttachment(\"observable-markdown-image@3.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"- Remember to use the `await` keyword to allow the file attachment to load (Observable specific).\n\n![Add alt-text here](${await FileAttachment('grayLogo.png').url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"![web dev icon](web-development-icon2.png)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"---\n## Displaying code\nYou can easily add consistent formatting and property syntax highlighting with Markdown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"Inline code: `x = 10`, the rest of the sentence\n\nBasic code block:\n```\nlet x = 10;\nlet y = x * 2;\n```\n\nCode block with syntax highlighting:\n```js\nlet x = 10;\nlet y = x * 2;\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"---\n## Adding dynamic values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"You can add an inline variable or JavaScript expression like this:\n\nMy favorite number is ${favNumber}, and `2 × ${favNumber}` is equal to **${favNumber * 2}!**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof favNumber = Inputs.range([0, 100], {label: \"Favorite number\", value: 29, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"---\n## Formulas\nObservable supports TeX for formatting math.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"You can write formulas inline: ${tex`a^2 + b^2 = c^2`}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"And you can write formula blocks with the TeX cell mode:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"x = {{-b \\pm \\sqrt{b^2 - 4ac}} \\over 2a}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"This is slightly different in other places that accepts Markdown: https://ashki23.github.io/markdown-latex.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"---\n## Tables\n\n### A basic table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"Column 1 | Column 2 | Column 3\n-------- | -------- | --------\nCell 1-1 | Cell 2-1 | Cell 3-1\nCell 1-2 | Cell 2-2 | Cell 3-2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"### Table with text alignment options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"Column 1 | Column 2 | Column 3\n :-- | :-: | --: \nCell 1-1 | Cell 2-1 | Cell 3-1\nCell 1-2 | Cell 2-2 | Cell 3-2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"webDevelopmentIcon2 = FileAttachment(\"web-development-icon2.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null