The avatar for @hongtaoh
Hongtao Hao
Published
Edited
Mar 30, 2021
1 star
tutorials
Scatter plotsTensorflow (neural network)How to understand D3's paddingInnerIntroductionD3 practice, 2021-03-31How to use CSS style sheets in Observable NotebooksexerciseExplorable DataHow to differentiate between let, const, and var in JavaScript / Observable
Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands
Also listed in…
40 Days of learning D3
Insert cell
md`# Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands`
Insert cell
Insert cell
Insert cell
Insert cell
import {sn,note} from "@j-f1/sidenotes"
Insert cell
md`## Uinsg Markdown in Observable`
Insert cell
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)
`
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
book = 20
Insert cell
person = 15
Insert cell
sales = book * person
Insert cell
Insert cell
Insert cell
Insert cell
price = monitor + 45
Insert cell
Insert cell
Insert cell
viewof mouse = html`<input type=range/>`
Insert cell
price_updated = mouse * 20
Insert cell
md`
## Math

You can input math using \`tex\`. Like this: ${tex `a = \frac{b}{c}`}

Or:
`
Insert cell
tex`a = \frac{b}{c}`
Insert cell
Insert cell
tex.block `
a = \frac{b}{c}
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more