31:[] 2f:{"title":"Observable Tutorial Notebook","cells":[{"id":0,"value":"md`# Observable Tutorial Notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`\n### Observable notebooks product design strengths:\n- Fast and iterative design of dataviz that can be tedious to draw manually\n- Easy to build controls for adjusting parameters of design (color, number ranges, data, etc.)\n- Ability to use data as a basis for drawings objects\n- Drawing using web standards: HTML, CSS, SVG, Canvas, and WebGL\n- Easy way to learn JavaScript\n\n### Observable notebooks product design weaknesses:\n- Separate from existing design tools, components, and dev environment workflows\n- Not easy to use real data that can’t be public\n- Figma and Framer are better for UI design especially using plugins\n- Need to know a little JavaScript and D3.js or similar libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`## Notebook cells`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\nA cell can contain:\n- \\`html\\`\n- \\`markdown\\`\n- \\`svg\\`\n- \\`canvas & WebGL\\`\n- \\`css\\`\n- \\`images\\`\n- JavaScript Arrays\n- JavaScript Objects\n- JavaScript functions/blocks. Cells act like functions that set a global variable or return a value`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"html`\n\n

HTML

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof purpleColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`\n#### Markdown\nCells can be Markdown\n- [with links](https://observablehq.com)\n- lists\n- etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`\n---\n### Observable [Standard Library](https://observablehq.com/@observablehq/standard-library?collection=@observablehq/introduction)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`### Notebook common library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`\n- \\`DOM\\`\n- \\`width\\`\n- \\`viewof\\`\n- \\`html\\`\n- \\`md\\`\n- \\`svg\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`### Importing cells from other notebooks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`### Applying styles with exporting in mind`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`\nTo assure styles are applied correctly when exported:
\n✓ Use \\`px\\` instead of \\`em\\` for importing into Figma
\n✓ Apply styles using D3 instead of html \\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`\n### Helpfull links mentioned here:\n- [Node Map](https://observablehq.com/@kemper/radial-layout-left-right-curved)\n- [Observable Standard Library](https://observablehq.com/@observablehq/standard-library)\n- [Median age by country CSV data](https://gist.githubusercontent.com/distantshape/d85fe96c0ad8696554dc260209423857/raw/89651ed4f4213c08bf506b2825d277477b4e164d/countries-median-age.csv)\n- [D3 documentation](https://github.com/d3/d3/blob/master/API.md)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import {chart} from \"@kemper/bee-swarm-plot-median-age-by-country\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {makeSliderWithValue} from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`### Importing JavaScript libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}