3f:null 40:["$","title",null,{"children":"Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands | Hongtao Hao | Observable"}] 46:T45f,sn` - How to use Markdown: look at the examples I had above and below. - Add inline code: \`like this\` - Add **table of contents**: first use \`import {toc} from @mbostock/toc\` to import the function, and then use \`toc{}\` to generate your table of contents (Reference: https://observablehq.com/@mbostock/toc) - Add **footnotes^{[[1](#footnote1)]}**: write \`^{[[N](#footnoteN)]}\` after the word you want to put footnote on. Then, at the bottom of your notebook, use this syntax: \`\`\` footnoteN = md\`N: Your own words\` \`\`\` . (Reference: https://observablehq.com/@jashkenas/markdown-style-footnotes) - Add sidenotes (Please see the sidenote on the right of this line of text) ${note`Nemo qui nobis voluptatum at distinctio rem tempore.`}: First, import necessary functions: \`\`\`js import {sn,note} from "@j-f1/sidenotes" \`\`\` Then, start the paragraph where your intended sidenote is located with \`\`\`js sn\` \`\`\` Then, simply embed the content of your intended sidenote using the codes I employed in this example. (References: https://observablehq.com/@j-f1/sidenotes) `47:[] 44:{"id":"ff34525384d87ebe","slug":"lunch-calculator","title":"Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands","thumbnail":"3e9f782963c3c10fd721adb8b4d03ec80104bd533b17339b8c5519822dfb697e","access_level":"public","create_time":"$D2020-08-19T14:42:51.129Z","update_time":"$D2021-03-30T21:21:25.605Z","view_time":null,"first_public_time":"$D2020-08-24T18:25:05.704Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024","bio":"","following":false},"version":469,"publish_version":469,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4fc1ed8461b3de78","slug":"45-days-of-learning-d3","title":"40 Days of learning D3","owner":{"id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao"}},"type":"notebook","body":{"titling":"auto","title":"Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands","cells":[{"id":51,"value":"md`# Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"import {toc} from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`## Note: The majority of this tutorial is based on [3menc](https://observablehq.com/@3menc)'s [Tutorial 1: Lunch calculator](https://observablehq.com/@3menc/tutorial-1-lunch-calculator).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"import {sn,note} from \"@j-f1/sidenotes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## Uinsg Markdown in Observable`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`## Other cell commands\n\n- How to let others see both the original codes and the output: to **pin** the code. To the left of the code cell, you can see the **pin**. Click it and the cell will be pinned. The output will be shown **above** the codes. \n- To move cells, just drag and move. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`## Some keyboard shortcuts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`\n- Shift + Enter: Run the code. \n- Command + Enter: Run the code and generate a new cell below.\n- Control + Shit + P: Pin or Unpin a cell\n- Option + Command + Up/Down: Move the current cell up or down\n- Command + \\`/\\` : Commenting\n\nFor more shortcuts of observablehq, visit [here](https://talk.observablehq.com/t/list-of-keyboard-shortcuts/89/2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`## Assigning values to a cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"book = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"person = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"sales = book * person","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md` ### Autocompletion\n\nJust type the first two letters of a variable, and then hit **Tab** button, Observable complete it for the whole name. \n\nFor example, type *bo* and hit **Tab**, you'll see \\`book\\`. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md` ## Adding a slider or a text entry box\n\nYou can add **a slider** for a variable, for example, \\`monitor\\`, by using this following syntax:\n\n\\`\\`\\`js\nviewof monitor = html\\`\\`\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof monitor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"price = monitor + 45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`When you move the slider, the \\`price\\` value will be automatically updated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`Or you can add **a text entry box** for a variable, for example, \\`mouse\\`, by using the following syntax:\n\n\\`\\`\\`js\nviewof mouse = html\\`\\`\n\\`\\`\\`\n\nIt looks almost exactly the same as the syntax for adding a slider but is a little different: there is no space ^{[[2](#footnote2)]} between \\`type=range\\` and \\`/\\` here.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof mouse = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"price_updated = mouse * 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`\n## Math\n\nYou can input math using \\`tex\\`. Like this: ${tex `a = \\frac{b}{c}`}\n\nOr:\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"tex`a = \\frac{b}{c}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`\nOr using \\`tex.block\\`:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"tex.block `\na = \\frac{b}{c}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`## How is \\`Observable Notebook\\` different from \\`Jupyter Notebook\\`?\n\nFor me, \\`Observable Notebook\\` is like **a single cell** in \\`Jupyter Notebook\\`. In \\`Observable Notebook\\`, you cannot define a variable twice. For example, you cannot use \\`book = 20\\` in the first cell and then \\`book = 30\\` in the second cell, but you are able to do this in \\`Jupyter Notebook\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`## Other resources:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"footnotes = md`---\n\n## Footnotes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"footnote1 = md `1: Just like this.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"footnote2 = md `2: I found this trick by a mistake.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"