30:[] 2e:{"title":"Tutorials","cells":[{"id":0,"value":"md`# Tutorials`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof sandwiches = slider({\n min: 0, \n max: 100, \n step: 1, \n description: \"How many sandwiches do you want?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"total = {\n let per = 5;\n let total = sandwiches * per;\n if (sandwiches > 50) {\n total = (50 * 5) + (sandwiches - 50) * per * 0.75;\n }\n return total;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"html`The cost per sandwich is $${d3.format(\".2f\")(total / sandwiches)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof breed = select(Object.keys(breeds.message))","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof borderwidth = slider({\n min: 0, \n max: 40,\n description: \"Border width of dog image\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"dog = (await fetch(`https://dog.ceo/api/breed/${breed}/images/random`)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"breeds = (await fetch(`https://dog.ceo/api/breeds/list/all`)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"vegalite({\n data: { values: alphabet },\n mark: \"bar\",\n autosize: \"fit\",\n width: width,\n encoding: {\n x: {\n field: \"letter\",\n type: \"ordinal\"\n },\n y: {\n field: \"frequency\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof npoints = slider({\n min: 20, \n max: 200,\n value: 50,\n step: 1,\n description: \"Number of points in sparkline\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`A sparkline ${sparkline(_.map(_.range(npoints), i => _.random(10)), 200)} is a chart inline with prose.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`This is an inline equation ${tex`f(x) = \\int_{-\\infty}^{${npoints}}{e^{\\tau^{2}}d\\tau}`} that looks pretty rad.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"cards = d3.csv(\"https://gist.githubusercontent.com/garrettgman/9629323/raw/ee5dfc039fd581cb467cc69c226ea2524913c3d8/deck.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"vegalite({\n data: {values: cards},\n mark: \"point\",\n autosize: \"fit\",\n encoding: {\n x: {\n field: \"value\"\n },\n y: {\n field: \"value\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"import {chart as d3chart} with {alphabet2 as data, d3chart_height as height} from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"alphabet2 = {\n let result = _.map(alphabet, i => ({name: i.letter, value: i.frequency}));\n result.format = \"%\";\n result.y = \"↑ Yo mama\";\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof d3chart_height = slider({min: 100, max: 500, step: 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"d3chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {slider, select} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"import {sparkline} from \"@observablehq/introduction-to-html\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"alphabet = require('@observablehq/alphabet')","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"_ = import(\"https://cdn.pika.dev/lodash-es/v4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"captions = d3.csv(\"https://raw.githubusercontent.com/nextml/caption-contest-data/master/contests/summaries/510_summary_LilUCB.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"bordercolor = {\n let i = 0;\n while (true) {\n yield \"rgb(\" + (i % 255) + \",\" + ((i + 96) % 255) + \",\" + (i + 192) % 255 + \")\";\n i += 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"randomCaption = function(str) {\n let h1 = 0xdeadbeef, h2 = 0x41c6ce57;\n for (let i = 0, ch; i < str.length; i++) {\n ch = str.charCodeAt(i);\n h1 = Math.imul(h1 ^ ch, 2654435761);\n h2 = Math.imul(h2 ^ ch, 1597334677);\n }\n h1 = Math.imul(h1 ^ h1>>>16, 2246822507) ^ Math.imul(h2 ^ h2>>>13, 3266489909);\n h2 = Math.imul(h2 ^ h2>>>16, 2246822507) ^ Math.imul(h1 ^ h1>>>13, 3266489909);\n var integer = 4294967296 * (2097151 & h2) + (h1>>>0);\n return captions[integer % (captions.length)];\n};","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}