34:["$","title",null,{"children":"Observable (and why I love notebook interfaces) | Silvano Stralla | Observable"}] 3c:T70a,{ let input = html`` input.onclick = () => { document.current = 0; if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { if (document.documentElement.requestFullScreen) { document.documentElement.requestFullScreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullScreen) { document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } } function changeHandler() { var fs = ( (document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen) ); if (!fs) { document.getElementsByTagName('html')[0].classList.add('presenting'); document.addEventListener('keyup', prevNextSlide); } else { document.getElementsByTagName('html')[0].classList.remove('presenting'); document.removeEventListener('keyup', prevNextSlide); } } function prevNextSlide(e) { if (e.which === 83) document.current = 1; if (e.which === 32 | e.which === 39 | e.which === 40) document.current = Math.min(document.current + 1, cells.length - 1); if (e.which === 38 | e.which === 37) document.current = Math.max(document.current - 1, 0); cells[document.current].scrollIntoView(); } document.addEventListener('fullscreenchange', changeHandler, false); document.addEventListener('webkitfullscreenchange', changeHandler, false); document.addEventListener('mozfullscreenchange', changeHandler, false); return input; }3d:T601,slide = { function slide() { const container = document.createElement("div"); container.className = "slide"; container.appendChild(md.apply(this, arguments)); return container; } slide.code = function(strings) { const container = document.createElement("div"); const pre = container.appendChild(document.createElement("pre")); const code = pre.appendChild(document.createElement("code")); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; code.textContent = string.trim(); container.className = "slide slide--code"; return container; } slide.js = function() { const container = slide.code.apply(this, arguments); const content = container.firstChild.firstChild; content.className = "js hljs javascript"; hl.highlightBlock(content); return container; }; slide.img = function(strings) { const img = new Image; let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; img.src = string.trim(); const container = document.createElement("div"); container.className = "slide slide--img"; container.appendChild(img); return container; }; slide.video = function(strings) { const container = document.createElement("div"); container.className = "slide slide--video"; container.appendChild(md.apply(this, arguments)); return container; } return slide; }3e:T448,css = html``3f:[] 38:{"id":"094ffa34cce8d26f","slug":"observable-and-why-i-love-notebook-interfaces","title":"Observable (and why I love notebook interfaces)","thumbnail":"47cc20790475bd327a19f14202e133f8f7dd358c86bfc43eaca50a5cb99ec2a9","access_level":"public","create_time":"$D2018-11-17T12:51:53.835Z","update_time":"$D2018-11-19T12:58:14.683Z","view_time":null,"first_public_time":"$D2018-11-19T13:26:39.423Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"5abe88ecb58817c9","login":"sistrall","name":"Silvano Stralla","avatar_url":"https://avatars-next.observableusercontent.com/4bc3241b306f7b5a6287850682c0556142f5d03336f0b6669f83d5f8ebc09b39","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":244,"publish_version":244,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c61dbc5f1303f90","login":"sistrall","name":"Silvano Stralla","avatar_url":"https://avatars-next.observableusercontent.com/4bc3241b306f7b5a6287850682c0556142f5d03336f0b6669f83d5f8ebc09b39","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2c61dbc5f1303f90","login":"sistrall","name":"Silvano Stralla","avatar_url":"https://avatars-next.observableusercontent.com/4bc3241b306f7b5a6287850682c0556142f5d03336f0b6669f83d5f8ebc09b39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Observable (and why I love notebook interfaces)","cells":[{"id":0,"value":"md`# Observable (and why I love notebook interfaces)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"slide.img`https://static01.nyt.com/images/2018/06/07/arts/07whitneygift1/07whitneygift1-videoSixteenByNineJumbo1600.jpg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`Why am I giving this talk? I'm gonna present you the most powerful idea I've met since I work with machines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"slide`A short story about I discovered to Observable (and why).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"slide.img`https://winworldpc.com/res/img/screenshots/Mathematica%202.1%20-%20About.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"slide.img`https://down.cd/assets/frontend/layout/img/apps/Wolfram-Research-Mathematica-8.0.4.0-6395.jpg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`Early '90s: I bumped into Mathematica. Probably by chance, I don't remember how. I heard of it and what intrigued me at first was that Mathematica allowed symbolic computation. Yes, that kind of thing you do in high school. Equations to solve, integrals to integrate, trigonometric formula to compute by hand. Mathematica did all of that and way more.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/35971e57db95bfb928b319c5a36f1d2a91b20143/mathematica-notebook.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`How does Mathematica work? Oh, it's quite easy: you open a Mathematica document, write something in it, press ${keys(\"Shift-Enter\")} and you're done: things happen inside the document, in front of your eyes and the code you wrote generates some result.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`At the time I didn't understand what I had in front of me. At the time I was just interested to finish my homeworks as quick as possible and go out to play. ;-)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/0f45837f340ff483318088afdd88eb53224cd016/notebook-interface.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`Well, what I had in front of me, instead, was an incredible idea: the **notebook interface**. You have this documents, called _notebooks_, you can write code in it, but also text, put images, display graphs, even animate them. And code and content are on the same level, contributing to a unique corpus of knowledge. What was more effective to me was that this kind of interface fits sooooo well with my way of thinking. Or, at least, it fits to my way of thinking when I code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`Since then I used Mathematica here and there pretty much constantly. I also bumped into more tools using the same kind of approach, Project Jupyter being one of the most recent and most successful appearing on the scene.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/4ec94bb86a993f1858175c2131bcdc46d70451ff/gandy-works-1.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/4ec94bb86a993f1858175c2131bcdc46d70451ff/gandy-works-2.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"slide.video`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`Observable is a web notebook interface implementation: you work in notebooks, writing Javascript in the _cells_ and, as soon as you press ${keys('Shift-Enter')} your code is executed and you see the results immediately.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/4699aaa2a8a00328d7c9cc3bfabe1584db9320ac/mike-bostock-on-observable.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/4699aaa2a8a00328d7c9cc3bfabe1584db9320ac/jeremy-ashkenas-on-observable.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`I re-wrote the same buiding blocks that I had previously written in Mathematica, wired things together and quickly reached results. My stack: HTML, CSS, JS, D3.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`Better than Mathematica? Hell yes! In this case web technologies has proved to be effective, reassuring, transparent.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`Observable features:\n\n* As I said before, it's JS based;\n* it's reactive in a kind-of Excel-like way: you update a value and dependent cells are re-computed (Mathematica and Jupyter require you to trigger a recalc of part of or the whole notebook);\n* standard library is simple, complete and well made;\n* you can include code from other notebook, external libraries;\n* you can fork existing notebook and easily hack on them`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"slide`[Drawing machines with Observable](https://beta.observablehq.com/@sistrall/a-drawing-machine)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {keys, mac} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"cells = document.getElementsByClassName(\"slide\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null