D3 Page Template

31:T419,{ const width = 500; const height = 100; const graph = d3.select(DOM.svg(width, height)); const data = getRandomDataset(); const barPadding = 1; graph.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => i * (width / data.length)) .attr("y", d => height - d * 4) .attr("width", width / data.length - barPadding) .attr("height", d => d * 4) .attr("fill", d => d3.lab(40 + 2 * d, 100, -60)); graph.selectAll("text") .data(data) .enter() .append("text") .text(d => d) // set the x position at the middle of the bar .attr("x", (d, i) => i * (width / data.length) + (width / data.length - barPadding) / 2) .attr("y", d => height - d * 4 + 15) .attr("text-anchor", "middle") // set the text anchor to middle .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); return graph.node(); }32:T6a9,{ const width = 500; const height = 100; const graph = d3.select(DOM.svg(width, height)); const data = getRandomDataset(25,80); const barPadding = 1; const xScale = d3.scaleBand() // use an ordinal scale .domain(d3.range(data.length)) // generate array from 0 to length in steps of 1 .rangeRound([0, width]) // output between 0 and width .paddingInner(0.05); // % of whitespace between bars const yScale = d3.scaleLinear() // basic linear scale for bar lengths .domain([0, d3.max(data)]) .range([0, height]); const cScale = d3.scaleSequential() // use a sequential scale with interpolator for the colors .interpolator(d3.interpolateGreens) .domain([0, d3.max(data)]); graph.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => xScale(i)) // use the scale to calculate x values .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) // use bandwidth of scale to determine bar width .attr("height", d => yScale(d)) .attr("fill", d => cScale(d)); // color scale graph.selectAll("text") .data(data) .enter() .append("text") .text(d => d) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); return graph.node(); }33:T938,{ const width = 500; const height = 160; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); graph.append("text") .attr("y", padding.top) .text("Actie!") .style("cursor", "hand") .on("click", updateData); let data = getRandomDataset(); const barPadding = 1; const xScale = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); const yScale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([padding.bottom, height - padding.top]); const cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens) .domain([0, d3.max(data)]); graph.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", d => cScale(d)); graph.selectAll("text.label") .data(data) .enter() .append("text") .attr("class", "label") .text(d => d) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); function updateData() { // data = getRandomDataset(); // generate new data data = getRandomDataset(25, 40); // update the scales yScale.domain([0, d3.max(data)]); cScale.domain([0, d3.max(data)]); graph.selectAll("rect") // select all rects .data(data) .transition() .delay((d,i) => i * 50) .attr("y", d => height - yScale(d)) // update the attrs .attr("height", d => yScale(d)) .attr("fill", d => cScale(d)); // also update the color graph.selectAll("text.label") // update the label position and values .data(data) .transition() .delay((d,i) => i * 50) .text(d => d) .attr("y", d => height - yScale(d) + 15); } return graph.node(); }34:T94e,{ const width = 500; const height = 160; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); graph.append("text") .attr("y", padding.top) .text("Actie!") .style("cursor", "hand") .on("click", updateData); let data = getRandomDataset(); const barPadding = 1; const xScale = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); const yScale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([padding.bottom, height - padding.top]); const cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens) .domain([0, d3.max(data)]); graph.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", d => cScale(d)); graph.selectAll("text.label") .data(data) .enter() .append("text") .attr("class", "label") .text(d => d) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); function updateData() { // data = getRandomDataset(); // generate new data data.push(...getRandomDataset(1, 40)); data.shift(); // update the scales yScale.domain([0, d3.max(data)]); cScale.domain([0, d3.max(data)]); graph.selectAll("rect") // select all rects .data(data) .transition() .delay((d,i) => i * 50) .attr("y", d => height - yScale(d)) // update the attrs .attr("height", d => yScale(d)) .attr("fill", d => cScale(d)); // also update the color graph.selectAll("text.label") // update the label position and values .data(data) .transition() .delay((d,i) => i * 50) .text(d => d) .attr("y", d => height - yScale(d) + 15); } return graph.node(); }35:Tcfb,{ const width = 500; const height = 100; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); graph.append("text") .attr("y", padding.top) .text("Action!") .style("cursor", "hand") .on("click", updateData); let data = getIndexedRandomDataset(); // call new function const barPadding = 1; const xScale = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[1])]) // specify accessor function .range([padding.bottom, height - padding.top]); const cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens) .domain([0, d3.max(data, d => d[1])]); graph.selectAll("rect") .data(data, d => d[0]) // specify key/id .enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d[1])) // point to d[1] instead of d .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); graph.selectAll("text.label") .data(data) .enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d[1]) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); function updateData() { data.push(...getIndexedRandomDataset(data[data.length - 1][0], 1, 40)); data.shift(); // update the scales yScale.domain([0, d3.max(data, d => d[1])]); cScale.domain([0, d3.max(data, d => d[1])]); let bars = graph.selectAll("rect") .data(data, d => d[0]); bars.enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(0)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0)) .attr("fill", d => cScale(d[1])) .merge(bars) .transition() .attr("x", (d, i) => xScale(i)) // update x position of bars .attr("y", d => height - yScale(d[1])) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); let labels = graph.selectAll("text.label") .data(data, d => d[0]); labels.enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(0) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(labels) .transition() .text(d => d[1]) .attr("y", d => height - yScale(d[1]) + 15) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); // update x position of labels } return graph.node(); }36:Td1d,{ const width = 500; const height = 100; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); graph.append("text") .attr("y", padding.top) .text("Action!") .style("cursor", "hand") .on("click", updateData); let data = getIndexedRandomDataset(); const barPadding = 1; const xScale = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[1])]) .range([padding.bottom, height - padding.top]); const cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens) .domain([0, d3.max(data, d => d[1])]); graph.selectAll("rect") .data(data, d => d[0]) .enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d[1])) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); graph.selectAll("text.label") .data(data) .enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d[1]) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); function updateData() { data.push(...getIndexedRandomDataset(data[data.length - 1][0], 1, 40)); data.shift(); // update the scales yScale.domain([0, d3.max(data, d => d[1])]); cScale.domain([0, d3.max(data, d => d[1])]); let bars = graph.selectAll("rect") .data(data, d => d[0]); bars.enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(0)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0)) .attr("fill", d => cScale(d[1])) .merge(bars) .transition() .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d[1])) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); bars.exit() .transition() .attr("y", d => height - yScale(0)) .attr("height", d => yScale(0)) .remove(); let labels = graph.selectAll("text.label") .data(data, d => d[0]); labels.enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(0) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(labels) .transition() .text(d => d[1]) .attr("y", d => height - yScale(d[1]) + 15) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); labels.exit() .transition() .attr("y", d => height - yScale(0) + 15) .remove(); } return graph.node(); }37:Tb6b,{ const width = 500; const height = 100; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); let xScale, yScale, cScale; let data = getIndexedRandomDataset(); setUp(); update(); function setUp() { graph.append("text") .attr("y", padding.top) .text("Action!") .style("cursor", "hand") .on("click", updateData); xScale = d3.scaleBand() .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); yScale = d3.scaleLinear() .range([padding.bottom, height - padding.top]); cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens); } function update() { // update the scales xScale.domain(d3.range(data.length)); yScale.domain([0, d3.max(data, d => d[1])]); cScale.domain([0, d3.max(data, d => d[1])]); let bars = graph.selectAll("rect") .data(data, d => d[0]); bars.enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(0)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0)) .attr("fill", d => cScale(d[1])) .on("click", d => console.log(d)) .on("mouseover", function () { d3.select(this).attr("fill", "hotpink"); }) .on("mouseout", function (d) { d3.select(this) .transition() .duration(1000) .attr("fill", cScale(d[1])); // reset the color to normal using a transition }) .merge(bars) .transition() .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d[1])) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); bars.exit() .transition() .attr("y", d => height - yScale(0)) .attr("height", d => yScale(0)) .remove(); let labels = graph.selectAll("text.label") .data(data, d => d[0]); labels.enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(0) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(labels) .transition() .text(d => d[1]) .attr("y", d => height - yScale(d[1]) + 15) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); labels.exit() .transition() .attr("y", d => height - yScale(0) + 15) .remove(); } function updateData() { data.push(...getIndexedRandomDataset(data[data.length - 1][0], 1, 40)); data.shift(); update(); } return graph.node(); }38:Td5c,{ const width = 500; const height = 100; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); let xScale, yScale, cScale; let sorted = false; // keep current state let data = getIndexedRandomDataset(); setUp(); update(); function setUp() { graph.append("text") .attr("y", padding.top) .text("Action!") .style("cursor", "hand") .on("click", action); xScale = d3.scaleBand() .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); yScale = d3.scaleLinear() .range([padding.bottom, height - padding.top]); cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens); } function update() { // update the scales xScale.domain(d3.range(data.length)); yScale.domain([0, d3.max(data, d => d[1])]); cScale.domain([0, d3.max(data, d => d[1])]); let bars = graph.selectAll("rect") .data(data, d => d[0]); bars.enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(0)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0)) .attr("fill", d => cScale(d[1])) .on("click", d => console.log(d)) .on("mouseover", function () { d3.select(this).attr("fill", "hotpink"); }) .on("mouseout", function (d) { d3.select(this) .transition("color") .duration(1000) .attr("fill", cScale(d[1])); }) .merge(bars) .transition() .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d[1])) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); bars.exit() .transition() .attr("y", d => height - yScale(0)) .attr("height", d => yScale(0)) .remove(); let labels = graph.selectAll("text.label") .data(data, d => d[0]); labels.enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(0) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(labels) .transition() .text(d => d[1]) .attr("y", d => height - yScale(d[1]) + 15) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); labels.exit() .transition() .attr("y", d => height - yScale(0) + 15) .remove(); } function action() { let sortFunction; if (sorted) { sortFunction = (a, b) => d3.ascending(a[0], b[0]); } else { sortFunction = (a, b) => d3.ascending(a[1], b[1]); } sorted = !sorted; graph.selectAll("rect") .sort(sortFunction) // use new sort function .transition("position") .duration(1000) .attr("x", (d, i) => xScale(i)); graph.selectAll("text.label") .sort(sortFunction) // use new sort function .transition() .duration(1000) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); } return graph.node(); }39:Tde1,{ const width = 500; const height = 100; const padding = {top: 15, left: 0, right: 0, bottom: 0}; const graph = d3.select(DOM.svg(width, height)); let xScale, yScale, cScale; let sorted = false; // keep current state let data = getIndexedRandomDataset(); setUp(); update(); function setUp() { graph.append("text") .attr("y", padding.top) .text("Action!") .style("cursor", "hand") .on("click", updateData); xScale = d3.scaleBand() .rangeRound([padding.left, width - padding.right]) .paddingInner(0.05); yScale = d3.scaleLinear() .range([padding.bottom, height - padding.top]); cScale = d3.scaleSequential() .interpolator(d3.interpolateGreens); } function update() { // update the scales xScale.domain(d3.range(data.length)); yScale.domain([0, d3.max(data, d => d[1])]); cScale.domain([0, d3.max(data, d => d[1])]); let bars = graph.selectAll("rect") .data(data, d => d[0]); bars.enter() .append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(0)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0)) .attr("fill", d => cScale(d[1])) .on("click", action) .on("mouseover", function () { d3.select(this).attr("fill", "hotpink"); }) .on("mouseout", function (d) { d3.select(this) .transition("color") .duration(1000) .attr("fill", cScale(d[1])); }) .merge(bars) .transition() .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d[1])) .attr("height", d => yScale(d[1])) .attr("fill", d => cScale(d[1])); bars.exit() .transition() .attr("y", d => height - yScale(0)) .attr("height", d => yScale(0)) .remove(); let labels = graph.selectAll("text.label") .data(data, d => d[0]); labels.enter() .append("text") .attr("class", "label") .text(d => d[1]) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(0) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(labels) .transition() .text(d => d[1]) .attr("y", d => height - yScale(d[1]) + 15) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); labels.exit() .transition() .attr("y", d => height - yScale(0) + 15) .remove(); } function action() { let sortFunction; if (sorted) { sortFunction = (a, b) => d3.ascending(a[0], b[0]); } else { sortFunction = (a, b) => d3.ascending(a[1], b[1]); } sorted = !sorted; graph.selectAll("rect") .sort(sortFunction) // use new sort function .transition("position") .duration(1000) .attr("x", (d, i) => xScale(i)); graph.selectAll("text.label") .sort(sortFunction) // use new sort function .transition() .duration(1000) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2); } function updateData() { data.push(...getIndexedRandomDataset(data[data.length - 1][0], 1, 40)); data.shift(); update(); } return graph.node(); }3a:[] 2f:{"title":"Data Visualisatie met D3.js","cells":[{"id":0,"value":"md`# Data Visualisatie met D3.js\n\nWelkom bij de oefeningen voor de workshop 'Data Driven Storytelling' van het Data Doeners Netwerk van Datalab Amsterdam.\n\nDit notebook bevat vertaalde en aangepaste voorbeelden uit de notebooks van [Bart Mesuere](https://beta.observablehq.com/@bmesuere) voor zijn Data Visualization course bij Ghent University. De voorbeelden zijn tevens aangepaste versies van de tutorials van [Scott Murray](http://alignedleft.com/tutorials/d3).\n\nD3.js v5 is beschikbaar als de variabele \\`d3\\`. In plaats van elementen toe te voegen aan de body van een document, zoals bij een normale pagina, kunnen we in dit Observable notebook nieuwe elementen creëren en die meteen \\`return\\`-en. Observable visualiseert de handel dan meteen.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`\nWaar ik het in de [presentatie](https://www.jurian.me/d3-datadoeners-2018/#1) hiervoor had over deze opzet:\n\\`\\`\\`\n\n\n \n \n D3 Page Template\n \n \n \n \n \n\n\\`\\`\\`\nKunnen we in dit notebook af met dit blokje code:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n const graph = d3.select(DOM.element(\"div\")); // DOM.element is an Observable API call\n \n graph.append(\"p\").text(\"Hooooi!\"); // Add to new element instead of body\n \n return graph.node(); // return the node to display the result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`Dit is dezelfde JavaScript code, maar zonder de HTML wrapper, en met een kleine verandering in hoe de visualisatie aan de pagina toegevoegd moet worden. Hierdoor kunnen we kleine stukjes veranderen en meteen zien wat er verandert. Omdat deze notebooks te forken zijn, kunnen jullie ook eenvoudig dingen aanpassen en alles later nog eens nalezen. Een grote, 'echte' visualisatie zou je waarschijnlijk wel in een text editor willen ontwikkelen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Data binding\nHet binden van data aan DOM elements gebeurd met D3's \\`data\\` method. Hiervoor selecteren we DOM elementen met \\`d3.selectAll\\` en binden de dataset met \\`.data(dataset)\\` aan de selectie.\n\nGek genoeg hoeven de elementen die we met \\`d3.selectAll\\` selecteren nog niet te bestaan op het moment dat we data aan ze binden. D3 maakt placeholders voor deze elementen, en stelt ze beschikbaar met de \\`enter()\\` method.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"dataset = [5, 10, 15, 20, 25]","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"p\") // make a selection of all paragraphs\n .data(dataset) // bind our data to the selection\n .enter() // take the set of placeholder elements\n .append(\"p\") // append a paragraph for each placeholder\n .text(\"Ja!!\")\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`Hier zien we een paragraaf per data element, maar we hebben nog niet echt wat met de data gedaan. Om data te gebruiken in de D3 calls, gebruiken we kleine, anonieme functies in de vorm \\`d => d\\`. Deze functie geeft 1 voor 1 ieder data element door die met de \\`.data()\\` call is aangeroepen.\n\nWe kunnen ook de positie van het element in de array verkrijgen door de functie met een extra argument uit te breiden. Gebruik hiervoor de vorm \\`(d, i) => d, i\\`, met \\`d\\` voor het data element en \\`i\\` voor de index.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n .text((d,i) => `Ja! (waarde: ${d}, index: ${i})`); // use the value of d as text. Longer version: function(d){return d;}\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`We kunnen ook styling toevoegen met de \\`style\\` function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n .text(d => d)\n .style(\"color\", \"blue\"); // make the text blue by applying css\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`Het wordt natuurlijk pas leuk als we de waarde van de data gaan gebruiken om de stijl te veranderen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n .text(d => d)\n .style(\"color\", d => d > 10 ? \"blue\" : \"green\"); // adapt color based on the value\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`## Tekenen met Data\nDit hebben we in de presentatie al een beetje gehad, maar laten we hier een bar chart maken met data:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`Een div voor ieder element in de array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"div\")\n .data(dataset)\n .enter()\n .append(\"div\") // append a div instead of a p\n .attr(\"class\", \"bar\"); // add a class to apply css styling\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`De waarde gebruiken voor de hoogte:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"div\")\n .data(dataset)\n .enter()\n .append(\"div\")\n .attr(\"class\", \"bar\")\n .style(\"height\", d => d + \"px\"); // use the data value in pixels as height\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`Laten we dit eens met random data uitproberen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"function getRandomDataset(size = 25, range = 20) {\n const data = [];\n for (let i = 0; i < size; i++) {\n data.push(5 + Math.floor(Math.random() * range));\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"getRandomDataset()","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n const graph = d3.select(DOM.element(\"div\")); \n \n graph.selectAll(\"div\")\n .data(getRandomDataset()) // generate random data instead of fixed dataset\n .enter()\n .append(\"div\")\n .attr(\"class\", \"bar\")\n .style(\"height\", d => d + \"px\");\n \n return graph.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## SVG time\nWe gaan met SVG aan de slag! Het is gebruikelijk (want makkelijk) om dingen als de breedte en hoogte van charts als constanten te definieren. In Observable selecteren we ons SVG element met een speciaal \\`DOM\\` object:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"{\n const width = 500;\n const height = 50;\n const graph = d3.select(DOM.svg(width, height)); // create an svg element with width and height\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`Nu zien we nog niks, maar daar gaan we nu verandering in brengen. We weten inmiddels wel hoe! \n\n* We selecteren alle cirkels (ook al bestaan deze nog niet 🤷), \n* binden hier data aan, \n* vragen om de selectie met \\`.enter()\\`, \n* voegen de elementen daadwerkelijk toe met \\`.append()\\`, en\n* veranderen de cirkels met behulp van de data elementen en hun positie in de array\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n const width = 500;\n const height = 80;\n const graph = d3.select(DOM.svg(width, height));\n \n const circles = graph.selectAll(\"circle\")\n .data(dataset)\n .enter()\n .append(\"circle\"); // append circles\n \n circles.attr(\"cx\", (d, i) => (i * 60) + 25) // set the center x-coord based on position in dataset\n .attr(\"cy\", height / 2) // set the center y-coord based on height\n .attr(\"r\", d => d); // set the radius based on value\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`Omdat je nooit een kans moet laten liggen om de kleur 'hotpink' te gebruiken:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"{\n const width = 500;\n const height = 80;\n const graph = d3.select(DOM.svg(width, height));\n \n const circles = graph.selectAll(\"circle\")\n .data(dataset)\n .enter()\n .append(\"circle\");\n \n circles.attr(\"cx\", (d, i) => (i * 60) + 25)\n .attr(\"cy\", height / 2)\n .attr(\"r\", d => d)\n .attr(\"fill\", \"pink\") // now also set the fill, stroke, and stroke-width\n .attr(\"stroke\", \"hotpink\")\n .attr(\"stroke-width\", d => d/2);\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`## Bar chart v2\nWe gaan weer een bar chart bouwen, maar dan met SVG en een grotere dataset.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"{\n const width = 500;\n const height = 100;\n const graph = d3.select(DOM.svg(width, height));\n \n const data = getRandomDataset();\n \n graph.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\") // create a rectangle for each element and set some attributes\n .attr(\"x\", (d, i) => i * 21)\n .attr(\"y\", 0)\n .attr(\"width\", 20)\n .attr(\"height\", 100);\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`Dit is nog niet echt ideaal: als de SVG of de dataset verandert, ziet het er niet uit. We kunnen dit afvangen door de breedte afhankelijk te maken van de dataset lengte en SVG breedte.\n\nEn ja, later kan dit nog slimmer, door scales te gebruiken!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = getRandomDataset(5);\n const barPadding = 1; // use 1px padding between bars\n \n graph.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * (width / data.length)) // make width dependant on dataset length and svg width\n .attr(\"y\", 0)\n .attr(\"width\", width / data.length - barPadding) // incorporate the padding\n .attr(\"height\", 100);\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`Laten we de hoogte aanpassen aan de waarden in de data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = getRandomDataset();\n const barPadding = 1;\n \n graph.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * (width / data.length))\n .attr(\"y\", 0)\n .attr(\"width\", width / data.length - barPadding)\n .attr(\"height\", d => d * 4); // scale the bars according to value\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`SVG heeft een omgekeerde y-as, om je scherp te houden. Gelukkig kunnen we de berekening van de hoogte van de bars aftrekken van de hoogte van de hele SVG om dit af te vangen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = getRandomDataset();\n const barPadding = 1; \n \n graph.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * (width / data.length))\n .attr(\"y\", d => height - d * 4) // don't let the bars start from the top\n .attr(\"width\", width / data.length - barPadding)\n .attr(\"height\", d => d * 4);\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`Laten we ook nog wat kleur toevoegen, afhankelijk van de waarde van de data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = getRandomDataset();\n const barPadding = 1; \n \n graph.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * (width / data.length))\n .attr(\"y\", d => height - d * 4)\n .attr(\"width\", width / data.length - barPadding)\n .attr(\"height\", d => d * 4)\n .attr(\"fill\", d => d3.lab(40 + 2 * d, 100, -60)); // vary the l component in lab color space\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`## Label time\nTekst leg je als het ware over de bars heen:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`## Scales\nScales mappen een input domain naar een output range. Een scale is een functie die input omzet naar een waarde die nuttig is om elementen op de pagina aan te passen.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"scale = d3.scaleLinear()\n .domain([100, 500])\n .range([10, 350])","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`Nu kunnen we de computer het werk laten doen. Uiteindelijk altijd de bedoeling, lijkt mij.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"scale(300)","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"md `Laten we een scale maken voor de X-as, Y-as, en voor de kleuren die we willen gebruiken. Ik genereer eerst een tijdelijke dataset:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"datasetTempScales = getRandomDataset()","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"md `Het bereik van de dataset hierboven is ${d3.min(datasetTempScales)}, ${d3.max(datasetTempScales)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"{\n const width = 500;\n const height = 100;\n const data = datasetTempScales;\n\n const xScale = d3\n .scaleBand() // use an ordinal scale\n .domain(d3.range(data.length)) // generate array from 0 to length in steps of 1\n .rangeRound([0, width]) // output between 0 and width\n .paddingInner(0.05); // % of whitespace between bars\n\n const yScale = d3\n .scaleLinear() // basic linear scale for bar lengths\n .domain([0, d3.max(data)])\n .range([0, height]);\n\n const cScale = d3\n .scaleSequential() // use a sequential scale with interpolator for the colors\n .interpolator(d3.interpolateGreens)\n .domain([0, d3.max(data)]);\n\n return md`\n * \\`xScale(10)\\` mapt naar ${xScale(10)}. \n\n Positie 10 kan dus ${xScale(10)} pixels naar rechts.\n\n * \\`yScale(20)\\` mapt naar ${yScale(20)}. \n\n De waarde 20 kunnen we dus ${yScale(20)} pixels hoog maken.\n\n * \\`cScale(7)\\` (kleur) mapt naar ${cScale(\n 7\n )}, en \\`cScale(20)\\` mapt naar ${cScale(20)}. \n\n Waarde 7 is dus lichter dan waarde 20.`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"md `Nu kunnen we de barchart verbouwen met het correct gebruikt van scales. We voegen dus ook een colorscale toe, op basis van de waarden van de bars:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md `## Interactiviteit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"{\n const width = 500;\n const height = 20; \n const padding = {top: 15, left: 0, right: 0, bottom: 0}; // add some padding\n const graph = d3.select(DOM.svg(width, height));\n \n const data = getRandomDataset();\n \n graph.append(\"text\") // add a label to click on\n \t.attr(\"y\", padding.top)\n .text(`Klik mij!`)\n .style(\"cursor\", \"hand\")\n .on(\"click\", updateData);\n \n function updateData() {\n graph.select(\"text\")\n .text(`Verse data: ${getRandomDataset()}`)\n }\n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`\n* We kunnen nu de graph opnieuw tekenen in de \\`updateData()\\` functie. \n* We updaten ook de scales, zodat de grafiek ook hogere waardes dan de huidige max aankan. \n* En om het helemaal af te maken voegen we ook \\`.transition()\\`'s toe.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`\nEen kleine maar belangrijke update: we genereren nu steeds nieuwe data in de \\`updateData()\\` functie. We willen eigenlijk een bar uit de dataset halen, en er een nieuwe bijstoppen. Dit doen we door deze code toe te voegen bij de update functie:\n\n data.push(...getRandomDataset(1, 40));\n data.shift();\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"md`\nDit werkt, maar je moet wel goed kijken om te zien dat de data links verdwijnt en er rechts steeds wat bij komt. D3 'weet' nog steeds niet dat er nieuwe data bijkomt, het update slechts iedere bar met de nieuwe data. Om D3 de boel bij te kunnen laten houden, hebben we ook de index van de data nodig. Hiervoor maken we een nieuwe dataset generator, met identifiers:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"function getIndexedRandomDataset(start = 0, size = 25, range = 20) {\n const data = [];\n for (let i = 0; i < size; i++) {\n data.push([++start, 5 + Math.floor(Math.random() * range)]);\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"getIndexedRandomDataset()","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`We kunnen deze identifier nu als tweede parameter in onze \\`.data()\\` binding gebruiken. D3 houdt dan aan de hand van deze identifier bij wat er met de data elementen gebeurt.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"md`De overgebleven bars hopen nu links op: we moeten nog aangeven dat de bars verwijderd moeten worden met de \\`exit\\` set.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`## Een tikkie meer interactiviteit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"md`Laten we nog wat meer gemak én excitement aan deze chart toevoegen. We knippen de boel op in een \\`setup()\\` en \\`update()\\` functie, en voegen een \\`mouseover\\` en \\`mouseout\\` toe zodat we eindelijk weer eens de kleur \"hotpink\" toe kunnen voegen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`We kunnen de data ook sorteren in plaats van aanpassen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`En dit kan ook *allebei tegelijk*! De mogelijkheden van computers zijn eindeloos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`## Dit was het!\nIk hoop dat jullie het leuk vonden!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}