31:[] 2f:{"title":"D3 Tutorial Part 1 - Selections (Solution)","cells":[{"id":350,"value":"md`\n# D3 Tutorial Part 1 - Selections (Solution)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"\nmd`\nThis notebook is part of the tutorial series on D3 for the Data Visualization lecture at Aarhus University.\nIn this notebook, we will learn about one main functions of D3: _d3.select()_ and _d3.selectAll()_.\n\nThroughout this notebook, you will find some JavaScript code snippets which you can execute using Shift+Enter or by clicking the blue arrow on the top right of the cell. You can also modify the code to play around with the functions and parameters.\n\nLet's try this out in the next cell, where we import d3 into this notebook which will allow us to use the library in this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`\n## D3.select()\n\nD3.selection returns a reference to an element of the DOM, which you can then use to modify this element. Consider the following HTML document, containing an SVG element with a circle in it: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"exampleDocument = html`\n\n \n \n \n \n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`\nTo modify this circle, we could of course use JS standard selector functions such as document.querySelector or document.selectElementById. But since we want to use d3 features, we will use a call to [d3.select()](https://github.com/d3/d3-selection#select) here. The function takes a CSS-style selector and returns a reference to the first match for that selector from the DOM.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"circle = d3.select(\"#myCircle\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`\nWe can now use some of d3's functions to modify the circle. Edit the values of the _.attr()_ calls and execute the following cells by pressing Shift+Enter or by clicking the blue arrow on the right to see how the individual commands affect the circle:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"// circle.attr(\"r\", 200);","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"// circle.attr(\"fill\", \"blue\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"// circle.attr(\"cx\", 300);","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`\nThe _selection.attr()_ function can be called with two paramters: The SVG attribute we want to modify and the value that we want to assign to the elements in the selection. This is similar to the _element.setAttribute(attribute)_ function in pure JS.\n\nAlternatively, we can also call the _attr()_ function with one parameter to get the current value of the given attribute for all elements in the selection. This is similar to the _element.getAttribute(attribute)_ function in pure JS.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`\n## D3.selectAll()\n\nIn visualization, we often want to manipulate multiple similar objects in the same way. For this purpose, D3 provides us with the [d3.selectAll()](https://github.com/d3/d3-selection#selectAll) function. While d3.select() returns the first match for the selector from the DOM, _d3.selectAll()_ returns a reference to all matching elements. It can be called from the d3 object, in which case the full DOM will be parsed, or from any selection, in which case it will parse only the child elements of the individual elements in that selection.\n\nConsider the following HTML document containing four squares, two of which have an outline and two of which have a fill color:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"partTwoDocument = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`\nTo modify all squares using pure JavaScript, we could get an array containing all four squares and then apply a common style to all entries of that array using _Array.forEach()_ or a _for(entry in list)_ loop.\n\nUsing _d3.selectAll()_, we can can apply the same modification to all squares in a single line:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"// d3.selectAll(\"rect\").attr(\"fill\", \"green\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`\nAnother benefit of the _d3.selection.selectAll()_ function is that it returns a selection. This allows us to chain multiple _.attr()_ calls like so:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"/* \nd3.selectAll(\"rect\")\n .attr(\"fill\", \"steelblue\")\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"/* \nd3.selectAll(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"width\", 15)\n .attr(\"transform\", `translate(100, 0)rotate(45)`);\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`\n_Selection.selectAll()_ as well as function chaining are useful features that will significantly reduce the amount of code required to create visualizations in d3. We will make frequent use of both in later parts of the tutorial series to create and modify visual marks based on our input data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`\n## Attribute accessors\nThe \\`selection.attr()\\` can be called with either one or two parameters.\nIf called with one parameter, the function will return the current value of the given attribute that each element in the selection has:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"// d3.select(\"rect\").attr(\"fill\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`\nIf called with two parameters, we can modify the current value for the given attribute for each element in the selection:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"// d3.select(\"rect\").attr(\"fill\", \"red\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`\nThe second parameter of \\`selection.attr()\\` can have different types.\nIt can either be of type \\`number\\`, \\`string\\`, or \\`object\\` (which includes arrays in JS).\nIn that case, the second parameter gets assigned to every element in the selection.\n\nHowever, if the second parameter is of type \\`function\\`, this function gets evaluated for every element in the selection, which allows us to assign dynamic values, specific to each represented item of our data.\nThis function can have two parameters: \\`d\\`, the _data_ that is bound to an element, and \\`i\\`, the _index_ of the element in the selection.\nWe will go into details about binding data to elements in the second part of this tutorial series.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`\n## Exercise: Try it yourself\n\nNow it is time for you to try out the two functions yourself. Below, you find a document containing a few rectangles. Use the the concepts of this tutorial to modify these rectangles so that they fulfill the following list of criteria.\n\n* two rectangles have _steelblue_ fill color, while the rest are transparent with a black outline.\n* the blue rectangles are squares with a width of 50px, the transparent rectangles have a size (width x height) of 75x200\n* both types of rectangles are grouped and aligned in columns at \\`x=200\\` and \\`x=500\\` respectively.\n\nYou are free to use any JavaScript code you like, but make sure to use _d3.selection()_ and _selection.attr()_ to modify DOM elements. Try to solve the exercise without modifying the cell containing the SVG code. Make sure to use function chaining to reduce the lines of code of your solution.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"solution = {\n const canvas = d3.select(\"#exercise\"); \n // your solution goes here ...\n \n canvas.selectAll(\"rect.filled\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .attr(\"x\", 200)\n .attr(\"y\", (d, i) => i * 55);\n \n canvas.selectAll(\"rect.transparent\")\n .attr(\"fill\", \"transparent\")\n .attr(\"width\", 75)\n .attr(\"height\", 200)\n .attr(\"x\", 500)\n .attr(\"y\", (d, i) => i * 205);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`\n## Conclusion\n\nIn this first tutorial, you have learned the following concepts:\n* the _d3.select()_ function, which takes a CSS-style selector as parameter and returns a selection object of the first element in the DOM that matches this selector\n* the _selection.attr()_ and _selection.style()_ functions, which allow you to manipulate the attributes of any DOM element in a selection.\n* the _d3.selectAll()_ function, which takes a CSS-style selector and returns an Array-like selection object containing all elements in the DOM that match this selector\n* d3 function chaining, which allow you to execute calls that return the selection object they are called on (such as _.attr()_ and _.style()_) right after one another.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`\nIf you have any feedback about this notebook or about d3, feel free to contact us via email or come by our offices.\n\nFor the next part of this tutorial, click [here]().\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`\n## Appendix: Selection.transition()\n\nUsing _selection.attr()_, we can modify a DOM attribute for elements in a selection. The changes will \"instantly\" take place. \nHowever, to improve the look-and-feel of our visualization, we sometimes want to animate these changes. \nFor example, we may want to smoothly zoom in and out of a scatter plot or get smooth transitions between the heights of a bar chart when we brush the data in another view.\nD3 has a geniously simple way of letting us define smooth animations of our data: the _selection.transition()_ function.\n\nIt can be called on a selection and returns a _transition_ object, which has a similar interface to the familiar _selection_ objects, in that we can define changes using modifiers like _.attr()_ and _.style()_. However, these changes are executed over time, rather than instantly. \n\nConsider the following rectangle in an SVG element:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`\nUsing _d3.transition()_, we can now change the position of this rectangle to (50, 700) over a period of 2 seconds while changing it's fill color from blue to orange and increasing it's width to 100:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"/*\nd3.select(\"#animateMe\").transition()\n .duration(2000) // 2000 milliseconds => 2 seconds\n .attr(\"x\", 700)\n .attr(\"y\", 50)\n .attr(\"width\", 100)\n .attr(\"fill\", \"firebrick\");\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`\nWe can do a lot more with transitions, like specifying a ease-function from linear to exponential or define special code to be executed at every step of the animation. See [https://github.com/d3/d3-transition](https://github.com/d3/d3-transition) for more.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}