31:T70b,{ 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; }32:T464,css = html``33:Tee0,Terminal = function(commands, options={}) { var MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || (Math.pow(2, 53) - 1); function FlattenIntoArray(target, source, sourceLen, start, depth) { var targetIndex = start; var sourceIndex = 0; while (sourceIndex < sourceLen) { var P = (sourceIndex).toString(); var exists = !!source[P]; if (exists) { var element = (source[ P]); var shouldFlatten = false; if (depth > 0) { shouldFlatten = Array.isArray(element); } if (shouldFlatten) { var elementLen = +((element.length)); targetIndex = FlattenIntoArray(target, element, elementLen, targetIndex, depth - 1); } else { if (targetIndex >= MAX_SAFE_INTEGER) { throw new TypeError('index too large'); } target[(targetIndex)]= element; targetIndex += 1; } } sourceIndex += 1; } return targetIndex; }; Array.prototype.flat = Array.prototype.flat || function flat() { var O = this; var sourceLen = O.length; var depthNum = 1; if (arguments.length > 0 && typeof arguments[0] !== 'undefined') { depthNum = (arguments[0]); } var A = O.slice(); FlattenIntoArray(A, O, sourceLen, 0, depthNum); return A; } let { w=width, terminalStyle='', commandPrefix='$ ', shellPrefix=' > ', outputPrefix='', commandStyle='$ ', shellStyle=' > ', outputStyle='', commandPrefixStyle='', shellPrefixStyle='', outputPrefixStyle='', } = options; // console.log(commands) if(Array.isArray(commands)) { commands = commands.map(c=>{ if(typeof(c) === 'string') return c.split('\n') return c }).flat() } else { commands = commands.split('\n') } let randId = `terminal-id-${Math.floor(Math.random()*100)}-${Date.now()}`; return html`

${commands.map( (c,i) => { let type = 'command'; let line = c.line || c; let style = c.style || ''; if(c.type) // if command obj was passed type = c.type; else { let res = /!(command|output|shell).*$/g.exec(line) if (res) { // used something like '!command cat example.txt' type = res[1] line = line.slice( type.length+1) } } return `${line}
`; })}

` }34:T858,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.iframe=function (strings) { const container = document.createElement("div"); container.innerHTML="" container.className = "slide white"; 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.html=function (strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html"; 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; }35:[] 2f:{"title":"Interaktives Multimedia","cells":[{"id":0,"value":"md`# Interaktives Multimedia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`_Den code für dieses Presentation ist von [Silvano Stralla](https://observablehq.com/@sistrall), [Mike Bostock\n](https://observablehq.com/@mbostock), [Alex Garcia](https://observablehq.com/@asg017) und [Dan Ellis](https://observablehq.com/@wolfiex)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"slide`Interaktive Notizbüchern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"//linear regression, random forest, support vector machines)\n/*reinforcement vs supervised\n\nWie funktionieren selbst fahrende Autos?\nWer fährt die?\nEs ist aber schwer zu definieren was künstlichen Intelligenz ist, wer stellt es ein.\n\nProgrammierer machen KI anhand von Modelle von Mathematiker, Wissenschaftler, die nicht einfach zu verstehen sind.\n\n\n*/\nmd`\n\n[Interaktive Notebooks](https://en.wikipedia.org/wiki/Notebook_interface) bzw. Rechnerisch Hefte/Notizbüchern sind eine grafische Benutzeroberfläche, die in einige Bereiche benutzt sind um Daten darzustellen, bearbeiten, teilen und mit Graphen interagieren. `//Was sind Interaktive Notebooks? Und wieso sind sie wichtig?\n\n//Ich erzähle eine kleine geschichte, wie ich diese idee kennengelernt habe.","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"slide`Wer benutz diese Medium?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"slide.img`https://user-images.githubusercontent.com/2415206/55605340-58412d00-5774-11e9-983f-6a55962712fa.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"slide.img`https://user-images.githubusercontent.com/2415206/55605376-89216200-5774-11e9-8d0a-7cc6e297c83d.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"slide`Es ist mehr als ein Werkzeug für Datenwissenschaftler`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`- Studenten und Lehrer der Bereiche Rechnerwissentschaft, IT, Matematik und andere Wissentschaften.\n- [Datenwissenschaftler](https://de.wikipedia.org/wiki/Data_Science)\n- Journalisten, und zwar Journalisten, die Über diese Themen berichten\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"slide`Was sind Interaktive Notizbüchern?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"slide.img`https://user-images.githubusercontent.com/2415206/55081676-97022380-50a0-11e9-9c0c-b1d3a0e5a6d5.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`Interkative Notebooks sind ein Medium, wo man Ideen mitteilen kann. In diese Medium den Inhalt ist nicht statik, es verändert sich abhängig davon, was der Leser bzw. Empfänger tut. z.B der kann Parameters mithilfe Sliders auswählen.\n\nEin Beispiel von diese ist:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"slide.img`https://winworldpc.com/res/img/screenshots/Mathematica%202.1%20-%20About.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`Mathematica ist eine Moderne CAS (Computer Algebra System) die viele Algebraische Bezeichnungen berechnen kann. Diese Bezeichnungen kann sich über viele Bereiche beziehen, wie: \n- Neuronale Netze\n- Machine Learning\n- Bildverarbeitung\n- Geometrie\n- Datenwissenschaft\n- Visualisierungen\n\nEs wurde von Stephen Wolfram angelegt, und es ist von Wolfram Research entwickelt.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"slide.img`https://gist.githubusercontent.com/sistrall/41d9e0dafcf04abe17750376200e1b90/raw/35971e57db95bfb928b319c5a36f1d2a91b20143/mathematica-notebook.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`Etwas, was Mathematica nützt sind sog „interactive notebooks“, wo man befehle eintippen kann. Diese Befehle sind sofort ausgeführt, und den Ausgabe kann verschiedene Arten von Formen nehmen.\n\nDiese Notizbücher sind Presentierbar, und man kann Dokumente wie Artikeln, Aufsätze oder Bücher daraus bilden. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"slide.iframe`https://blog.stephenwolfram.com/2017/11/what-is-a-computational-essay/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`Sogar Stephen Wolfram hat ein Artikeln in seinen Blog über \"Rechnerische Aufsätze\" geschrieben. In diesen Artikeln argumentiert er, warum Studenten von Bereiche der Mathematik oder Ingenieur diese Art von Notizbüchern nützen sollen, und er gibt tipps für eine Gute Rechnerisch Aufsätze, die Einfach zu verstehen sind.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":580,"value":"slide.img`https://upload.wikimedia.org/wikipedia/commons/4/4e/Plot_f%28x%2Ctheta%29%3Dproduct%28exp%28devide%28-pow%28x%2C2%29%2Cproduct%282%2Cpow%28sigma%2C2%29%29%29%29%2Ccos%28product%282%2Cpi%2Ctheta%2Cx%29%29%29%3B_sigma%3D1%3B_theta%3Drange%280.1%2C9.9%29.gif`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"slide`Warum sind diese Art von Notizbüchern nützlich?\n- Daten oder Grafiken sind einfacher darzustellen\n- Code, Text und Grafiken können gemischt werden`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`Man kann über verschiedenen Abstrakten oder Konkreten Themen presentieren. Außerdem ist es möglich diese von den Computer erzeugte Grafik abhängig von verschiedenen Parameter zu verändern.\n\nMan kann zum Beispiel Animationen damit erstellen, oder Man könnte lassen, dass die eigene Leser die Parameters auswählen.\n\nDie Animation würde mit Sagemath gemacht.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"slide`REPL\n\n_Read Eval Print Loop_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`Diese Notizbüchern sind eine Anpassung von REPLs.\n\nREPLs sind eine der früheste Benutzoberfläche, die erschaffen wurden, sobald Computers genug Rechnungleistung hatten um verschiedene Prozesse gleichzeitig auszuführen. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"slide`Bash ist ein Art von REPL\n${Terminal([{prefix:'user@domain:~$ ', line:'ein_Befehl'},`!outputAusgabe`,{prefix:'user@domain:~$ ', line:'ls -a'},`!output. .. Documents Downloads Desktop`])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"slide`${Terminal([{prefix:'user@domain:~$ ', line:'python'},{prefix:'>>> ', line:'import sys'},{prefix:'>>> ', line:'sys.version'},`!output'3.7.0 (default, Aug 22 2018, 20:50:05) \\\\n[GCC 5.4.0 20160609]'`,{prefix:'>>> ', line:' '}])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`Den unterschied zwischen REPLs und Notizbüchern ist, dass REPLs für den Terminal geeignet sind.\nNotizbüchern brauchen eine Grafische Benutzoberfläche`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"slide`Notizbücher Software:\n\n

Mathematica

Jupyter

$\"Sage$
SageMath

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"slide` Observable:\n${logo}
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"slide`_Diese Präsentation ist eine Interaktive Notizbuch_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"{\n var slid=slider({\n min: 0, \n max: 100, \n step: 1, \n value: 10, \n title: \"Wert von x\", \n description: \"Ganzzahlen von 0 bis 100\"\n});\n slid.addEventListener(\"input\",e=>update(slid.value))\n console.log(slid)\n var output=html``;\n var t=slide`Ein Slider Beispiel, ${slid}\n\nMan hat zum Beispiel diese Algebraische Bezeichnung: ${tex`e^{x}+x`}\n\nMan kann diese ${tex`x`} mit dem folgenden Slider manipulieren: ${output}`\n function update(zahl){\n output.innerHTML=\"\";\n output.appendChild(tex`{e^{${zahl}}}+${zahl}`);\n }\n update(slid.value);\nreturn t;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"md`Demo!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"1+2","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`Einige sehenwürdigkeiten:\n- [5 Minuten intro](https://observablehq.com/@observablehq/five-minute-introduction) oder Mike Bostocks [Artikel](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0)\n- [Convolutional Neural Network](https://observablehq.com/@tpreusse/interactive-convolutional-neural-network)\n- [Metacar reinforcement learning](https://observablehq.com/@ampcpmgp/metacar-reinforcement-learning)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"cells = document.getElementsByClassName(\"slide\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import {keys, mac} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"import {logo} from \"@observablehq/logo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"//logodataframes in spark and scala and datasets","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}