31:T5c0,big_o = html``32:[] 2f:{"title":"Usando ObservableHQ en vivo!","cells":[{"id":0,"value":"md`# Usando ObservableHQ en vivo!\n_presentación por [Paul Carleton](https://twitter.com/paulcarletonjr) de [Stripe](https://stripe.com/jobs/search?l=mexico) para [EventLoop](https://www.meetup.com/eventloop/) en la Ciudad de México, 4/9/2019_\n\n[English version](https://observablehq.com/@pcarleton/do-it-live-with-observablehq-a-platform-by-the-creator-of-d3-j)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"slide`\n# Usando ObservableHQ en vivo!\nPaul Carleton [@paulcarletonjr](https://twitter.com/paulcarletonjr)\n\nIngeniero de Software @ [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\nHecho en Observable!\n\nHay un experimento con la participación más adelante!\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. Abro mi editor de texto\n2. Escribo cualquier código (x = 5, y = 6, x + 5 =...)\n3. Guardo mi script.\n4. Cambio a mi terminal\n5. Ejecuto mi script\n6. Miro el resultado\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"slide`\n# Utilizas el REPL?\n\n${await questionGraph(\"1\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"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":538,"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# Utilizas Jupyter?\n $\"Kitten\"\n\ttitle=\"A$ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"slide`# Utilizas Jupyter?\n${await questionGraph(\"2\")}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof r2 = radio({\n title: 'Utilizas Jupiter?',\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: '0'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"fetch(`https://bolder-condorraptor.glitch.me/vote/2/${r2}/${my_id}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"slide`\n# Jupyter Notebook\n\n[Click para notebook de Python nuevo](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\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"slide`\n# Observable\n\n## Notebook + Rastrear Dependencias\n
\n\n\n| **Para que lo usamos?** | **Para que no lo usamos?** | \n| -------------- | -------------- | \n| Explorar data y compartir resultados | Componente de servidor |\n| Redacciones interactivos | Correr en producción |\n| Hacer un prototipo de cliente | Usar con cosas confidenciales* | \n| Construir visualizaciones | | \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"slide`\n# Ejemplos padres\n[Arte](https://observablehq.com/@mootari/getting-artsy-with-lloyd) |\n[Ciencia](https://observablehq.com/@kristw/boba-science?collection=@observablehq/explorables) |\n[Sonidos](https://observablehq.com/@freedmand/sounds?collection=@observablehq/explorables) | \n[Astronomía](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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"spacer(100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"slide.cell`# Dibujar un Rectángulo\nEmpecemos con algo simple: hacer un rectángulo. Vamos a usar el Canvas (mira [Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) para mas detalles).`","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 = 200;\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## Las Dependencias\n\nObservable está rastreando las dependencias. Eso significa que podemos poner el ancho en su propio valor en otro cell. Intente cambiar el valor y mira que el rectángulo cambia inmediatamente.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"rectWidth = 100 /* Cambiáme! */","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"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 = 100; <--- No necesitamos esto! Usamos el valor del cell arriba\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":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"spacer(400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"slide.cell`\n## Deslizadores\nUn valor en su propio cell es padre, pero podemos mejorar con un deslizador!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof rectWidth2 = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"rectWidth2 /* Este cell reporta el valor */","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(500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"slide.cell`\n## Usar otros notebooks\n\nRecuerden el ejemplo de té de boba? Dibujemos una taza de boba, y añademos unas deslizadores. Podemos importar cells individuales de otro cuadero con \\`\\`import\\`\\`.\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(500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"slide.cell`\n## Deslizadores: Ejemplo más complicado\nLa librería de Three.JS \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof cameraZ = slider({min: -300, max: 1000, value: 300, step: 20, title: \"cameraZ\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"viewof cameraAngle = slider({min: -1.5, max: 1.5, value: 0, step: 0.01, title:\"cameraAngle\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"import {scene} with {cameraZ, cameraAngle} from '@pcarleton/threejs-simple-camera-example'","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"scene\n// Estaba confudido sobres estes valores.\n// camera.position.z = cameraZ;\n// camera.quaternion.x = cameraAngle*.1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"slide`# Conclusión\n\n* Observable = Notebook interactivo con los poderes de spreadsheet\n* Es fantástico para explorar, visualizar, y aprender\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"slide`\n# Muchas gracias! \n\n## ** Preguntas? **\n\n### Y que vas a construir?\n${await questionGraph(\"3\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"viewof r3 = radio({\n title: 'Utilizas el REPL?',\n description: 'Selecciona tu respuesta',\n options: [\n { label: 'Arte', value: '0' },\n { label: 'Gráficos', value: '1' },\n { label: 'Investigaciones', value: '2' },\n { label: 'Prototipos', value: '2' },\n ],\n value: '1'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"fetch(`https://bolder-condorraptor.glitch.me/vote/3/${r3}/${my_id}`)","pinned":true,"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":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"my_id = Math.floor(Math.random()*10e12) // To prevent duplicate votes","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"//io = require('https://bundle.run/socket.io-client@2.2.0')\nio = require('socket.io-client@2.2.0/dist/socket.io.dev.js')\n//io = require('socket.io-client@2.2.0/lib/index.js').catch(() => window[\"url\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"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":528,"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":530,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"choices = {\n return {\n \"1\": [\"Nunca\", \"A veces\", \"Todos los días!\"],\n \"2\": [\"Nunca\", \"A veces\", \"Todos los días!\"],\n \"3\": [\"🎨\", \"📊\", \"🔍\", \"🧪\"],\n }\n};","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}