32:T5c0,big_o = html``33:[] 30:{"title":"Do it Live! with ObservableHQ","cells":[{"id":0,"value":"md`# Do it Live! with ObservableHQ\n_presentation by [Paul Carleton](https://twitter.com/paulcarletonjr) from [Stripe](https://stripe.com/jobs/search?l=mexico) for [EventLoop](https://www.meetup.com/eventloop/) in Mexico City on September 4th 2019_\n\n_[Spanish Version](https://observablehq.com/@pcarleton/hago-en-directo-con-observablehq)_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"slide`\n# \"Do it live\" with ObservableHQ\nPaul Carleton [@paulcarletonjr](https://twitter.com/paulcarletonjr)\n\nSoftware Engineer @ [Stripe](https://stripe.com/jobs/search?l=mexico)\n\nSlides: [pcarleton.com/eventloop](https://pcarleton.com/eventloop)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"slide`\n# Meta\n\n## Slides: [pcarleton.com/eventloop](https://pcarleton.com/eventloop)\n\nBuilt on Observable!\n\nFollow along! There's an interactive experiment coming up!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"slide`\n${big_o}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"slide`\n# Feedback Loops\n## Editor & Script\n\n1. Open editor\n2. Write code\n3. Save script\n4. Open terminal\n5. Execute script\n6. Examine output\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"slide`\n# Do you use a REPL?\n\n${await questionGraph(\"1\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"viewof r1 = radio({\n title: 'Utilizas el REPL?',\n description: 'Selecciona tu respuesta',\n options: [\n { label: 'Nunca', value: '0' },\n { label: 'A veces', value: '1' },\n { label: 'Todos los días!', value: '2' },\n ],\n value: '1'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"fetch(`https://bolder-condorraptor.glitch.me/vote/1/${r1}/${my_id}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"slide`\n\n# REPL: Read Eval Print Loop\n\n![repl](https://pcarleton-blog.s3-us-west-1.amazonaws.com/observablehq-talk/node_repl.gif)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"slide`\n# Who has used a Juypter Notebook?\n $\"Kitten\"\n\ttitle=\"A$ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"slide`# Who has used a Juypter Notebook?\n## Survey results\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"slide`\n# Jupyter Notebook\n\n[Click to generate new Python notebook](https://mybinder.org/v2/gh/ipython/ipython-in-depth/master?filepath=binder/Index.ipynb)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"html`\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"slide`\n# Observable\n\n## Notebook + Dependency Tracking\n
\n\n\n| **What it's good for** | **What it's not good for** | \n| -------------- | -------------- | \n| Exploring data and sharing results | Anything server side |\n| Interactive essays and stories| Running in production |\n| Iterating on a prototype| Secret things* | \n| Building visualizations | | \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"slide`\n# Cool examples\n[Art](https://observablehq.com/@mootari/getting-artsy-with-lloyd) |\n[Science](https://observablehq.com/@kristw/boba-science?collection=@observablehq/explorables) |\n[Sounds](https://observablehq.com/@freedmand/sounds?collection=@observablehq/explorables) | \n[Astronomy](https://observablehq.com/@pcarleton/equinox-is-a-lie-kind-of) \n\n[![img](https://pcarleton-blog.s3-us-west-1.amazonaws.com/observablehq-talk/observable_examples.png)](https://observablehq.com/explore)\n`\n// chido o padres","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"spacer(100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"slide.cell`# Drawing a Rectangle\nLet's start simple with drawing a rectangle. We can do this with the Canvas functionality in the browser, like \\`\\`DOM.context2d\\`\\` (see [Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) for more details)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"{\n const context = DOM.context2d(\n width /* special ObservableHQ value for width of page */,\n 150 /* height of canvas */\n );\n \n const rectWidth = 300;\n const rectHeight = 100;\n \n context.fillStyle = \"#424770\"\n context.fillRect(\n 10 /* top left x */ ,\n 10 /* top left y */,\n rectWidth,\n rectHeight\n ); \n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"spacer(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"slide.cell`\n## Dynamic Variables\n\nIf we want to define the dimensions, we can do that by specifing the width in a separate cell. Once we've returned a value for \\`\\`rectWidth\\`\\`, we can use it later and the dependency will be tracked. Try changing the value and see the rectangle automatically update.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"rectWidth = 200 /* Change me! */","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"{\n // Note: The `this ? this.getContext(\"2d\") prevents us from re-creating a canvas each time we re-evaluate when\n // we change the value.\n const context = this ? this.getContext(\"2d\") : DOM.context2d(\n width /* special ObservableHQ value for width of page */,\n 150 /* height of canvas */\n );\n // Similarly, we clear the rect since we'll be re-using the canvas.\n context.clearRect(0, 0, width, 100);\n context.strokeStyle = \"#000\";\n \n // We don't define this value since we want to use the one we defined above.\n // const rectWidth = 100;\n const rectHeight = 100;\n \n context.fillStyle = \"#424770\"\n context.fillRect(\n 10 /* top left x */ ,\n 10 /* top left y */,\n rectWidth,\n rectHeight\n ); \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"spacer(400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"slide.cell`\n## Sliders\nChanging values in a cell is cool, but we can do even better using a slider!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof rectWidth2 = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"rectWidth2 /* This cell will report the value so we can see it as we change it */","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"canvas2 = {\n // Note: The `this ? this.getContext(\"2d\") prevents us from re-creating a canvas each time we re-evaluate when\n // we change the value.\n const context = this ? this.getContext(\"2d\") : DOM.context2d(\n width /* special ObservableHQ value for width of page */,\n 150 /* height of canvas */\n );\n // Similarly, we clear the rect since we'll be re-using the canvas.\n context.clearRect(0, 0, width, 150);\n context.strokeStyle = \"#000\";\n \n // We don't define this value since we want to use the one we defined above.\n // const rectWidth = 100;\n const rectHeight = 100;\n \n context.fillStyle = \"#424770\"\n context.fillRect(\n 10 /* top left x */ ,\n 10 /* top left y */,\n rectWidth2,\n rectHeight\n ); \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"spacer(300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"slide.cell`\n## Depending on other notebooks\n\nRemember the super cool Boba Science demo? Let's use what we learned about sliders to draw a boba cup. We can import individual cells from another notebook using the \\`\\`import\\`\\` keyword.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"import {drawBubbleTea, BubbleTea, Cup} from '@kristw/boba-science'","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"drawBubbleTea(new BubbleTea({ \n cup: new Cup({\n topRadius: cupTopRadius,\n bottomRadius: cupBottomRadius\n })})).node();","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof cupTopRadius = slider({\n min: 2, \n max: 8, \n step: 1, \n value: 4, \n description: \"cupTopRadius\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof cupBottomRadius = slider({\n min: 2, \n max: 8, \n step: 1, \n value: 4, \n description: \"cupBottomRadius\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"spacer(300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"slide`# Conclusion\n\n* Notebook with dependencies\n* Great for exploring and visualizing and learning\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"slide`\n# Thank you! \n\n## ** Questions? **\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"spacer(800)","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"slide_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"spacer = function(height) {\n const context = this ? this.getContext(\"2d\") : DOM.context2d(\n width /* special ObservableHQ value for width of page */,\n height /* height of canvas */\n );\n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"$$ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"slide = {\n function slide() {\n const container = document.createElement(\"div\");\n container.className = \"slide\";\n container.appendChild(md.apply(this, arguments));\n return container;\n }\n slide.img = function(strings) {\n const img = new Image;\n let string = strings[0] + \"\", i = 0, n = arguments.length;\n while (++i < n) string += arguments[i] + \"\" + strings[i];\n img.src = string.trim();\n img.className = \"slide slide--img\";\n return img;\n };\n slide.cell = function() {\n const container = document.createElement(\"div\");\n container.className = \"slide2\";\n container.style.paddingTop = \"20px\";\n container.appendChild(md.apply(this, arguments));\n return container;\n }\n return slide;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"{\n let slide_cells = $(\".slide, .slide2\")\n // let slide_cells = $(\".observablehq\")\n\n //let all_cells = slide_cells.concat(document.getElementsByClassName(\"slide2\"));\n //document.cells = all_cells;\n return document.cells = slide_cells;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"{\ndocument.current=0;\ndocument.onkeyup = function(e) {\n if (e.which === 39 || e.which === 37) {\n if (e.which === 39){\n document.current+=1;\n if (document.current < 0) { document.current = 0; }\n }\n if (e.which === 37){\n document.current -= 1;\n if (document.current >= document.cells.length) { document.current = document.cells.length - 1; }\n }\n var elmnt = document.cells[document.current] \n elmnt.scrollIntoView();\n }\n}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"slide`\n# Sample slide\n\n## More things 1\n\n### More things 2\n\n*Italicise stuff*\n\n**Strong stuff**\n\n[link](https://google.com)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"slide`\n# Notebook Interface\n\nA virtual notebook environment\n\n## Features\n- Execute code blocks\n- Use rendering libraries\n- Mix code with text\n- Persistence\n- Sharing\n\n## Why might you use a Notebook interface?\n- Analyse data for science, journalism, education, etc\n- Prototype and share some code\n\n### Links\n\n[Wikipedia](https://en.wikipedia.org/wiki/Notebook_interface) | \n[Try Jupyter Notebook in your browser](https://jupyter.org/try)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"slide`\n# REPL = Read-Eval-Print Loop\n\n## Features\n- Reads singular user inputs\n- Evaluates the expression\n- Prints results\n\n## Why might you use REPL?\n- Exploring\n- Debugging\n\n### Links\n[Wikipedia](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) | \n[Wikipedia Spanish](https://es.wikipedia.org/wiki/REPL)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"my_id = Math.floor(Math.random()*10e12)","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"io = require('socket.io-client@2.2.0/dist/socket.io.dev.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"msgs = Generators.observe(notify => {\n const msgs = [];\n \n let socket = io('ws://bolder-condorraptor.glitch.me/');\n socket.on('chat message', function(msg){\n console.log(msg);\n msgs.push(msg);\n notify(msgs);\n });\n return () => socket.close();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"questionGraph = function(qlabel) {\n\nconst deduped = new Map();\n msgs.filter((msg) => (msg.q == qlabel)).map((msg) => {\n deduped.set(msg.id, {choice: choices[qlabel][parseInt(msg.c)], ...msg});\n });\n \n const vals = Array.from(deduped.values());\n \n return vegalite({\n \"width\": (width* 0.6),\n \"config\": {\"axis\":{\"labelColor\": \"white\", \"titleColor\": \"white\"}},\n \"mark\": \"bar\",\n \"encoding\":\n {\n \"x\": {\n \"aggregate\": \"distinct\",\n \"field\": \"id\",\n \"type\": \"quantitative\",\n \"axis\": {title: \"personas\"},\n \"scale\": {\"domain\":[0, Math.max(10, vals.length*1.2)]}\n },\n \"y\": {\"field\": \"choice\", \"type\": \"nominal\",\n \"axis\": {title: \"selección\"},\n \"scale\": {\"domain\": choices[qlabel]}\n }\n },\n // \"height\": 100,\n // \"padding\": {\"top\": 30, \"left\": 20, \"right\": 20, \"bottom\": 50},\n // \"autosize\": \"none\",\n \"data\": {\"values\": vals},\n\n})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"choices = {\n return {\n \"1\": [\"Nunca\", \"A veces\", \"Todos los días!\"],\n \"2\": [\"Nunca\", \"A veces\", \"Todos los días!\"],\n \"3\": [\"Nunca\", \"A veces\", \"Todos los días!\"],\n }\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}