`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) elements to our circles. These allow us to add "title" data to any SVG element, which we can view when the mouse hovers over it for a short period (i.e., a tooltip). The way we get these will feel a little strange. We are going to add an `append("title")` on to the end of the selection that contains your circles. To make this a little clearer, find in your graph where it says `svg.selectAll("circle")` and add `const circles` to the front of it. This creates a new `circles` variable that holds the selection. below the code that configures your circles, add ```javascript circles.append("title") .text(d => d.country); ``` This appends a title on to each on the circles. We then use the `text` function to set the text of the title. 37:T4a4,One of the things you will notice when you are playing with the tooltips is that some small countries are completely behind larger ones, and the tooltip doesn't work. To solve this, we can sort the data by population so that the smaller countries end up on top of the larger ones. Here is the complication -- sorting is an in-place operation in JavaScript, and because of the non-linear execution model of Observable cells, if we sort the data it changes it for every other cell. _However_ it won't be detected as a change, so it won't seem like you made a change until you make some small tweak to one of the other graphs, and it picks up on the change to the data (the most notable difference will be your colors change). We _could_ just change the sort in the beginning and have done with it, but a better solution is to clone the array and sort that. We can do that with a one liner: `[...countryData].sort((a,b) => b.pop - a.pop)`. The first part copies the array using the _spread_ operator, and then the second sorts the array with a specialized comparator function. Change the `.data(countryData)` in your code above to sort the data using this technique before it is bound.38:[] 31:{"id":"e19a2271fb1fd8cb","slug":"cs-465-tutorial-4-on-to-d3","title":"CS 465 Tutorial 4 - On to D3","thumbnail":"afdf4e4bb464c9d229b17012c15141dcd517f9a3ba1311bda9508e98bdfd12f2","access_level":"public","create_time":"$D2021-10-21T04:54:34.564Z","update_time":"$D2021-10-21T04:56:33.097Z","view_time":null,"first_public_time":"$D2021-10-21T04:57:07.552Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":"starter_2024"},"version":472,"publish_version":472,"role":null,"authored":false,"authors":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null}],"members":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":24,"collection":{"id":"ef285280251c7f66","slug":"cs-465-f21-tutorials","title":"CS 465 f21 Tutorials","owner":{"id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews"}},"type":"notebook","body":{"title":"CS 465 Tutorial 4 - On to D3","cells":[{"id":0,"value":"# CS 465 Tutorial 4 - On to D3\n\n#### Objectives\n- Get some hands-on practice creating a familiar visualization in D3\n- Learn about scales\n- Learn about joins and selections\n- Become more mindful of visualization structure\n- Learn how to add tooltips in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Getting Started\n\nWe will follow the same pattern as before. \n\n- Fork the page\n- Share it with me\n- Submit it on Canvas when you are done\n\n _You will find that I have frequent instructions to copy the graph as we add to it. This is partly to keep your work close to the instructions, but mostly it is so you have a record of the process and what it looks like as we progress through it. So please do copy your work forward down the page rather than updating a single instance. Obviously, this is not a style of work that we will stick with._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Overview\n\nFor this tutorial, you are going to build a basic bubble plot, just as we did in Vega-Lite.\n\nSpecifically, we will be building a version of the bubble plot we looked at when we introduced bubble plots (I've pre-filtered the data to make our lives a little easier).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"vl.markCircle()\n.data(countryData)\n.encode(\n vl.x().fieldQ(\"life_expect\").scale({domain:[40,85]}),\n vl.y().fieldQ(\"fertility\"),\n vl.size().fieldQ(\"pop\").scale({range:[10,1000], domain:[0, 1303182268]}),\n vl.color().fieldN(\"cluster\"),\n vl.tooltip(\"country\")\n )\n .width(700)\n .height(500)\n.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"### Create the SVG\n\nThe first step will be to create the SVG region that you will be using to draw your graph.\n\nJust as we did in the bar chart example, set up variables for `width`, `height`, and `margin`. Your `margin` should be an object with `left`, `right`, `top` and `bottom` attributes. You can set these all to 0 initially.\n\nYou can then create the SVG with the [`d3.create()`](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#create) function. It should look like this:\n\n```javascript\n const svg = d3.create(\"svg\")\n .attr(\"viewbox\", [0, 0, width, height])\n .style(\"height\", `\\${height}px`)\n .style(\"width\", `\\${width}px`)\n```\n\nThen, return `svg.node()` to load the SVG onto the page.\n\nThis creates a big white rectangle, so... it won't look like much. Add another `style` to the svg that sets the \"border\" to \"1px lightgray solid\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n // create SVG here\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"{\n // your graph with the circles in place\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## Scales\n\nThe next step will be to create some **scales**. \n\nWe are just going to focus on the position scales right now. What type of data do we have in `life_expect` and `fertility`?\n\nHopefully, your answer to both was \"quantitative\". So, for these two, our best bet is a linear scale, which we can construct with [d3.scaleLinear()](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleLinear).\n\nAs a reminder, the scale will set up a mapping from from the input **domain** (values in our data) to the output **range** (values we use to display). \n\nThe structure looks like:\n\n```javascript\nconst x = d3.scaleLinear()\n .domain([domainStart, domainEnd])\n .range([rangeStart, rangeEnd]);\n```\n\nLet's start by thinking about the output range. You want to have this picture in your head of the graph, with the \"Content\" region being where the visualization itself will live, and the axes and other annotations hanging out in the outer margin area.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"{\n const width = 400;\n const height = 200;\n const margin = {left:30, right:30, top:30, bottom:30};\n \n return html`<svg viewbox=\"0 0 ${width} ${height}\" style=\"width:${width}px; height:${height}px; background:#dee\">\n <rect x=${margin.left} y=${margin.top} width=${width - margin.left - margin.right} height=${height - margin.top - margin.bottom} style=\"fill:#aaf\"/>\n <text text-anchor=\"middle\" transform=\"translate(${width/2}, ${height/2})\">Content</text>\n<text text-anchor=\"middle\" transform=\"translate(10,10)\" style=\"font-size:10px\n\">(0,0)</text>\n <text text-anchor=\"middle\" transform=\"translate(${width/2}, ${margin.top - 5})\">Top</text>\n <text text-anchor=\"middle\" transform=\"translate(${width/2}, ${height - 5})\">Bottom</text>\n <text text-anchor=\"middle\" transform=\"translate(${margin.left - 5}, ${height/2}) rotate(-90)\">Left</text>\n <text text-anchor=\"middle\" transform=\"translate(${width - margin.right + 5}, ${height/2}) rotate(90)\">Right</text>\n\n</svg>`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"So, the start of the output range for the X encoding will be at the left margin, and the end will be at the width minus the right margin (you can apply the same logic for the Y encoding).\n\nWhat about the input domain?\n\nLet's focus on the X encoding. If you look at the Vega-Lite graph, you can see that I set the domain to be [40,85]. You could just use this. \n\n_However_ I want you to try out a D3 utility function: [d3.extent()](https://github.com/d3/d3-array/blob/v3.1.1/README.md#extent). This takes in an array and returns a two element list with the maximum and minimum values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"d3.extent([5,3,8,2,89,34,42])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"The function also takes in an optional _accessor_ function which helps it to extract the right value if we have an array of objects. In the following example, we have a list of objects that have `a` and `b` properties. If we want to find the extent of the `b` property, we need to provide an accessor function that tells the function how to extract the correct value. So, we can use `d=>d.b`.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"d3.extent([{a:3, b:6}, {a:1, b:42}, {a:7, b:7}, {a:34, b: 21}], (d)=>d.b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"### Add an X scale\n\nCopy and paste your graph so far down below. \n\nUse these ideas to create a new linear scale for the X axis. Declare it before you create the SVG and call it `x`.\n\nOnce you have your new scale function, use it when you set the `cx` attribute by changing the value function to `d => x(d.life_expect)`. The circles should now stretch out across the SVG.\n\n_Don't worry about the circles that are slightly cut off by the edge of the graph. This is because our `extent` function really goes right to the min and max values. Things will get better when we add margins._\n\n### Add a Y scale\n\nRepeat the same process for the y scale, changing `cy` from being fixed at `height/2` to being determined by 'fertility'. This time, however, I would like you to start the scale at 0 (our lowest value is essentially there. So, instead of using `d3.extent`, use `d3.max`, which works exactly the same way but only returns the maximum value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"{\n // your graph with the circles in the correct place\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"### Fix the Y scale\n\nI suspect that the majority of you will now have a graph that shows a positive relationship between fertility and life expectancy (increased fertility correlates with increased life expectancy). If you refer back to the original Vega-Lite graph, this is wrong. There is a _negative_ correlation.\n\nWhat went wrong? The problem is that we think of the origin of our graph as being in the lower left hand corner,with y increasing upwards. But in computer graphics, (0,0) is in the _upper_ left hand corner and `y` increases _down_. \n\nThere are a variety of ways we can fix this, but the easiest thing to do is to reverse the range array in the Y scale. Go ahead and fix the graph above (if you got it right the first time and didn't see the graph upside down, try swapping the values and then put it back again).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"## Adding Axes\n\nThe next thing we will do is add the axis labels. \n\nYou can basically copy what we did in class:\n\n```javascript\n const xAxis = svg.append(\"g\")\n .attr(\"transform\", `translate(0, \\${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n const yAxis = svg.append(\"g\")\n .attr(\"transform\", `translate(\\${margin.left}, 0)`)\n .call(d3.axisLeft(y));\n\n```\n\nThis adds a new `g` to the SVG and then calls one of the four axis generators on the component (`axisLeft`, `axisRight`, 'axisTop', and `axisBottom`).\n\nYou will need to tweak the margins to give yourself room for the axis. While you are at it, open up the margins on the top and right a little bit so the dots aren't cropped any more.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"{\n // your graph with axis labels here\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"## Add label titles\n\nWe should label our axes. \n\nIn class I showed you that we can just create a new `text` element and move it where we want it. \n\nHere are the two examples from class for the X and Y axes:\n\n```\nsvg.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"transform\", `translate(\\${(width-margin.right + margin.left)/2}, \\${height-5})`)\n .style(\"font-weight\", \"bold\")\n .style(\"font-size\",\"10px\")\n .text(\"Data\");\n\nsvg.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"transform\", `translate(\\${margin.left - 20},\\${height/2}) rotate(-90)`)\n .style(\"font-weight\", \"bold\")\n .style(\"font-size\",\"10px\")\n .text(\"Index\");\n```\n\nDuplicate this for your plot, with \"Life Expectancy\" and \"Fertility Rate\" for the labels.\n\nDon't just take the numbers here as read -- move the labels around until they look right. You will also probably want to tweak the margins again.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"{\n// your plot with axis labels\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"{\n // your graph with colored dots\n \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n // your graph with sized, colored dots\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"You will have some significant overplotting when we grow the circles. To combat that, we can make the circles slightly translucent. Add another `.style()` and set \"opacity\" to 0.6 (60%).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"{\n // your graph with sized, colored dots and tooltips\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"## Closing thoughts\n\nWe will end here. Hopefully this gives you the ammunition to make other simple D3 graphs. It should also give you more of an appreciation for Vega-Lite...\n\nThe other thing I hope you see is how much of this is boilerplate that you can make use of in other graphs -- so it is not as bad as it first seems. Soon we will start using some of the more interesting capabilities and you will see some of the advantages of getting lower level.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"vegaData = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"countryData = {\n const data = await vegaData[\"gapminder.json\"]()\n return data.filter(d=>d.year===2005)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>

2d:null 2e:["$","title",null,{"children":"CS 465 Tutorial 4 - On to D3 | Christopher Andrews | Observable"}] 33:Tc97,## Making circles (Joins) Now that we have the foundation for our visualization, we need to create the dots. Copy your SVG creation code above into the block below for the next step. We will create the dots with SVG's [``](https://www.w3schools.com/graphics/svg_circle.asp). The circle has three important attributes: `cx` (x position of the center of the circle), `cy`(y position of the center of the circle), `r` (the circle's radius). As we saw when we built the bar chart, there is no way to just make a bunch of circles, instead we can going to follow the D3 select-join pattern. First, we select all of the circles in the graph with `svg.selectAll("circle")`. This is a conceptual selection as there are not currently any circles, but the return value of this is the _selection_ itself (which may or may not have any members). Next, we join the selection with the data by calling `data(countryData)` on the selection. Internally, this matches the data elements to the circles in the selection, creating three sets of things: the **enter** set (data elements not matched to items in the selection), the **update** set (data and selection element pairs), and the **exit** set (items in the selection that weren't matched to a data element). As we didn't have anything in the selection, all we have is the **enter** set -- we will talk more about the other two sets later. We next call `join('circle')` on the result of the join. This will create a new circle for every element in the **enter** set. Don't worry if you don't follow that all yet. You can just follow the general pattern: ```javascript container.selectAll(element) .data(data-set) .join(element) ``` The return value of all of those chained methods is the collection of new shapes (in our case circles) bound to data elements. We can then set their attributes and styles using `attr` and `style`. ### Setting attributes Now we want to set the three attributes of the circles. Recall that the `attr()` function takes two arguments, the first is the attribute to change (as a string) and the second is either a value (which will set the attribute for all items in the selection to the same value), or a function that is passed the data bound to the element. For right now, we will fix `cy` and `r` to constant values. Set `cy` to `height/2` and `r` to 5. We will make the x position data dependent. Set `cx` to `d => d.life_expect`. *Reminder if you are still picking up some of the details of JavaScript: This is a function that takes in a data object and returns that object's `life_expect` property. We could write it more traditionally as:* ```javascript function f(dataObj){ return dataObj.life_expect } ``` *You might also ask, "Why `d`?". That `d` is just the function argument -- it could be anything you like. `dataObj => dataObj.life_expect` would work just as well. It mostly comes down to the fact that many of us are lazy typists and the `d` has become fairly standard throughout the documentation for D3.* Since we held y fixed and the life expectancies range from about 44 to 84, this will create a little black caterpillar looking shape on the left side of our graph as all of the circles clump together. 34:T6b5,## Add a color encoding In the original graph, we colored the bubbles by `cluster`, we can do the same here. Copy your graph once again. If you haven't removed the background color yet, this would be a fine time to do it. Again, our tool of choice will be a d3 scale. The `cluster` variable, however, is not a quantitative scale, so we want something that will give us a nominal mapping. We also don't want to use the banded scale we used to make the bar chart, as that doesn't make much sense for colors. We are going to use [`d3.scaleOrdinal`](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleOrdinal). Technically our data is nominal, not ordinal, but d3 got rid of their nominal/categorical scale. The truth is that both are nominal and ordinal scales are scales with discrete domains and ranges. The difference really comes down to the choice of range. If we pick a range that doesn't imply an ordering, we have a nominal encoding, despite the name. So, near your other scales, create a new one called `color` using `d3.scaleOrdinal`. For the domain, we want to provide a list of discrete values rather than a min and max. The easiest way to do this is to use `map` (i.e., `countryData.map(d => d.cluster)`). For the range, we want a list of discrete colors. We could just make some up, but d3 comes with a collection of [pre-built color schemes](https://github.com/d3/d3/blob/main/API.md#color-schemes-d3-scale-chromatic). We want one of the categorical schemes. For simplicity sake, we can just use `d3.schemeCategory10`. To color our circles, we need to add a `style()`, and set the "fill" to the color we want. To use our new scale, we would write `.style("fill", d => color(d.cluster))`.35:T4fa,## Add a size encoding Now that we have color, it is time to add our final variable: `pop` encoded by bubble size. This will largely follow the pattern we have already established. Create a scale for the variable and then use the scale to set the attribute. We want to encode the population as size, but the only control over the size that we have is `r`, the radius of the circle. This is what I was talking about when we first introduced this bubble plot. If we are talking about "size" then we really mean "area". The area of a circle changes with the _square_ of the radius (${tex`area = \pi r^{2}`}). So, the scale we are going to use is `d3.scaleSqrt`. This scale is otherwise a continuous quantitative scale, so we can set up the domain and range the same way we created the positional scales, using min and max values for the domain and range. For the domain, follow the pattern we used for the Y axis and use 0 to the maximum value (since this is a Sqrt scale, we don't want to have to figure out what appropriate sizes are for both ends of the scale if we use `extent`). The range can extend from 0 to `width/20`. This gives us some reasonable size circles. Once you have you scale, change the `r` attribute to use your new scale on the `pop` variable. 36:T485,## Tooltips There are a number of different approaches to creating tooltips in D3. We are going to make use of a quick and dirty approach that won't necessarily work in all situations (like mobile devices) and will require us to hover over the target for a second or two, but it will be good enough for right now. We are going to add [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) elements to our circles. These allow us to add "title" data to any SVG element, which we can view when the mouse hovers over it for a short period (i.e., a tooltip). The way we get these will feel a little strange. We are going to add an `append("title")` on to the end of the selection that contains your circles. To make this a little clearer, find in your graph where it says `svg.selectAll("circle")` and add `const circles` to the front of it. This creates a new `circles` variable that holds the selection. below the code that configures your circles, add ```javascript circles.append("title") .text(d => d.country); ``` This appends a title on to each on the circles. We then use the `text` function to set the text of the title. 37:T4a4,One of the things you will notice when you are playing with the tooltips is that some small countries are completely behind larger ones, and the tooltip doesn't work. To solve this, we can sort the data by population so that the smaller countries end up on top of the larger ones. Here is the complication -- sorting is an in-place operation in JavaScript, and because of the non-linear execution model of Observable cells, if we sort the data it changes it for every other cell. _However_ it won't be detected as a change, so it won't seem like you made a change until you make some small tweak to one of the other graphs, and it picks up on the change to the data (the most notable difference will be your colors change). We _could_ just change the sort in the beginning and have done with it, but a better solution is to clone the array and sort that. We can do that with a one liner: `[...countryData].sort((a,b) => b.pop - a.pop)`. The first part copies the array using the _spread_ operator, and then the second sorts the array with a specialized comparator function. Change the `.data(countryData)` in your code above to sort the data using this technique before it is bound.38:[] 31:{"id":"e19a2271fb1fd8cb","slug":"cs-465-tutorial-4-on-to-d3","title":"CS 465 Tutorial 4 - On to D3","thumbnail":"afdf4e4bb464c9d229b17012c15141dcd517f9a3ba1311bda9508e98bdfd12f2","access_level":"public","create_time":"$D2021-10-21T04:54:34.564Z","update_time":"$D2021-10-21T04:56:33.097Z","view_time":null,"first_public_time":"$D2021-10-21T04:57:07.552Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":"starter_2024"},"version":472,"publish_version":472,"role":null,"authored":false,"authors":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null}],"members":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":24,"collection":{"id":"ef285280251c7f66","slug":"cs-465-f21-tutorials","title":"CS 465 f21 Tutorials","owner":{"id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews"}},"type":"notebook","body":{"title":"CS 465 Tutorial 4 - On to D3","cells":[{"id":0,"value":"# CS 465 Tutorial 4 - On to D3\n\n#### Objectives\n- Get some hands-on practice creating a familiar visualization in D3\n- Learn about scales\n- Learn about joins and selections\n- Become more mindful of visualization structure\n- Learn how to add tooltips in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Getting Started\n\nWe will follow the same pattern as before. \n\n- Fork the page\n- Share it with me\n- Submit it on Canvas when you are done\n\n _You will find that I have frequent instructions to copy the graph as we add to it. This is partly to keep your work close to the instructions, but mostly it is so you have a record of the process and what it looks like as we progress through it. So please do copy your work forward down the page rather than updating a single instance. Obviously, this is not a style of work that we will stick with._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Overview\n\nFor this tutorial, you are going to build a basic bubble plot, just as we did in Vega-Lite.\n\nSpecifically, we will be building a version of the bubble plot we looked at when we introduced bubble plots (I've pre-filtered the data to make our lives a little easier).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"vl.markCircle()\n.data(countryData)\n.encode(\n vl.x().fieldQ(\"life_expect\").scale({domain:[40,85]}),\n vl.y().fieldQ(\"fertility\"),\n vl.size().fieldQ(\"pop\").scale({range:[10,1000], domain:[0, 1303182268]}),\n vl.color().fieldN(\"cluster\"),\n vl.tooltip(\"country\")\n )\n .width(700)\n .height(500)\n.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"### Create the SVG\n\nThe first step will be to create the SVG region that you will be using to draw your graph.\n\nJust as we did in the bar chart example, set up variables for `width`, `height`, and `margin`. Your `margin` should be an object with `left`, `right`, `top` and `bottom` attributes. You can set these all to 0 initially.\n\nYou can then create the SVG with the [`d3.create()`](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#create) function. It should look like this:\n\n```javascript\n const svg = d3.create(\"svg\")\n .attr(\"viewbox\", [0, 0, width, height])\n .style(\"height\", `\\${height}px`)\n .style(\"width\", `\\${width}px`)\n```\n\nThen, return `svg.node()` to load the SVG onto the page.\n\nThis creates a big white rectangle, so... it won't look like much. Add another `style` to the svg that sets the \"border\" to \"1px lightgray solid\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n // create SVG here\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"{\n // your graph with the circles in place\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## Scales\n\nThe next step will be to create some **scales**. \n\nWe are just going to focus on the position scales right now. What type of data do we have in `life_expect` and `fertility`?\n\nHopefully, your answer to both was \"quantitative\". So, for these two, our best bet is a linear scale, which we can construct with [d3.scaleLinear()](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleLinear).\n\nAs a reminder, the scale will set up a mapping from from the input **domain** (values in our data) to the output **range** (values we use to display). \n\nThe structure looks like:\n\n```javascript\nconst x = d3.scaleLinear()\n .domain([domainStart, domainEnd])\n .range([rangeStart, rangeEnd]);\n```\n\nLet's start by thinking about the output range. You want to have this picture in your head of the graph, with the \"Content\" region being where the visualization itself will live, and the axes and other annotations hanging out in the outer margin area.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"{\n const width = 400;\n const height = 200;\n const margin = {left:30, right:30, top:30, bottom:30};\n \n return html`<svg viewbox=\"0 0 ${width} ${height}\" style=\"width:${width}px; height:${height}px; background:#dee\">\n <rect x=${margin.left} y=${margin.top} width=${width - margin.left - margin.right} height=${height - margin.top - margin.bottom} style=\"fill:#aaf\"/>\n <text text-anchor=\"middle\" transform=\"translate(${width/2}, ${height/2})\">Content</text>\n<text text-anchor=\"middle\" transform=\"translate(10,10)\" style=\"font-size:10px\n\">(0,0)</text>\n <text text-anchor=\"middle\" transform=\"translate(${width/2}, ${margin.top - 5})\">Top</text>\n <text text-anchor=\"middle\" transform=\"translate(${width/2}, ${height - 5})\">Bottom</text>\n <text text-anchor=\"middle\" transform=\"translate(${margin.left - 5}, ${height/2}) rotate(-90)\">Left</text>\n <text text-anchor=\"middle\" transform=\"translate(${width - margin.right + 5}, ${height/2}) rotate(90)\">Right</text>\n\n</svg>`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"So, the start of the output range for the X encoding will be at the left margin, and the end will be at the width minus the right margin (you can apply the same logic for the Y encoding).\n\nWhat about the input domain?\n\nLet's focus on the X encoding. If you look at the Vega-Lite graph, you can see that I set the domain to be [40,85]. You could just use this. \n\n_However_ I want you to try out a D3 utility function: [d3.extent()](https://github.com/d3/d3-array/blob/v3.1.1/README.md#extent). This takes in an array and returns a two element list with the maximum and minimum values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"d3.extent([5,3,8,2,89,34,42])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"The function also takes in an optional _accessor_ function which helps it to extract the right value if we have an array of objects. In the following example, we have a list of objects that have `a` and `b` properties. If we want to find the extent of the `b` property, we need to provide an accessor function that tells the function how to extract the correct value. So, we can use `d=>d.b`.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"d3.extent([{a:3, b:6}, {a:1, b:42}, {a:7, b:7}, {a:34, b: 21}], (d)=>d.b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"### Add an X scale\n\nCopy and paste your graph so far down below. \n\nUse these ideas to create a new linear scale for the X axis. Declare it before you create the SVG and call it `x`.\n\nOnce you have your new scale function, use it when you set the `cx` attribute by changing the value function to `d => x(d.life_expect)`. The circles should now stretch out across the SVG.\n\n_Don't worry about the circles that are slightly cut off by the edge of the graph. This is because our `extent` function really goes right to the min and max values. Things will get better when we add margins._\n\n### Add a Y scale\n\nRepeat the same process for the y scale, changing `cy` from being fixed at `height/2` to being determined by 'fertility'. This time, however, I would like you to start the scale at 0 (our lowest value is essentially there. So, instead of using `d3.extent`, use `d3.max`, which works exactly the same way but only returns the maximum value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"{\n // your graph with the circles in the correct place\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"### Fix the Y scale\n\nI suspect that the majority of you will now have a graph that shows a positive relationship between fertility and life expectancy (increased fertility correlates with increased life expectancy). If you refer back to the original Vega-Lite graph, this is wrong. There is a _negative_ correlation.\n\nWhat went wrong? The problem is that we think of the origin of our graph as being in the lower left hand corner,with y increasing upwards. But in computer graphics, (0,0) is in the _upper_ left hand corner and `y` increases _down_. \n\nThere are a variety of ways we can fix this, but the easiest thing to do is to reverse the range array in the Y scale. Go ahead and fix the graph above (if you got it right the first time and didn't see the graph upside down, try swapping the values and then put it back again).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"## Adding Axes\n\nThe next thing we will do is add the axis labels. \n\nYou can basically copy what we did in class:\n\n```javascript\n const xAxis = svg.append(\"g\")\n .attr(\"transform\", `translate(0, \\${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n const yAxis = svg.append(\"g\")\n .attr(\"transform\", `translate(\\${margin.left}, 0)`)\n .call(d3.axisLeft(y));\n\n```\n\nThis adds a new `g` to the SVG and then calls one of the four axis generators on the component (`axisLeft`, `axisRight`, 'axisTop', and `axisBottom`).\n\nYou will need to tweak the margins to give yourself room for the axis. While you are at it, open up the margins on the top and right a little bit so the dots aren't cropped any more.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"{\n // your graph with axis labels here\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"## Add label titles\n\nWe should label our axes. \n\nIn class I showed you that we can just create a new `text` element and move it where we want it. \n\nHere are the two examples from class for the X and Y axes:\n\n```\nsvg.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"transform\", `translate(\\${(width-margin.right + margin.left)/2}, \\${height-5})`)\n .style(\"font-weight\", \"bold\")\n .style(\"font-size\",\"10px\")\n .text(\"Data\");\n\nsvg.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"transform\", `translate(\\${margin.left - 20},\\${height/2}) rotate(-90)`)\n .style(\"font-weight\", \"bold\")\n .style(\"font-size\",\"10px\")\n .text(\"Index\");\n```\n\nDuplicate this for your plot, with \"Life Expectancy\" and \"Fertility Rate\" for the labels.\n\nDon't just take the numbers here as read -- move the labels around until they look right. You will also probably want to tweak the margins again.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"{\n// your plot with axis labels\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"{\n // your graph with colored dots\n \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n // your graph with sized, colored dots\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"You will have some significant overplotting when we grow the circles. To combat that, we can make the circles slightly translucent. Add another `.style()` and set \"opacity\" to 0.6 (60%).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"{\n // your graph with sized, colored dots and tooltips\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"## Closing thoughts\n\nWe will end here. Hopefully this gives you the ammunition to make other simple D3 graphs. It should also give you more of an appreciation for Vega-Lite...\n\nThe other thing I hope you see is how much of this is boilerplate that you can make use of in other graphs -- so it is not as bad as it first seems. Soon we will start using some of the more interesting capabilities and you will see some of the advantages of getting lower level.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"vegaData = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"countryData = {\n const data = await vegaData[\"gapminder.json\"]()\n return data.filter(d=>d.year===2005)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>