31:T5dc,/* { // zoom modifies the scales by applying a transformation to it // this transform is however cumulative, so we need to maintain a copy // of the original scales to not overemphasize interactions // try replacing the scaleXCopy inside the zoom event listener to see // how that influences the behavior of the zoom const scaleXCopy = scaleX.copy(); const scaleYCopy = scaleY.copy(); // generator function for zoom const zoom = d3.zoom() .on("zoom", () => { // applying the zoom transformation to the vertical and horizontal // scales const rescaledX = d3.event.transform.rescaleX(scaleXCopy); const rescaledY = d3.event.transform.rescaleY(scaleYCopy); // updating the point mark marks.selectAll("circle.point") .attr("cx", d => rescaledX(d.Horsepower)) .attr("cy", d => rescaledY(d.Miles_per_Gallon)); // reconfiguring the axis generators axisX.scale(rescaledX); axisY.scale(rescaledY); // redrawing the axes d3.select("g.axis.x").call(axisX) d3.select("g.axis.y").call(axisY); }); // calling the zoom generator on a rectangle selection. All zoom events on // this rectangle receives all zoom events and is not influenced by the // transformation, thus it always stays in place. canvas.append("rect") .attr("id", "zoomHelper") .attr("fill", "transparent") .attr("width", width) .attr("height", height) .call(zoom); } */32:[] 2f:{"title":"D3 Tutorial Part 3 - Let's make a Scatter Plot (Solution)","cells":[{"id":215,"value":"md`\n# D3 Tutorial Part 3 - Let's make a Scatter Plot (Solution)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`\nThis notebook is part of the tutorial series on D3 for the Data Visualization lecture at Aarhus University. In this notebook, we will build on the concepts from part 1 and 2, finally putting them into practise by building a zoomable scatter plot.\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":8,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\n\n## Making a Scatter Plot\n\nIn this part of the tutorial, we will put all the concepts we have learned so far into practise.\nWe will create a simple scatter plot representation of the [cars dataset](https://archive.ics.uci.edu/ml/datasets/Car+Evaluation), which have used in the previous parts.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"carData = {\n yield fetch(\"https://vega.github.io/editor/data/cars.json\")\n .then(result => result.json());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`\nBelow, we construct the canvas into which we will draw our visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`\nWe begin by setting general paramters for our scatter plot - width, height and the margin between the canvas borders and the chart - which we will reference later on.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 750","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"margin = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`\nNext, we create selections for the elements in the DOM, into which we will later draw the chart. \n\\`canvas\\` is a selection of the SVG element, i.e. the root of our chart.\n\nIt is good practise in D3 to set the width and height of the SVG node programatically rather than in the DOM, as we can then build the rest of our chart in relation to these properties.\nThis allows us to design \"responsive\" charts, which are sized relative to the size of the browser window.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"canvas = d3.select(\"#canvas\")\n .attr(\"width\", width)\n .attr(\"height\", height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`\nThe \\`marks\\` is a selection of the \\`\\` element, into which we will draw our visual marks representing our data. \nBy grouping all marks in a common parent node, we can later apply global transformations to all marks at once. \nIt also helps keeping the DOM clean, which is good practise as well, since it allows us to spot mistakes better.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"marks = canvas.select(\".vis .marks\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`\n### Scales\n\nNext, we set up the scales that define the mapping function from the data to the view space. \nFor our simple scatter plot, we need two scales for positioning marks along the vertical and horizontal axis.\n\nNotice that we implicitly define an encoding between the width of our canvas and the _Horsepower_ dimension of our data for the x axis and another encoding between the height of our canvas and the _Miles per Gallon_ dimension.\n\nIf you want to know more about scales in d3, go back to part 2 of this tutorial or have a look at the API documentation [here](https://github.com/d3/d3-scale#continuous-scales).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"scaleX = d3.scaleLinear()\n .domain([0, d3.max(carData.map(d => d[xEncoding]))])\n .range([0, width - 2*margin]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"scaleY = d3.scaleLinear()\n .domain([0, d3.max(carData.map(d => d[yEncoding]))])\n .range([height - 2*margin, 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\nHave another look at the _range_ definition of the two scales again. \nNotice that horizontally, we define a mappping from 0 to width (i.e. minimum to maximum value), while vertically, we define a mapping from height to 0 (i.e. maximum to minimum value).\n\nIn the vertical axis, we map values on a \"high to low value\"-scale, because in SVG y positions increase towards the bottom of the document.\nSince we are used to reading plots with a vertical axis increasing towards the top, we have to adapt the vertical mapping function, i.e. flip the range of our \\`scaleY\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`\n### Axes\n\nIn d3, scales are function that map between values from a domain to a range.\nThey have no implicit visual representation.\nIn our scatter plot however, we want visual guides to help us read the depicted values.\nTherefore, we need to define axes that represent the scales.\n\nD3 conveniently provides us with preset axis generator functions.\nThe only parameter that these functions take is a reference to the scale that they represent.\nWe are using the \\`axisBottom\\` and \\`axisLeft\\` factory functions here. \nThe -bottom and -left suffices indicate the position of the tick marks along the axis.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"axisX = d3.axisBottom(scaleX);","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"axisY = d3.axisLeft(scaleY);","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`\nWe can now call the axis generator functions on the DOM elements that we have created in the SVG element above.\n\nAs all DOM elements that are not assigned a position, the x-axis originates at the top-left of the screen. \nTo represent the data in a Cartesian coordinate system, we manually position the x axis at the bottom of the canvas using the \\`transform\\` attribute of SVG.\n\nExecute the following cell and see how it adds the axes to the chart at the bottom of the screen.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"\n{\n d3.select(\"g.axis.x\")\n .call(axisX)\n .attr(\"transform\", `translate(0, ${height - margin - margin})`);\n \n d3.select(\"g.axis.y\").call(axisY);\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`\n### Visual Marks\n\nWith all this configuration out of the way, we can now create the visual marks that represent the cars dataset.\nThis is where the data join comes into play (see [part 2 of the tutorial series]()), which here consists of three parts: \\`selectAll(\"circle.point\")\\`, which defines the selection in the DOM, \\`data(carData)\\`, which defines what data to bind to that selection and \\`join(\"circle\")\\`, which defines the encoding between data and the selection.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"\npointMark = { \n d3.select(\".vis\").attr(\"transform\", `translate(${margin}, ${margin})`);\n \n yield marks.selectAll(\"circle.point\").data(carData)\n .join(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"fill-opacity\", 0.73)\n .attr(\"r\", 5)\n .attr(\"cx\", d => scaleX(d[xEncoding]))\n .attr(\"cy\", d => scaleY(d[yEncoding])); \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`\nFollowing the \\`join()\\` call, we specify the encoding of our circle mark.\nIt is good practise to add a class to the selection to be able to identify the elements in the DOM inspector for debuggin.\nOf course, it also makes it easier to specify the visual marks in the \\`selectAll()\\` selection.\n\nVisual attributes such as the fill color, fill opacity, and radius we keep static for now. \nWe could of course also define mappings to the data here.\n\nThe positioning attributes \\`cx\\` and \\`cy\\`, on the other hand are data-dependent. \nTherefore, we use an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) that returns the _Horsepower_ and _Miles per Gallon_ entries of each element of our data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`\n## Exercise 1: Modifying visual encodings\n\nIn this exercise you will practise the data join for yourself by modifying the encoding of one of the axes.\n\n### A) Change a static encoding\nAs a first step, change one existing encoding to use another field from the data.\nYou can for example change the mapping for the horizontal position of circles from _Horsepower_ to _Displacement_.\nGo through the tutorial again and see, where the encoding comes up in the d3 code and change it to the new dimension.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"{\n const maxDomainHorizontal = d3.max(carData.map(d => d[xEncoding]));\n \n scaleX.domain([0, maxDomainHorizontal]);\n \n marks.selectAll(\"circle.point\")\n .attr(\"cx\", d => scaleX(d.Displacement));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"\nmd`\n### B) Make encodings variable dependent\nA useful practise in D3 is to not hardcode encodings into the visualization, but to instead utilize them through a variable.\nMake the position encoding of the scatter plot depend on the following two notebook variables (you can of course add more variables if you want to make other visual channels dynamic as well):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"xEncoding = \"Horsepower\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"yEncoding = \"Miles_per_Gallon\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`\n## Exercise 2: Adding a visual encoding\n\nIn this exercise, you are asked to add another visual encoding to the scatter plot. \nYou have full freedom here of which dimension you want to encode into which visual variable. \nMake sure, however, that the visual channel fits the type of data you want to visualize (see the slides from lecture 4 for more). Some example encodings are:\n\n* Encoding the Displacement per model in the radius of the circle\n* Encoding the country of origin in a nominal color scale\n* Encoding the number of cylinders in an ordinal color scale\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`\n### A) Add a visual encoding variable\nSimilar to exercise 1.B, let's first define an encoding variable for the field of the data you want to represent. \nIf you have already defined the encoding in the previous task, you do not need to do this step.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"// your code goes here:\nmyEncoding = \"Origin\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`\n### B) Add the scale\nAs a first step, add a scale that defines the mapping between your domain (i.e. the field of the data) and a range (i.e. the visual properties of the variable you want to use).\nNotice that d3 offers a scale type for every type of data you have (have a look at the [documentation](https://github.com/d3/d3-scale)).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"// your code goes here: \n// (make sure the scale is a notebook variable like the other scales above)\ncolorScale = d3.scaleOrdinal(d3.schemeCategory10).domain([\"USA\", \"Japan\", \"Europe\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`\n### C) Add the mapping function to the data join\nNext, you can define the accessor function that defines the mapping to the data. \nYou do not have to edit the data join above, simply reuse the selection variable below.\n\nOnce you have executed the cell below, the scatter plot at the top of the page should already show the encoding.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"// your code goes here: \npointMark.attr(\"fill\", d => colorScale(d[myEncoding]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`\n## Further Reading\n* [An in-depth guide to d3's data join by Mike Bostock](https://observablehq.com/@d3/selection-join?collection=@d3/d3-selection)\n* [Thinking in Data Joins by Mike Bostock](https://bost.ocks.org/mike/join/) (good read, but be aware that some API calls are deprecated by now and might not even work anymore)\n* [d3 selection API reference on GitHub](https://github.com/d3/d3-selection)\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`\n## Appendix: Zoom and Pan\n\nD3 also provides an API for standard visualization interactions, such as zoom and pan.\nThey usually come in the form of generator functions, which you parametrize and then call from a selection.\nUnderstanding these features is beyond the scope of this tutorial. \n\nOf course, if you are interested, have a look at the code below and try to follow what's happening there.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"/*\n{\n const tooltip = d3.select(\".vis .tooltip\");\n let res = null;\n pointMark.on(\"mouseenter\", d => {\n res = d;\n console.log(d);\n })\n yield res;\n}\n*/","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}