2d:null 2e:["$","title",null,{"children":"JavaScript, Observable, D3js, SVG | T.E. Schouten | Observable"}] 33:T6b4,slide.md` # D3.js: Data Driven Documents *D3.js is a JavaScript library for manipulating documents based on data.* `34:T442,rect6 = { const data = [10, 2, 15, 30, 6, 4]; const margin = ({top: 10, right: 10, bottom: 10, left: 30}); const height = 200 const width = 450 const svg = d3.create("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom) const xScale = d3.scaleLinear() .domain([0, 6]) // 6 entries in onze dataset .range([margin.left, width - margin.right]); // 0 naar de max width van onze svg const yScale = d3.scaleLinear() .domain([0, 30]) .range([height - margin.bottom, margin.top]) // Reversed! Want de y-schaal loopt van boven naar onder const yAxis = d3.axisLeft() .scale(yScale) .ticks(5) const cScale = d3.scaleSequential() .domain([0,30]) .interpolator(d3.interpolatePuRd) svg.append("g") .call(yAxis) .attr("transform", `translate(${margin.left-2}, 0)`) // on the left svg.selectAll("rect") .data(data) .join("rect") .attr("x", (d,i) => xScale(i) ) .attr("y", d => yScale(d)) .attr("width", 50) .attr("height", d => yScale(0)-yScale(d)) .attr("fill", d => cScale(d)) return svg.node() }35:[{"id":"35a45512a4cb1004faf68f86d0e135d5d5265aa2d48342ba7287fdd2d7523e02f446ef7688f94c5c164f987f25af9394830ec8365d3004fe821ffd3a5efab4d5","href":"https://static.observableusercontent.com/files/35a45512a4cb1004faf68f86d0e135d5d5265aa2d48342ba7287fdd2d7523e02f446ef7688f94c5c164f987f25af9394830ec8365d3004fe821ffd3a5efab4d5","name":"preview.png","type":"image/png","lastModified":1606827589310.93,"size":295696},{"id":"891c98666c6f36947666019d8cbe6bf31b30bc18c7988909708c3de001fba05df67286fb40934833201a3f74331c76cd3a7c50279e9a9e2133bebbd185e31aaf","href":"https://static.observableusercontent.com/files/891c98666c6f36947666019d8cbe6bf31b30bc18c7988909708c3de001fba05df67286fb40934833201a3f74331c76cd3a7c50279e9a9e2133bebbd185e31aaf","name":"svzh.png","type":"image/png","lastModified":1606823044833.627,"size":1432198}] 31:{"id":"d141147406260ed4","slug":"javascript-observablehq-d3js-svg","title":"JavaScript, Observable, D3js, SVG","thumbnail":"f80700a6896b02c9ac170d420dcdd6cc2c08c511e4d096d5a64fa1d17d4a7103","access_level":"public","create_time":"$D2020-12-01T07:53:30.819Z","update_time":"$D2020-12-01T13:04:22.882Z","view_time":null,"first_public_time":"$D2020-12-01T11:56:12.372Z","has_unpublished_edits":null,"fork":{"id":"82350c252deafe28","slug":"slides-usage","title":"Using @visnup/slides","owner":{"id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d19a230dabb035d0","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":"starter_2024"},"version":988,"publish_version":988,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8802c07e4374e6f","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":null}],"members":[{"type":"individual","id":"b8802c07e4374e6f","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"JavaScript, Observable, D3js, SVG","cells":[{"id":10,"value":"slide.md`\n# JavaScript, Observable, D3js, SVG \n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"color = ({\n a0: \"#f9a03c\",\n a1: \"#f7974e\",\n b0: \"#f26d58\",\n b1: \"#f9a03c\",\n c0: \"#b84e51\",\n c1: \"#f68e48\"\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"notes.md`\n Optioneel - notes toevoegen\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"slide.md`\n### Komende (30?) minuten\n- JavaScript (JS) basics\n- Korte intro ObservableHQ\n- SVG \n- D3.js\n\n
\n**** Vragen? stel ze gelijk. ****\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"slide.md`## JavaScript basics\n- Scripting/programmeertaal \n- Origineel: aanvullend aan HTML/CSS voor het web\n- Tegenwoordig: ook buiten browsers\n
\n
\n\nJavaScript != Java\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"slide.md`## JS Variables\n\n~~~ javascript\n// Assigned met keywords:\nconst, let, var\n~~~\n\n~~~ javascript\n// Ter eenvoudiging gebruiken we var\nvar a = 5; //int\nvar b = '5' //string\nvar c = 1.5 //float\nvar d = 'PZH' //string; \nvar e = [2,3,5] //array\nvar f = true //boolean\n\na + c // 6.5\na * c // 7.5\n~~~\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"slide.md`## JS Objects & Arrays\n\n~~~ javascript\n// Object (JSON = JavaScript Object Notation)\nvar car = {type: \"Fiat\", model: \"500\", color:\"white\"};\ncar.type // \"Fiat\"\n\n// Array\nvar cars = [\"Saab\", \"Volvo\", \"BMW\"];\ncars[0] // \"Saab\"\n\n\n~~~\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"slide.md`## JS Conditional statements\n\n~~~ javascript\nvar time = 13\n\nif (time > 12) {\n var groet = 'Goedemiddag'\n} else {\n var groet = 'Morge'\n}\n\ngroet // 'Goedemiddag'\n\n\n~~~\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"slide.md`## JS Functions\n\n~~~ javascript\nvar [x, y] = [5, 10]\n\n// named function\nfunction sum(a, b) {\n return a+b; \n}\n\nsum(x, y) //-> 15\n\n~~~\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"slide.md`## JS Arrow functions \n\nZoals lambda in python.\n\n~~~ javascript\n// traditional\nfunction (a, b){\n return a + b;\n}\n\n// arrow function\n(a, b) => a + b;\n\n~~~\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"slide.md`## Tips\n\nCheck browser console! (F12) \nNeem de tijd om JS beter te leren. \nGebruik ObservableHQ\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"slide.md`\n\n\n\n${logoAndWordmark}\n\n= platform voor reactive JavaScript notebooks\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"slide.md`## SVG - Scalable Vector Graphics \n*[...] a text-based, open web standard for describing images [...] (MDN web docs)*\n\nSVG gebruikt XML-format.\n\n\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"slide.md`### SVG \"artboard\"\n\n~~~ html\n\n~~~\nLinksboven = [0,0]\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"slide.md`### Circles\n\n~~~ html\n\n~~~\n
\n\n\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"slide.md`## Rectangles\n\n~~~ html\n\n~~~\n
\n\n\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"slide.md`### (Poly)lines \n\n~~~ html\n\n\n~~~\n
\n\n\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"slide.md`### Totaal\n\n~~~ svg\n\n\n~~~\n
\n\n\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"slide.md`## Wat is D3.js niet? \nGeen library om grafieken te maken \nGeen library om kaarten te maken \n*.. maar dat kan allemaal wel*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"slide.md`## Waarom D3.js? \n+ Veel meer vrijheid dan powerbi/tableau etc. \n+ Bewust omgaan met visuele variabelen \n+ Open source \n+ Leuk\n\n- Steile leercurve \n- (Veel) meer werk/tijd\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"slide.md`## Manipulating *documents* based on *data*\nDocuments → SVG (vector), canvas (raster), ... \nData → uit eigen csv, externe databron, ...\n\n~~~javascript\n// Of gewoon een array\nconst data = [10, 2, 15, 30, 6, 4];\n~~~\n\n ... hoe werkt het? \n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"slide.md`\n### Teken SVG artboard\n~~~javascript\n// method chaining\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 450)\n .attr(\"height\", 150)\n .style(\"background-color\", \"lightgrey\")\n~~~\n\n${svg1}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"svg1 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", 550)\n .attr(\"height\", 100)\n .style(\"background-color\", \"lightgrey\")\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"slide.md`\n### Bind data aan cirkels, en teken\n~~~javascript\nconst data = [10, 2, 15, 30, 6, 4];\n\nsvg.selectAll(\"circle\") \n .data(data) \n .join(\"circle\") \n .attr(\"r\", d => d)\n .attr(\"cx\", (d,i) => (80*i+70))\n .attr(\"cy\", 75) \n~~~\n\n${chart2}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"chart2 = {\n const data = [10, 2, 15, 30, 6, 4];\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", 550)\n .attr(\"height\", 100)\n .style(\"background-color\", \"darkgrey\")\n \n svg.selectAll(\"circle\") \n .data(data) \n .join(\"circle\") \n .attr(\"r\", d => d) // De radius van de cirkel is de waarde van de data\n .attr(\"cx\", (d,i) => (80*i+70)) // X-coordinaat berekenen we\n .attr(\"cy\", 50) // Y-coordinaat in het midden\n \n return svg.node() // svg.node() returns the actual SVG value. ObservableHQ specific.\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"slide.md`\n### .. wacht, wat? 🤯 \n~~~javascript \n svg.selectAll(\"circle\") // Selecteer alle \"cirkels\" op SVG artboard \n .data(data) // Selecteer de dataset\n .join(\"circle\") // Vergelijk de dataset met mn selectie --\n // Minder cirkels dan datapunten? -> Teken cirkels\n // Evenveel cirkels als datapunten? -> Doe niets\n // Meer datapunten dan cirkels? -> Verwijder overschot\n \n~~~\n##### *Veruit het lastigste aan D3.js!*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"slide.md`\n### Set attributes\n \n~~~javascript \nsvg.selectAll(\"circle\") \n .data(data) \n .join(\"circle\") \n // (d,i) d = datapuntzelf\n // i = index van datapunt\n .attr(\"r\", d => d) // Radius = waarde van het datapunt\n .attr(\"cy\", 75) // Y-coordinaat = middelpunt van mn artboard\n .attr(\"cx\", (d,i) => (60*i+70)) // X-coordinaat = gebaseerd op de index\n \n \n \n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"slide.md`\n### Totaal\n~~~javascript\nconst data = [10, 2, 15, 30, 6, 4];\n\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 550)\n .attr(\"height\", 100)\n .style(\"background-color\", \"darkgrey\")\n\nsvg.selectAll(\"circle\") \n .data(data) \n .join(\"circle\") \n .attr(\"r\", d => d) // De radius van de cirkel is de waarde van de data\n .attr(\"cx\", (d,i) => (60*i+70)) // X-coordinaat berekenen we\n .attr(\"cy\", 50) // Y-coordinaat in het midden\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"slide.md`\n### Nogmaals, rectangles\n~~~javascript\nconst data = [10, 2, 15, 30, 6, 4];\n\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 550).attr(\"height\", 100).style(\"background-color\", \"darkgrey\")\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => (60*i+70)) \n .attr(\"y\", 0) \n .attr(\"width\", 50)\n .attr(\"height\", d => d*3)\n~~~\n${rect2}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"rect2 = {\nconst data = [10, 2, 15, 30, 6, 4];\n\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 550).attr(\"height\", 100).style(\"background-color\", \"darkgrey\")\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => (60*i+70)) \n .attr(\"y\", 0) \n .attr(\"width\", 50)\n .attr(\"height\", d => d*3)\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"slide.md`\n### x,y coordinaat linksboven\n~~~javascript\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => (60*i+70)) \n .attr(\"y\", d => 100-d*3) // height (100) - barhoogte\n .attr(\"width\", 50)\n .attr(\"height\", d => d*3)\n~~~\n${rect3}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"rect3 = {\nconst data = [10, 2, 15, 30, 6, 4];\n\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 550).attr(\"height\", 100).style(\"background-color\", \"darkgrey\")\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => (60*i+70)) \n .attr(\"y\", d => 100-d*3) \n .attr(\"width\", 50)\n .attr(\"height\", d => d*3)\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"slide.md`\n### Scales\nBerekenen van pixel-coordinaten = veel werk! -> D3 scales. \nMapping van domein naar range:\n- Domein = de waarden in mn dataset\n- Range = de pixelwaarden die ik verwacht\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"slide.md`\n\n${scalechart}\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"slide.md`\n### Scales: X-scale\n~~~javascript\nconst xScale = d3.scaleLinear()\n .domain([0, 5]) // 6 entries in onze dataset\n .range([0, 550]); // 0 naar de max width van onze svg\n\nxScale(0) // 0\nxScale(1) // 110\nxScale(5) // 550\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"slide.md`\n### Y-scale\n~~~javascript\nconst yScale = d3.scaleLinear()\n .domain([0, 30]) \n .range([100, 0]); // Reversed! Want de y-schaal loopt van boven naar onder\n\nyScale(0) // 100\nyScale(15) // 50\nyScale(30) // 0\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"slide.md`\n\n~~~javascript\nconst xScale = d3.scaleLinear()\n .domain([0, 6]) // 6 entries in onze dataset\n .range([0, 550]); // 0 naar de max width van onze svg\n \nconst yScale = d3.scaleLinear()\n .domain([0, 30]) \n .range([100, 0]); // Reversed! Want de y-schaal loopt van boven naar onder\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => xScale(i) ) \n .attr(\"y\", d => yScale(d)) \n .attr(\"width\", 50)\n .attr(\"height\", d => 100-yScale(d))\n~~~\n\n${rect4}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"rect4 = {\nconst data = [10, 2, 15, 30, 6, 4];\n\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 550).attr(\"height\", 100)\n\nconst xScale = d3.scaleLinear()\n .domain([0, 6]) // 6 entries in onze dataset\n .range([0, 550]); // 0 naar de max width van onze svg\n \nconst yScale = d3.scaleLinear()\n .domain([0, 30]) \n .range([100, 0]); // Reversed! Want de y-schaal loopt van boven naar onder\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => xScale(i) ) \n .attr(\"y\", d => yScale(d)) \n .attr(\"width\", 50)\n .attr(\"height\", d => 100-yScale(d))\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"slide.md`\n### Colorscales\n~~~javascript\nconst cScale = d3.scaleSequential()\n .domain([0,30])\n .interpolator(d3.interpolatePuRd)\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => xScale(i) ) \n .attr(\"y\", d => yScale(d)) \n .attr(\"width\", 50)\n .attr(\"height\", d => yScale(0)-yScale(d))\n .attr(\"fill\", d => cScale(d)) // Add fill!\n\n~~~\n\n${rect5}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"rect5 = {\nconst data = [10, 2, 15, 30, 6, 4];\n\nconst svg = d3.create(\"svg\")\n .attr(\"width\", 550).attr(\"height\", 100)\n\nconst xScale = d3.scaleLinear()\n .domain([0, 6]) // 6 entries in onze dataset\n .range([0, 550]); // 0 naar de max width van onze svg\n \nconst yScale = d3.scaleLinear()\n .domain([0, 30]) \n .range([100, 0]); // Reversed! Want de y-schaal loopt van boven naar onder\n \nconst cScale = d3.scaleSequential()\n .domain([0,30])\n .interpolator(d3.interpolatePuRd)\n\nsvg.selectAll(\"rect\") \n .data(data) \n .join(\"rect\") \n .attr(\"x\", (d,i) => xScale(i) ) \n .attr(\"y\", d => yScale(d)) \n .attr(\"width\", 50)\n .attr(\"height\", d => yScale(0)-yScale(d))\n .attr(\"fill\", d => cScale(d))\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"slide.md`### Axes\n\n~~~ javascript\nconst yScale = d3.scaleLinear()\n .domain([0, 30]) \n .range([100, 0]); // Reversed! Want de y-schaal loopt van boven naar onder\n\nconst yAxis = d3.axisLeft()\n .scale(yScale)\n .ticks(5)\n\nsvg.append(\"g\")\n .call(yAxis)\n\n// vervolgens moet je de axis nog wel naar de juiste locatie transformeren!\n~~~\n\n${rect6}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"slide.md`\n\n** & er is nog veel meer **\n- Projections: van geo-coordinaten naar pixel-coordinaten\n- Transitions: animaties van a naar b\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"slide.md`\nhttps://observablehq.com/@thijsschouten/overbelasting-natura2000\n\n${n2kc}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"slide.md`\nhttps://observablehq.com/@thijsschouten/test\n${chart_stacked}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"slide.md`\nhttps://observablehq.com/@thijsschouten/pzh-natura2000-gebieden\n${pzh_map}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"slide.md`\n### Embedden op SvZH\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"// [{label: 'GEO', medewerkers: 5, loc: '3B'},\n// {label: 'RWB', medewerkers: 7, loc: '4Y'},\n// {label: 'W&G', medewerkers: 5, loc: '2C'},\n// {label: 'M&M', medewerkers: 8, loc: '4A'}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"keyBindings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"import { chart as scalechart, button as b } from \"@info474/animated-scale-diagram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"import { logoAndWordmark } from \"@observablehq/logo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"import {pzh_map} from \"@thijsschouten/pzh-natura2000-gebieden\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"import {chart as n2kc} from \"@thijsschouten/overbelasting-natura2000\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"import {chart_stacked} from \"@thijsschouten/test\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"main_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import { slide, notes, style, keyBindings } from '@visnup/slides'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"d3 = require (\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"