31:T669,md`--- ${headerLink(2, "https://observablehq.com/@embracelife/tutorial-utilities", "Tutorial-Utilities")} How to create utility functions to use everywhere in Observable notebooks --- 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step1", "headerLink(level, url, text) - Create a header with anchor link")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step2", "anchorLink(url, text) - Build anchor link to open in another page")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step3", "anchorLinkWithin(url, text) - Build anchor link jump within the same notebook")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step4", "video, videoyt(url) - embed a video")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step5", "key - highlight a key stroke")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step6", "code - highlight inline code")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step7", "create a pin svg")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step8", "create a caret svg")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step9", "create a toggle svg")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step10", "create a menu svg")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step11", "Embed a paragraph")} 1. ${anchorLink("https://observablehq.com/@embracelife/tutorial-utilities#step12", "Create a navigation bar")} `32:T701, md`---

Tutorial 0: five-minute-introduction

1. How to run code in cell (one line or in block) 2. How to reference cell or variable in the same notebook 3. How to create DOM in cell 4. How to create a Markdown cell 5. How to make a Dom cell reactive 6. How to load a library 7. How to use await with d3.tsv to load data 8. How to use cell as generators 9. How promise and generator work together 10. Combine promise, generator, dom together 11. How to import cell (a graph) from another notebook`33:T41d,md`---

Tutorial 2: dog pictures

1. Fetch a dog picture with API and ${code("(await fetch('...').json())")} 1. Display image with html img tag 1. Fetch a list with API and explore data with Inspector 1. Import ${code("select")} element from another notebook to display data 1. Important cells move to top 1. Combine two API, viewof to customize dog image display `34:T437,md`---

Introduction to Promises

1. What is promise 1. How promises behave in Observable 1. How to use ${code('Promises.delay')} and ${code('Promises.tick')} 1. How to use ${code('await')} in Observable 1. ${code("require")} as async func 1. How to use ${code('callback')} in Observable 1. More on promises `35:T741,md`---

Introduction to Imports

1. Import Benefit 1: load dependencies automatically 1. Import Benefit 2: version control for the imported 1. Import Benefit 3: use ${code('import-with')} for more flexible and dynamic reuse 1. nuances 1: imported value can change over time too 1. nuances 2: named, anonymous cells and side effect 1. nuances 3: imported cells are lazily evaluated 1. nuances 4: imported cell locally available, dependent cells run and hidden 1. nuances 5 : circular import 1. nuances 6: auto resolve multiple import of the same notebook 1. nuances 7: import freely for shared and public notebooks 1. nuances 8: import from notebooks vs require libraries `36:T787,md`---

Introduction to require

1. Require a module by name 1. Require a module by name and version 1. Require a module by name and path 1. Require a module by name, version and path 1. Require a module by url 1. Require a module from a local JS file with file-chooser element 1. Require more modules by names 1. Require returns with/without ${code('await')} 1. Module require debugger 1. Require behavior under the hood with jsDelivr 1. The modules that require can work with 1. import as a way to load ES6 modules 1. more resources on require `37:[] 2f:{"title":"Exploring Observable","cells":[{"id":17,"value":"md`# Exploring Observable\n\n${anchorLink(\"https://observablehq.com/@embracelife/0th-observable-the-user-manual\", \"see tutorials on Official Observable User Manual\")}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"\nmd`---\n

Tutorial 1: Lunch calculator

\n\n1. How to use ${code(\"import\")} in md from another notebook\n2. How to apply imported func in md from another notebook\n3. How to write inline or block of code in md\n4. How to use ${code(\"viewof\")} to make a slider to update values\n5. How to use a block statement for calculation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`---\n

A Brief Introduction to Viewof

\n1. How to connect display and value without ${code(\"viewof\")}\n2. How to connect display and value with ${code(\"viewof\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`---\n\n

How Observable Runs

\n\n1. How most interactive notebooks behave\n1. How Observable notebook behave\n1. Why Observable notebook behave such way\n1. design consequence 1: cell order is arbitrary and side effect\n1. design consequence 2: circular reference disallowed\n1. data flow graph allows subset graph recomputation for efficiency\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`---\n\n

Tutorial 3: visualizing data

\n\n1. ${code('require')} a dataset from a lib living on npm\n1. Require Vega Lite as a lib not a dataset\n1. How to make a chart with data and vegalite\n1. How to make a chart full ${code('width')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`\n---\n${headerLink(2, \"https://observablehq.com/@embracelife/observable-standard-library-examples\", \"Observable Standard Library examples\")}\n\nbasic examples from docs of Standard Library **great reference !!\n!**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"md `\n${headerLink(3, \"https://observablehq.com/@embracelife/stdlib-observable\", \"Observable stdlib source\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md` ---\n${headerLink(2, \"https://observablehq.com/@embracelife/inputs\", \"Inputs - elements created in Observable\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"md `---\n\n${headerLink(2, \"https://observablehq.com/@embracelife/observables-not-javascript\", \"Observable is not exactly like Javascript\")}\n\nHow exactly to use Observable editor: **Super Useful!!!**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`---\n${headerLink(2, \"https://observablehq.com/@embracelife/p5\", \"How to use p5 in Observable\")}\n1. ${anchorLink(\"https://observablehq.com/@embracelife/the-nature-of-code-introduction\", \"Introduction to Nature of Code\")}\n1. ${anchorLink(\"https://observablehq.com/@embracelife/the-nature-of-code-chapter-1\", \"chapter 1\")}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"\nmd`\n

\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`

Bits and Pieces

\n\n1. [How to use parseInt](#parseIntDoc)\n1. [How to do debugging](#debugging)\n1. ${anchorLink(\"https://observablehq.com/@embracelife/intro-to-es6\", \"Intro to ES6\")} : nice and clear\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {code, headerLink, anchorLinkWithin, anchorLink} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}