`](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).\n\nThe way we get these will feel a little strange. We are going to add an `append(\"title\")` on to the end of the method chain that creates the circle. \n\n```javascript\n.append(\"title\")\n.text(d.country);\n```\n\nThis appends a title on to each of the circles. We then use the `text` function to set the text of the title. \n\n_Note that any functions you chain on the end after the `append` are referring to the **title**, not the circle anymore_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"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. \n\nTo solve this, we can sort the data by population so that the smaller countries end up on top of the larger ones. \n\nRight after you make the new `data` variable, add this line:\n\n```javascript\ndata.sort((a,b) => b.pop - a.pop);\n```\n\nSorting in JavaScript is in-place, so we don't have to assign the return value to anything. \n","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 Plot...\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":"","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 = vegaData[\"gapminder.json\"]()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body" </article></body></html>

2b:null 2c:["$","title",null,{"children":"CS 465 Tutorial 3 - On to D3 | Prateek Wadhavkar | Observable"}] 31:T4e6,## Making circles 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 did with the bar chart, we will start by creating a a new `` tag with `const dots = svg.append("g")`. Then use a `forEach` loop on the `data` creating a new circle for each observation. 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 a value. 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 `x(d.life_expect)`. Since we held y fixed this will create a little black caterpillar looking shape on the left side of our graph as all of the circles clump together. 32:T515,{ // your graph with the circles in place // filter dataset const data = countryData.filter((d) => d.year === 2005); // need to define these variables const width = 500; const height = 500; const margin = {top: 10, bottom: 10, left: 10, right: 10}; // create scales const x = d3.scaleLinear() .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets .range([margin.left, (width - margin.right)]); // this returns a function. const y = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.fertility)]) .range([(height - margin.bottom), margin.top]); // create blank canvas const svg = d3.create("svg") .attr("viewbox", [0,0, width, height]) .style("height", `${height}px`) .style("width", `${width}px`) .style("border", "1px lightgray solid"); // make circles const circles = svg.append("g").attr("fill", "steelblue"); // visit each element and make a rect by appending it to g data.forEach((d) => { circles .append("circle") .attr("cx", x(d.life_expect)) // what's inside the paren gets passed to the scale function. it should be in the domain, fxn places it in the range. .attr("cy", y(d.fertility)) .attr("r", 20); }); return svg.node(); }33:T673,{ // your graph with axis labels here // filter dataset const data = countryData.filter((d) => d.year === 2005); // need to define these variables const width = 500; const height = 500; const margin = {top: 50, bottom: 50, left: 50, right: 50}; // create scales const x = d3.scaleLinear() .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets .range([margin.left, (width - margin.right)]); // this returns a function. // adjust domain padding and or axis placement to fix the issue of the dots crossing the axis const y = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.fertility)]) .range([(height - margin.bottom), margin.top]); // create blank canvas const svg = d3.create("svg") .attr("viewbox", [0,0, width, height]) .style("height", `${height}px`) .style("width", `${width}px`) .style("border", "1px lightgray solid"); // make circles const circles = svg.append("g").attr("fill", "steelblue"); // visit each element and make a rect by appending it to g data.forEach((d) => { circles .append("circle") .attr("cx", x(d.life_expect)) // what's inside the paren gets passed to the scale function. it should be in the domain, fxn places it in the range. .attr("cy", y(d.fertility)) .attr("r", 20); }); // add axes const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); return svg.node(); }34:T845,{ // your plot with axis labels // filter dataset const data = countryData.filter((d) => d.year === 2005); // need to define these variables const width = 500; const height = 500; const margin = {top: 60, bottom: 60, left: 60, right: 60}; // create scales const x = d3.scaleLinear() .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets .range([margin.left, (width - margin.right)]); // this returns a function. // adjust domain padding and or axis placement to fix the issue of the dots crossing the axis const y = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.fertility)]) .range([(height - margin.bottom), margin.top]); // create blank canvas const svg = d3.create("svg") .attr("viewbox", [0,0, width, height]) .style("height", `${height}px`) .style("width", `${width}px`) .style("border", "1px lightgray solid"); // make circles const circles = svg.append("g").attr("fill", "steelblue"); // visit each element and make a rect by appending it to g data.forEach((d) => { circles .append("circle") .attr("cx", x(d.life_expect)) // what's inside the paren gets passed to the scale function. it should be in the domain, fxn places it in the range. .attr("cy", y(d.fertility)) .attr("r", 20); }); // add axes const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // add axis titles svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${(width-margin.right + margin.left)/2}, ${height-20})`) .style("font-weight", "regular") .style("font-size","12px") .text("Life Expectancy"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left - 40},${height/2}) rotate(-90)`) .style("font-weight", "regular") .style("font-size","12px") .text("Fertility"); return svg.node(); }35:T6a7,## 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., `data.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 `attr()`, and set the "fill" to the color we want. To use our new scale, we would write `.attr("fill", color(d.cluster))`.36:T915,{ // your graph with colored dots // filter dataset const data = countryData.filter((d) => d.year === 2005); // need to define these variables const width = 500; const height = 500; const margin = {top: 60, bottom: 60, left: 60, right: 60}; // create scales const x = d3.scaleLinear() .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets .range([margin.left, (width - margin.right)]); // this returns a function. // adjust domain padding and or axis placement to fix the issue of the dots crossing the axis const y = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.fertility)]) .range([(height - margin.bottom), margin.top]); const color = d3.scaleOrdinal() .domain(data.map(d => data.cluster)) .range(d3.schemeCategory10) // create blank canvas const svg = d3.create("svg") .attr("viewbox", [0,0, width, height]) .style("height", `${height}px`) .style("width", `${width}px`) .style("border", "1px lightgray solid") .style("background-color", ""); // remove bkgrnd color // make circles const circles = svg.append("g").attr("fill", "steelblue"); // visit each element and make a rect by appending it to g data.forEach((d) => { circles .append("circle") .attr("cx", x(d.life_expect)) // what's inside the paren gets passed to the scale function. it should be in the domain, fxn places it in the range. .attr("cy", y(d.fertility)) .attr("r", 20) .attr("fill", color(d.cluster)); }); // add axes const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // add axis titles svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${(width-margin.right + margin.left)/2}, ${height-20})`) .style("font-weight", "regular") .style("font-size","12px") .text("Life Expectancy"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left - 40},${height/2}) rotate(-90)`) .style("font-weight", "regular") .style("font-size","12px") .text("Fertility"); return svg.node(); }37:T42c,## 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. 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 if we just use the radius directly, the size won't grow linearly, it will grow with the square of the input value. The key to the solution is to realize that `r` is proportional to the square root of the area, so we want a linear scale based off the square root of the input value. D3 provides this with `d3.scaleSqrt`. This scale otherwise behaves like 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. 38:T99a,{ // your graph with colored dots // filter dataset const data = countryData.filter((d) => d.year === 2005); // need to define these variables const width = 500; const height = 500; const margin = {top: 60, bottom: 60, left: 60, right: 60}; // create scales const x = d3.scaleLinear() .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets .range([margin.left, (width - margin.right)]); // this returns a function. // adjust domain padding and or axis placement to fix the issue of the dots crossing the axis const y = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.fertility)]) .range([(height - margin.bottom), margin.top]); const size= d3.scaleSqrt() .domain([0, d3.max(data, (d)=>d.pop)]) .range([0, width/20]) const color = d3.scaleOrdinal() .domain(data.map(d => data.cluster)) .range(d3.schemeCategory10) // create blank canvas const svg = d3.create("svg") .attr("viewbox", [0,0, width, height]) .style("height", `${height}px`) .style("width", `${width}px`) .style("border", "1px lightgray solid") .style("background-color", ""); // remove bkgrnd color // make circles const circles = svg.append("g").attr("fill", "steelblue"); // visit each element and make a rect by appending it to g data.forEach((d) => { circles .append("circle") .attr("cx", x(d.life_expect)) // what's inside the paren gets passed to the scale function. it should be in the domain, fxn places it in the range. .attr("cy", y(d.fertility)) .attr("r", size(d.pop)) .attr("fill", color(d.cluster)) .style("opacity", 0.6); }); // add axes const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // add axis titles svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${(width-margin.right + margin.left)/2}, ${height-20})`) .style("font-weight", "regular") .style("font-size","12px") .text("Life Expectancy"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left - 40},${height/2}) rotate(-90)`) .style("font-weight", "regular") .style("font-size","12px") .text("Fertility"); return svg.node(); }39:T9e7,{ // your graph with colored dots // filter dataset const data = countryData.filter((d) => d.year === 2005); data.sort((a,b) => b.pop - a.pop); // need to define these variables const width = 500; const height = 500; const margin = {top: 60, bottom: 60, left: 60, right: 60}; // create scales const x = d3.scaleLinear() .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets .range([margin.left, (width - margin.right)]); // this returns a function. // adjust domain padding and or axis placement to fix the issue of the dots crossing the axis const y = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.fertility)]) .range([(height - margin.bottom), margin.top]); const size= d3.scaleSqrt() .domain([0, d3.max(data, (d)=>d.pop)]) .range([0, width/20]) const color = d3.scaleOrdinal() .domain(data.map(d => data.cluster)) .range(d3.schemeCategory10) // create blank canvas const svg = d3.create("svg") .attr("viewbox", [0,0, width, height]) .style("height", `${height}px`) .style("width", `${width}px`) .style("border", "1px lightgray solid") .style("background-color", ""); // remove bkgrnd color // make circles const circles = svg.append("g").attr("fill", "steelblue"); // visit each element and make a rect by appending it to g data.forEach((d) => { circles .append("circle") .attr("cx", x(d.life_expect)) // what's inside the paren gets passed to the scale function. it should be in the domain, fxn places it in the range. .attr("cy", y(d.fertility)) .attr("r", size(d.pop)) .attr("fill", color(d.cluster)) .style("opacity", 0.6) .append("title").text(d.country); }); // add axes const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // add axis titles svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${(width-margin.right + margin.left)/2}, ${height-20})`) .style("font-weight", "regular") .style("font-size","12px") .text("Life Expectancy"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left - 40},${height/2}) rotate(-90)`) .style("font-weight", "regular") .style("font-size","12px") .text("Fertility"); return svg.node(); }3a:[] 2f:{"id":"a6de10fa0f8f1a77","slug":null,"title":"CS 465 Tutorial 3 - On to D3","thumbnail":"1d7998c05f90a1bb43292ba988c483bb07bdd6dba5d9c2de7b75f86949353b56","access_level":"public","create_time":"$D2022-10-19T13:12:25.081Z","update_time":"$D2022-10-19T13:37:11.034Z","view_time":null,"first_public_time":"$D2022-10-19T13:12:25.081Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"bc0813ec355d05d5","login":"pwad1","name":"Prateek Wadhavkar","avatar_url":"https://avatars-next.observableusercontent.com/785877af4586ec28f6737ad2e8230919de879d11dfca59bbe272e26c67878771","tier":"starter_2024"},"version":561,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7ded250c43dc545","login":"pwad1","name":"Prateek Wadhavkar","avatar_url":"https://avatars-next.observableusercontent.com/785877af4586ec28f6737ad2e8230919de879d11dfca59bbe272e26c67878771","tier":null}],"members":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null,"role":"editor"},{"type":"individual","id":"f7ded250c43dc545","login":"pwad1","name":"Prateek Wadhavkar","avatar_url":"https://avatars-next.observableusercontent.com/785877af4586ec28f6737ad2e8230919de879d11dfca59bbe272e26c67878771","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CS 465 Tutorial 3 - On to D3","cells":[{"id":0,"value":"# CS 465 Tutorial 3 - 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 Plot.\n\nSpecifically, we will be building a version of the bubble plot we looked at when we introduced bubble plots.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Plot.plot({\n color: {\n legend: true,\n type: \"categorical\"\n },\n marks: [\n Plot.dot(countryData, {\n filter: (d) => d.year === 2005,\n x: \"life_expect\",\n y: \"fertility\",\n r: \"pop\",\n title: \"country\",\n opacity:.6,\n fill: \"cluster\"\n })\n ]\n})","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 const data = countryData.filter((d) => d.year === 2005);\n // create SVG here\n // need to define these variables\n const width = 500;\n const height = 500;\n const margin = {top: 10, bottom: 10, left: 10, right: 10};\n const svg = d3.create(\"svg\")\n .attr(\"viewbox\", [0,0, width, height])\n .style(\"height\", `${height}px`)\n .style(\"width\", `${width}px`)\n .style(\"border\", \"1px lightgray solid\");\n\n return svg.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"## Data filtering\n\nWe don't have a convenient data filtering option, so we will just have to do it by hand. \n\nAdd this line before you create the `svg`:\n\n```javascript\ndata = countryData.filter((d) => d.year === 2005);\n```\n\nThis will create a new local data source in our cell that just has the data for 2005. Note that the discriminator function is the same one we used in the filter option above. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"## Scales\n\nThe next step will be to create some **scales**. How many scales do we need?\n\n

How many scales do we need? (think before looking)

\nHopefully you answered four: \n

`life_expect` (x)
`fertility` (y)
`pop` (circle size)
`cluster` (color)

\n\n

\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"\n\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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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``}","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 Plot graph, you can the domain is roughly [25,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":529,"value":"*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:*\n\n```javascript\nfunction f(dataObj){\n return dataObj.life_expect\n}\n```\n\n*You might also ask, \"Why `d`?\". That `d` is just the function argument -- it could be anything you like. `dataObj => dataObj.b` 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.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"Create a JavaScript cell below here and try it out with `countryData`. Try to find the extent of `life_expect`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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\n### Add a Y scale\n\nRepeat the same process for the y scale, using '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 // filter dataset\n const data = countryData.filter((d) => d.year === 2005);\n\n // need to define these variables\n const width = 500;\n const height = 500;\n const margin = {top: 10, bottom: 10, left: 10, right: 10};\n \n // create scales\n const x = d3.scaleLinear()\n .domain(d3.extent(data, (d) => d.life_expect)) //extent implicityly returns an array so no need for brackets\n .range([margin.left, (width - margin.right)]);\n\n const y = d3.scaleLinear()\n .domain([0, d3.max(data, (d) => d.fertility)])\n .range([(height - margin.bottom), margin.top]);\n\n \n // create SVG here\n\n const svg = d3.create(\"svg\")\n .attr(\"viewbox\", [0,0, width, height])\n .style(\"height\", `${height}px`)\n .style(\"width\", `${width}px`)\n .style(\"border\", \"1px lightgray solid\");\n\n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"$32","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 Plot 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":"$33","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":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"To show you the difference in using the two scales, I have a simple data set: `[1,2,4,8,16,32]`. At each step we should see the value double. The visualization on the left, where we are just directly scaling the radius, the circles are growing too fast making the larger values look disproportionately large.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"{\nconst data = [1,2,4,8,16,32];\n\nconst radiusScale = d3.scaleLinear().domain([0, 32]).range([0, 25]);\nconst sqrtScale = d3.scaleSqrt().domain([0, 32]).range([0, 25]);\n \nreturn htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"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`).\n\nThe range can extend from 0 to `width/20`. This gives us some reasonable size circles that will scale if we change the size of the grap.\n\nOnce you have you scale, change the `r` attribute to use your new scale on the `pop` variable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"$38","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":"## Tooltips\n\nThere 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.\n\nWe 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).\n\nThe way we get these will feel a little strange. We are going to add an `append(\"title\")` on to the end of the method chain that creates the circle. \n\n```javascript\n.append(\"title\")\n.text(d.country);\n```\n\nThis appends a title on to each of the circles. We then use the `text` function to set the text of the title. \n\n_Note that any functions you chain on the end after the `append` are referring to the **title**, not the circle anymore_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"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. \n\nTo solve this, we can sort the data by population so that the smaller countries end up on top of the larger ones. \n\nRight after you make the new `data` variable, add this line:\n\n```javascript\ndata.sort((a,b) => b.pop - a.pop);\n```\n\nSorting in JavaScript is in-place, so we don't have to assign the return value to anything. \n","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 Plot...\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":"","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 = vegaData[\"gapminder.json\"]()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body" </article></body></html>