D3 Page Template

30: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(); }31:[] 2e:{"title":"Data Visualization - D3.js part 1","cells":[{"id":0,"value":"md`# Data Visualization - D3.js part 1\n\nThis notebook is part of the Data Visualization course at Ghent University.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`### Getting started\nTo get started with d3.js, you only need a few things:\n- A text editor ([Visual Studio Code](https://code.visualstudio.com/) is great)\n- The D3.js source files to include: [https://d3js.org/d3.v5.js](https://d3js.org/d3.v5.js)\n- A modern browser with devTools enabled\n- A local webserver to be able to load data files from localhost\n - \\`python -m SimpleHTTPServer\\`\n - \\`python -m SimpleHTTPServer\\`\n- The D3.js documentation: [https://github.com/d3/d3/blob/master/API.md](https://github.com/d3/d3/blob/master/API.md)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`### Data\nTo visualise data, we of course need to have access to that data in our JavaScript code. With D3, that data is almost always represented as an array of values or objects. Data can be easily loaded from a file using [built-in utility methods](https://github.com/d3/d3-fetch) which support many data formats such as json, csv, tsv, and xml.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`### Minimal example\nNext, you'll have to create an html file with some minimal markup:\n\\`\\`\\`html\n\n\n \n \n D3 Page Template\n \n \n \n \n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`Similar to jQuery, d3 can be used to modify the DOM of the page, for example this code will a new paragraph to the body of the page:\n\\`\\`\\`html\n\n\n \n \n D3 Page Template\n \n \n \n \n \n\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`That single line of JavaScript breaks down as follows:\n\\`\\`\\`javascript\nd3 // the global d3 object\n .select(\"body\") // select the body of the page\n .append(\"p\") // append a p-tag to the body \n .text(\"New paragraph!\"); // set the text of the p-tag\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`### Observable notebooks\nInstead of creating separate html files for this tutorial, we'll use interactive Observable notebooks. This means that the boilerplate code will look slightly different.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`In this notebook, D3.js v5 is available as a variable with the name \\`d3\\`. Instead of appending elements to the body of the document, as we would normally do on a web page, we will create a new element and return that. Observable will then visualize that element.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`\nFor example, the previous example where we created an element and added that to the page looked like this:\n\\`\\`\\`html\n\n\n \n \n D3 Page Template\n \n \n \n \n \n\n\\`\\`\\`\nIn the context of this notebook, this can be simplified to:\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(\"New paragraph!\"); // Add to new element instead of body\n \n return graph.node(); // return the node to display the result above the code\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`This is still the same JavaScript code, but without the HTML wrapper and with a slight change on how to add the visualisation to the page. It allows us to focus on the important bits, and to instantly see the result of the code. For developing a big custom visualisation, you are probaly better off using a real text editor.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`All of the code examples in this notebook are live. You can edit the code and press shift+enter at any time to see the result of your changes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Binding data\nBinding data to DOM elements can be done with D3's \\`data\\` method. For this, we first select a number of DOM elements using \\`d3.selectAll\\` and then bind the dataset by calling \\`data(dataset)\\` on the selection.\n\nThe interesting part is that the selected elements don't have to exist (yet) to be able to bind data to them. D3 will create internal placeholders for those elements, and make them available using the \\`enter()\\` method.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"dataset = [5, 10, 15, 20, 25]","pinned":false,"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, there are none yet\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(\"New paragraph!\"); // set the text of each paragraph\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`We have now created a new paragraph for each element in the array, but haven't really done anything with the data itself. Instead of simple values, many of the d3 functions accept functions as arguments. D3 will then execute those functions when it needs the corresponding value and pass the current data object as the first parameter.\n\nWe can now adapt the previous example to use make use of the values as text instead of a fixed string:`","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 => d); // 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 can also apply some css to the paragraphs using the \\`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`Instead of simply passing the color as a string, we can also use the output of a function and use the value of our data:`","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`## Drawing with data\nNow that we create DOM nodes based on our data, we are ready to draw with them. For this first real graph, we'll create a simple bar chart using \\`div\\` elements. First, let's add some default styling to our bars:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`Now, we create a div for each element in the 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`Next, instead of the default height, we'll set a value per bar and use the data value as height:`","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`If we now would use random data instead of our fixed array, the same code would keep working:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"function getRandomDataset(size = 25) {\n const data = [];\n for (let i = 0; i < size; i++) {\n data.push(5 + Math.floor(Math.random() * 20));\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`If you click the play button on the top-right of the code below, the random data gets regenerated. You can also press shift+enter when your cursor is in the code below.`","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":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## SVG time\nNow that we managed to draw a basic bar chart using divs, let's change strategies and try using SVG to draw something. To do this, we need a bit of additional skeleton code to create an SVG element with a given width and height:\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`Next, we'll use our original dataset to draw some circles. In the next example, we will see that when d3 calls a function to retrieve a parameter value, it will not only pass the value of the corresponding data object (the convention is to use \\`d\\` for this parameter), but it will also pass its position in the dataset as a second parameter (often called \\`i\\`).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n const width = 500;\n const height = 50;\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 * 50) + 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`Now we add some colors by setting more attributes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"{\n const width = 500;\n const height = 50;\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 * 50) + 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\nNow that we know how to use SVG, let's revisit our bar chart and recreate it using SVG with a slightly bigger 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`This more or less works, but is very dependant on the size of the svg and dataset. We can improve on this by adding a few more variables and scale everything according to the width of the svg element.`","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`We are now ready to make the height of the bars dependant on values.`","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`Since we want our bar charts starting from the bottom, we have to account for the inverted y-axis in the svg coordinate system:`","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`As you can see, we still have some problems with high values being clipped and some duplicate code fragments, which is not *Coolsaet-approved*. We will fix this later by the use of scales. First, let's add some color to the graph and let it depend on the data values.`","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`## Stop! Label time\nLet's add some labels to our bars to make reading the exact values possible. For this, we can use \\`text\\` elements that are positioned correctly.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"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));\n \n graph.selectAll(\"text\")\n .data(data)\n .enter()\n .append(\"text\") // add a label for each data point\n .text(d => d) // set its value as text\n .attr(\"x\", (d, i) => i * (width / data.length) + 5) // position it similar as bars\n .attr(\"y\", d => height - d * 4 + 15)\n .attr(\"font-family\", \"sans-serif\") // add some style\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"white\");\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`This already looks ok-ish, but the labels aren't centered within the bars. We can fix this by setting the text anchor and a little more math.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`## Making a Scatterplot\nTo take things one step further, let's create a scatter plot using 2 dimensions and more complex data. In this dataset, the datapoints aren't simple values, but 2-valued arrays.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"scatterData = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`Next, we throw this data into a simple chart with one dot per data point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = scatterData;\n \n graph.selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\") // use circles instead of rects\n .attr(\"cx\", d => d[0]) // use value in first array position as x coordinate\n .attr(\"cy\", d => d[1]) // use value in second array position as y coordinate\n .attr(\"r\", 5);\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`Next, we use the y-value to also scale the circle size. As we've seen in previous lessons, we wish to scale the circle area and not the radius.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = scatterData;\n \n graph.selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", d => Math.sqrt(height - d[1])); // scale the area according to the y-value\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`Finally, we add labels to the individual data points. For now, we won't worry about the readability and contrast.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"{\n const width = 500;\n const height = 100; \n const graph = d3.select(DOM.svg(width, height));\n \n const data = scatterData;\n \n graph.selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", d => Math.sqrt(height - d[1]));\n \n graph.selectAll(\"text\") // add labels\n .data(data)\n .enter()\n .append(\"text\")\n .text(d => d[0] + \",\" + d[1])\n .attr(\"x\", d => d[0])\n .attr(\"y\", d => d[1])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"hotpink\");\n \n return graph.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`While this graph gives a rough view at our data, it is not a great visualisation. There are multiple issues with it: hard to read, clipped values, duplicate code, no axes, ... We will try to fix those issues in the next part.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`The line below imports the d3 object and makes it available in this work sheet. You can safely ignore it.`","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":"$W31","stdlib":"1","titling":"auto"}