31:T505,{ const slides = [ md`# Observable`, md`De perfecte combinatie van Jupyter Notebook, reactive coding met hot reloading, Excel, JSFiddle, een Markdown-versie van Google Docs, een REPL, en de developer console van je browser!`, md`Observable is een tool om interactieve notebooks te maken, te publiceren en te delen — met Observable kun je snel code, data en algoritmes testen, visualiseren en documenteren`, md`Door Mike Bostock, de maker van D3.js`, md`JavaScript & npm-modules`, md`_Rapid prototyping_
met data & API’s`, html`

Opmaak met Markdown, HTML, SVG, CSS en ${tex`\LaTeX`}

`, md`Datavisualisatie, kaarten en GIS, algoritmes en _generative art_`, md`Observable-notebooks kun je publiceren en delen met anderen — ook kun je notebooks _forken_ en _mergen_!`, md`Er zijn heel veel goede voorbeelden te vinden op de homepage van Observable`, md`Gebruik bij Datapunt: snel data en API’s testen, _user interface_-elementen ontwerpen die met echte data werken, delen met de rest` ] return html`${slides.map((text, index) => { const t = index / slides.length const g = gradient(t * 360, d3.interpolateWarm(t)) return slide(text, g) })}` }32:[] 2f:{"title":"Datapunt: Observable-workshop","cells":[{"id":0,"value":"md`# Datapunt: Observable-workshop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`\nWorkshop Observable, 29 januari 2019.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`## Introductie`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`## Functionaliteit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`Elke cell in een Observable-notebook is een reactive stukje JavaScript-code:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"1 + 2 + 3 + 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`Je kunt nieuwe JavaScript-features gebruiken (ES6):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"arr = [...Array(5)].map((_, index) => index + 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`Als je cellen een naam geeft kun je ze in andere cellen gebruiken:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"arr2 = arr.map((n) => n * 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"a = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"b = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"sum = (a, b) => a + b","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"sum(a, b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`__Meer informatie: [Introduction to Code](https://beta.observablehq.com/@mbostock/introduction-to-code)__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`Observable houdt bij welke cellen van elkaar afhankelijk zijn. Als je cell _groet_ aanpast, worden alle cellen die van __groet_ afhankelijk zijn opnieuw berekend, in de juiste volgorde:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"groet = 'Hallo'","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"zin = `${groet}, ik ben Bert`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`“${zin}”, zei ${zin.split(' ').slice(-1)[0]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`__Meer informatie: [How Observable Runs](https://beta.observablehq.com/@mbostock/how-observable-runs)__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"md`Observable heeft een handige _standard library_ met functies om bijvoorbeeld cellen met HTML- en Markdown-inhoud te renderen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"html`

Dit is superdikke vette rode tekst!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`[Markdown](https://daringfireball.net/projects/markdown/syntax) is ook heel _handig_! \n\n1. Handig!\n2. Handig!\n3. __Handig!__\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"html`Zelfs ${tex`\\LaTeX`} wordt ondersteund:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"tex`\\frac{d}{dx}\\left( \\int_{0}^{x} f(u)\\,du\\right)=f(y)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`En SVG:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`__Meer informatie: [Standard Library](https://beta.observablehq.com/@mbostock/standard-library)__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`Je kunt heel eenvoudig npm-modules importeren, zoals D3.js:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"md`__Meer informatie: [Introduction to Imports](https://beta.observablehq.com/@mbostock/introduction-to-imports)__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"md`In D3.js zitten veel handige functies om met JSON en CSV te werken:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"csvUrl = 'https://gist.githubusercontent.com/bertspaan/e11f111c7fc1358eb91196f724e5f0a3/raw/0ff486e15d206686e389e045ffc6966b871a68ac/Sportaanbieders%2520-%2520sportaanbieders.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"sportaanbieders = d3.csv(csvUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"sportaanbieders.filter((a) => a.Sport === 'Aikido')","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"buurtdata = d3.json('https://api.data.amsterdam.nl/gebieden/buurt/')","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"buurtdata.results.map((buurt) => buurt.naam)","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`__Wie weet er hoe je geometriën terugkrijgt van die API? Dan kunnen we met \\`turf = require('@turf/turf')\\` de grooste buurt uitrekenen!__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`__Meer informatie: [Introduction to Data](https://beta.observablehq.com/@mbostock/introduction-to-data)__`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"md`Je kunt notebooks publiceren, en andermans notebooks _forken_ en aanpassen, en later weer _mergen_. Ook kun je (stukken van) andere Observable-notebooks importeren:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"viewof s = slider({min: 16, max: 100, value: 16, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"html`

font-size: ${s}px

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`Je kunt zelfs code uit Observable-notebooks gebruiken in Node.js of in de browser. Zie bijvoorbeeld [Breakout](http://ashkenas.com/breakout/), van een van de ontwikkelaars van Observable!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`__Meer informatie: [Fork, Share, Merge\n](https://beta.observablehq.com/@observablehq/fork-share-merge)__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`## Voorbeelden`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\nInteressante Observable-notebooks:\n\n- [Maps drawn with d3 Ridgeline Plot](https://beta.observablehq.com/@zechasault/maps-drawn-with-d3-ridgeline-plot)\n- [Directly labelling lines](https://beta.observablehq.com/@harrystevens/directly-labelling-lines)\n- [Methods of Comparison, Compared](https://beta.observablehq.com/@mbostock/methods-of-comparison-compared)\n- [Truchet Tiles variant: Intertwined quarter circles](https://beta.observablehq.com/@xenomachina/truchet-tiles-variant-intertwined-quarter-circles)\n- [Data-driven projections: Darwin's world](https://beta.observablehq.com/@bmschmidt/data-driven-projections-darwins-world)\n- [Direction to shore\n](https://beta.observablehq.com/@fil/direction-to-shore)\n- [2D point in triangle test](https://beta.observablehq.com/@kelleyvanevert/2d-point-in-triangle-test)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`## Observable & Datapunt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n- [Afvalcontainers](https://beta.observablehq.com/@spreeker/afvalcontainers-demo)\n- [Gebouwen in Amsterdam](https://beta.observablehq.com/@bertspaan/gebouwen-in-amsterdam)\n- [Prototype voor nieuwe Panoramakiezer in City Data](https://beta.observablehq.com/@bertspaan/panorama-picker)\n- [Tests voor nieuwe Panorama-API](https://beta.observablehq.com/@bertspaan/amsterdam-panorama-api)\n- [IIIF & OpenSeadragon](https://beta.observablehq.com/@bertspaan/iiif-openseadragon)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`#### Code en CSS voor slides`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"slide = (text, css) => html`

${text}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"slideHeight = Math.round(width / 1.6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"backgroundColor = '#424242'","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"gradient = (deg, color) => `background-image: linear-gradient(${deg}deg, ${color}, ${backgroundColor});`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}