Published
Edited
Mar 30, 2021
1 star
md`# Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands`
import {sn,note} from "@j-f1/sidenotes"
md`## Uinsg Markdown in Observable`
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<sup>[[1](#footnote1)]</sup>**: write \`<sup>[[N](#footnoteN)]</sup>\` 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)
`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
book = 20
person = 15
sales = book * person
price = monitor + 45
viewof mouse = html`<input type=range/>`
price_updated = mouse * 20
md`
## Math
You can input math using \`tex\`. Like this: ${tex `a = \frac{b}{c}`}
Or:
`
tex`a = \frac{b}{c}`
tex.block `
a = \frac{b}{c}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
