2d:null 2e:["$","title",null,{"children":"Your First d3.js Scatterplot! | Mollie Pettit | Observable"}] 33:T443,md` ## A note on Observable code There are some differences between how code is written in Observable vs how it is written in a typical JavaScript file. Therefore, within each step, I will note the point at which the cells serve the purpose of setting up variables for or displaying a chart. You can expand any cell to see the code used to create the output. A lot of this code will look similar to what I explain in the instructions, but it will not be exactly the same. *It may be easier for you if you ignore the Observable versions of code until you understand the difference.* Additionally, you'll notice that every time I change a variable in further step, I also rename the variable. This is necessary in Observable so that the notebook does not confuse between the two varaibles. This is not necessary for you to do, though, in your own work. ### TL;DR: *Code in Observable is not the same as code in the wild and cannot be copied and pasted into a file and be expected to work as is. As you work, use the code as written in the instructions rather than the Observable code.* `34:T7c4,md` **4) Using a data join, add a \`\`circle\`\` for every element of our array.** Give it a radius 5 and a class, \`\`ufoCircle\`\`. Positoin the circles based on their \`\`month\`\` and \`\`count\`\` values.Inspect it in the console. \`\`\` const circle = svg.selectAll('.ufoCircle') //select all elements with class ufoCircle. (There currently are none) .data(data) //attach the data .enter().append('circle') //aopend one circle for each data point. There are 11 data points, so there will be 11 circles .attr('class', 'ufoCircle') //give each circle class ufoCircle .attr('r', 10) //assign radius // Position the circles based on their x and y attributes. .attr("cx", function(d) { return d.month; }) .attr("cy", function(d) { return d.count; }); \`\`\` What you're doing here is: 1. Selecting all elements with class \`\`ufoCircle\`\`. 2. Appending one circle for each data point. There are 11 data points so there will be 11 data points, so there will be 11 circles. 3. Give each circle a class of ufoCircle 4. Assigning a radius 5. Positioning the circles based on their x and y attributes *Note about anonymous functions:* You can see the \`\`cx\`\` and \`\`cy\`\` attributes use anonymous functions. This is done so that, rather than having to define two functions elsewhere, which will make the code less readable, they are defined exactly where they are used. This also means that you do not pollute the name space by having to define several variables or function names that are only used once *Look at your plot. What looks wrong?* Notice that the circles are all showing up in the top left corner. Why is this? Let's look at the x variables to examine this. Notice they fall between 1 and 12. If you plot these values straight as pixels, it's no wonder they all overlap each other and take up a very small amount of space. In order to fix this, we need to add \`\`scales\`\`. Read up on scales here: https://info474-s17.github.io/book/d3-scales.html `35:T4dc,md` 5) **We'll need to add a [scale](https://github.com/d3/d3-scale/blob/master/README.md)**. Let's take a moment to talk about scales... *Domain*: A scale’s input domain is the range of possible input data values. So, in the case of our x scale, the domain is from 1 to 12, because the months of the year (which are our x values) are from 1 to 12. *Range*: A scale’s output range is the range of possible output values. Since we want our x value to fill up the entire width of the svg, which has the width of \`\`width\`\` (defined above as 720 px). So, the range will be from 0 to \`\`width\`\`. Like so: \`\`\` const xScale = d3.scaleLinear() .domain([1,12]) .range([0 , width]) //scope of data going out / pixels const yScale = d3.scaleLinear() .domain([0, 500]) .range([0, height]) \`\`\` So we've defined xScale and yScale, but we still haven't called them. Let's edit our circle code so that we're feeding our x and y values into the scales, like so: \`\`\` const circle = svg.selectAll('.ufoCircle') .data(data) .enter().append('circle') .attr('class', 'ufoCircle') .attr('r', 10) .attr("cx", function(d) { return xScale(d.month); }) .attr("cy", function(d) { return yScale(d.count); }); \`\`\` `36:T460,//Observable Specific; don't use this exact code chart6 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const circle = svg.selectAll('.ufoCircle') //select all elements with class ufoCircle. (There currently are none) .data(data) //attach the data .enter().append('circle') //aopend one circle for each data point. There are 11 data points, so there will be 11 circles .attr('class', 'ufoCircle') //give each circle class ufoCircle .attr('r', 10) //assign radius // Position the circles based on their x and y attributes. .attr("cx", function(d) { return xScale(d.month); }) .attr("cy", function(d) { return yScale(d.count); }); const text = svg.selectAll("text") .data(data) .enter().append("text") .attr("x", function(d) { return xScale(d.month); }) .attr("y", function(d) { return yScale(d.count); }) .text( function (d) { return d.count; }) .attr('dx', 10) //moves text 10px (right) on the x axis .attr('dy', -10); //moves text -10px (up) on the y axis. These help move the text so it's not overlapping with the circles return svg.node(); }37:T670,md` Looking at the full code, we see that perhaps there are some redundancies. Let's make our code less redundant! **7) Make group elements that contain both circles and text.** This technique can be quite useful when you have several visual elements that should all act in concert. In our chart, for example, we could group circle and text elements into a group together because they will always appear together. With groups can no longer use \`\`cx\`\` and \`\`cy\`\` or \`\`x\`\` and \`\`y\`\` to define the location of the circles and text. Instead, we'll use translate, which is a type of [svg transformation](https://www.tutorialspoint.com/d3js/d3js_svg_transformation.htm). Let's look at a pseudocode version: \`\`\` // create ufoGroup const ufoGroup = svg.selectAll('.ufoGroup') .data(data).enter().append('g') .attr('class', 'ufoGroup') .attr('transform', function(d) { return 'translate(, )'}) \`\`\` And now, we can fill in the values: \`\`\` // create ufoGroup const ufoGroup = svg.selectAll('.ufoGroup') .data(data).enter().append('g') .attr('class', 'ufoGroup') .attr('transform', function(d) { return 'translate(' + xScale(d.month) + ',' + yScale(d.count) + ')'}) \`\`\` Look in the console and see that the group now exists! Now, let's append our circles to the group we've created. \`\`\` //append circles to ufoGroup ufoGroup.append('circle') .attr('class', 'ufoCircle') .attr('r', 10) \`\`\` And append the text. \`\`\` //append text to ufoGroup ufoGroup.append('text') .attr('class', 'ufoText') .attr('dx', 10) .attr('dy', -10) .text(function(d) { return d.count}) \`\`\` `38:T8b2,md` **12) Importing data from a file and format** Right now, we are defining the data directly. Let's change this so that we're loading in the data from an outside source. D3 let's us do this easily with [d3-fetch](https://github.com/d3/d3-fetch)! The data we have is in csv (comma separated value) form, so we'll be using the d3.csv() module. This module has built-in support for parsing, so we're going to use it. While we're at it, we'll also be formatting our date value and grabbing year values for use in later steps. Let's create a \`\`parseTime\`\` variable that will parse our dates into datetime. \`\`\` const parseTime = d3.timeParse("%m/%Y"); \`\`\` Now, let's load in our data, returning the following variables: - date - count - month, - parsedDate (using ParseTime variable we just created) - year \`\`\` const parseTime = d3.timeParse("%m/%Y"); d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/data/ufo.csv", function(d) { return { date: d.date, count: d.count, month: d.date.split('/')[0], parsedDate: parseTime(d.date), year: parseTime(d.date).getYear() + 1900 }; }).then(function(fullData) { //rest of code }); \`\`\` *Curious as to why we add 1900 to the value? Read about the method [here](https://www.tutorialspoint.com/javascript/date_getyear.htm). * What it's doing is loading the csv file, and then when the file is fully loaded, running the rest of the code. Additionally, rather than inserting an unnamed function into the module, I often name it for easier legibility. In our case, let's put our code into a function \`\`ready()\`\` and then call that function in the\`\`d3.csv()\`\` module: \`\`\` d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/data/ufo.csv", function(d) { return { date: d.date, count: d.count, month: d.date.split('/')[0], parsedDate: parseTime(d.date), year: parseTime(d.date).getYear() + 1900 }; }).then(ready); function ready(data) { ... rest of code (the stuff we've already written) here ... } \`\`\` `39:T436,//Observable Specific; don't use this exact code chartt13 = { const startData = fullData.filter(function(d) { return d.year == 2018; }) const SVG = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var svg = SVG.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const ufoGroup = svg.selectAll('.ufoGroup') .data(startData).enter().append('g') .attr('class', 'ufoGroup') .attr('transform', function(d) { return 'translate(' + xScale2(d.month) + ',' + yScale3(d.count) + ')'}) svg.append("g") .attr("class", "x axis") //gives group the classes 'x' and 'axis' .attr("transform", "translate(0," + innerHeight + ")") .call(xAxis2); svg.append("g") .attr("class", "y axis") //gives group the classes 'y' and 'axis' .call(yAxis3); ufoGroup.append('circle') .attr('class', 'ufoCircle') .attr('r', 10) ufoGroup.append('text') .attr('class', 'ufoText') .attr('dx', 10) .attr('dy', -10) .text(function(d) { return d.count}) return SVG.node(); }3a:T481,md` **13) Changing Axis to Dates & Using \`\`d3.extent\`\`** The axis is still referring to month values. Let's change this so that it's reading the values in as dates. This is where the parsedDate value we created earlier comes in. We'll want to change our x axis from a linear scale to a time scale using [\`\`d3.scaleTime()\`\`](https://github.com/d3/d3-scale#scaleTime). Our new time scale will no longer understand our originally set domain. This is a good opportunity to make the domain calculation a bit more dynamic. We'll use [\`\`d3.extent()\`\`](https://github.com/d3/d3-array#extent) to obtain the min and max values of the data. We will end up with something like this: \`\`\` const xScale = d3.scaleTime() // .domain([1,12]) .domain(d3.extent(startData, function(d) { return d.parsedDate; })) .range([0, innerWidth]); \`\`\` You'll also need to update the value being passed into xScale anywhere in the code. While we're at it, let's also make the x axis more dynamic! \`\`\` const xScale = d3.scaleLinear() .domain([0, d3.max(startData, function(d) { return d.count})]) .range([innerHeight, 0]) \`\`\` `3b:[] 31:{"id":"d70994d6a8abc573","slug":"your-first-d3-js-scatterplot","title":"Your First d3.js Scatterplot!","thumbnail":"87007b7d45b005aca7860f78435d5e2ad8adee67912f2c8f6e30968cfbd61aad","access_level":"public","create_time":"$D2020-01-21T02:40:09.424Z","update_time":"$D2020-02-07T19:06:10.405Z","view_time":null,"first_public_time":"$D2020-01-27T05:21:42.107Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"1e6babaa52389196","login":"molliemarie","name":"Mollie Pettit","avatar_url":"https://avatars-next.observableusercontent.com/ea4997d987555e3642bfea886f1e3c0639a3d4a9d84d149c4d8030d94f03a9d0","tier":"starter_2024"},"version":857,"publish_version":857,"role":null,"authored":false,"authors":[{"type":"individual","id":"60915c927486082e","login":"molliemarie","name":"Mollie Pettit","avatar_url":"https://avatars-next.observableusercontent.com/ea4997d987555e3642bfea886f1e3c0639a3d4a9d84d149c4d8030d94f03a9d0","tier":null}],"members":[{"type":"individual","id":"60915c927486082e","login":"molliemarie","name":"Mollie Pettit","avatar_url":"https://avatars-next.observableusercontent.com/ea4997d987555e3642bfea886f1e3c0639a3d4a9d84d149c4d8030d94f03a9d0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4f80735a2895b8c5","slug":"teaching-materials","title":"Teaching Materials","owner":{"id":"1e6babaa52389196","login":"molliemarie","name":"Mollie Pettit"}},"type":"notebook","body":{"title":"Your First d3.js Scatterplot!","cells":[{"id":0,"value":"md`# Your First d3.js Scatterplot!\n\nFor this first project, we're going to use data from [The National UFO Reporting Center](http://www.nuforc.org/), a website where people can report UFO sightings.\n\nWe'll make a fairly basic plot with no interactions to start that will end up looking something like this:\n\n![static scatter](https://i.imgur.com/OzxZdpP.png)\n\n**Note:** Since Mike doesn't technically make valid HTML pages, we're not going to either — here's how we'll start our own empty HTML pages from here on out:\n\n\\`\\`\\`\n \n \n\n \n\n \n\n \n \n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`\n## Setting up some variables\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"data = [\n\t{\"date\": \"12/2018\", \"count\": 233},\n\t{\"date\": \"11/2018\", \"count\": 228},\n\t{\"date\": \"10/2018\", \"count\": 262},\n\t{\"date\": \"09/2018\", \"count\": 293},\n\t{\"date\": \"08/2018\", \"count\": 350},\n\t{\"date\": \"07/2018\", \"count\": 400},\n\t{\"date\": \"06/2018\", \"count\": 225},\n\t{\"date\": \"05/2018\", \"count\": 243},\n\t{\"date\": \"04/2018\", \"count\": 221},\n\t{\"date\": \"03/2018\", \"count\": 235},\n\t{\"date\": \"02/2018\", \"count\": 235},\n\t{\"date\": \"01/2018\", \"count\": 311}\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`\n # Steps:\n \n**1) First, open [FirstScatterPlot_UFOSightings_Starter](https://blockbuilder.org/molliemarie/07c8af26ff3303fbff66baeccc46da94) and fork it.** You'll notice the code is set up like above, plus I've added styling that will add a pink border around any svg we might draw.\n\n\\`\\`\\`\n svg {\n border: 1px solid #f0f;\n }\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n**2) Data formatting**\n\n As you can see in the block, there is a line that reads \\`\\`console.log(data)\\`\\`. This prints the data out into the console. Let's check it out in the console!\n\n We're going to need to format our data. For now, let's keep it simple and simply extract the month from the date.\n\n While we're at it, we can also make sure our \\`\\`count\\`\\` variable is being read as a number by simply adding a plus sign before the variable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"data.forEach(function(d) {\n d.count = +d.count;\n d.month = +d.date.split('/')[0];\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\n**3) Add an SVG element of width 700 and height 300.**\n\n \\`\\`\\`\n const svg = d3.select(\"body\").append(\"svg\") //grabs body and appends an svg\n .attr('width', 700)\n .attr('height', 300)\n \\`\\`\\`\n\n But, because it's better practice to define variables at the top, let's redo this with defined width and height variables.\n\n \\`\\`\\`\n const width = 700;\n const height = 300;\n\n const svg = d3.select(\"body\").append(\"svg\") //grabs body and appends an svg\n .attr(\"width\", width)\n .attr(\"height\", height);\n \\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"//Observable Specific; don't use this exact code\nchart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"//Observable Specific; don't use this exact code\nchart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const circle = svg.selectAll('.ufoCircle') //select all elements with class ufoCircle. (There currently are none)\n .data(data) //attach the data\n .enter().append('circle') //aopend one circle for each data point. There are 11 data points, so there will be 11 circles\n .attr('class', 'ufoCircle') //give each circle class ufoCircle\n .attr('r', 10) //assign radius\n // Position the circles based on their x and y attributes. \n .attr(\"cx\", function(d) { return d.month; })\n .attr(\"cy\", function(d) { return d.count; });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"xScale = d3.scaleLinear()\n .domain([1,12])\n .range([0 , width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"yScale = d3.scaleLinear()\n // .domain(d3.extent(startData, function(d) { return d.count }))\n .domain([0, 500])\n // .range([0, height])\n .range([0, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"//Observable Specific; don't use this exact code\nchart5 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const circle = svg.selectAll('.ufoCircle') //select all elements with class ufoCircle. (There currently are none)\n .data(data) //attach the data\n .enter().append('circle') //aopend one circle for each data point. There are 11 data points, so there will be 11 circles\n .attr('class', 'ufoCircle') //give each circle class ufoCircle\n .attr('r', 10) //assign radius\n // Position the circles based on their x and y attributes. \n .attr(\"cx\", function(d) { return xScale(d.month); })\n .attr(\"cy\", function(d) { return yScale(d.count); });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\n**6) Label the circles based on their \\`\\`cx\\`\\` and \\`\\`cy\\`\\` attributes.**\n\nThis will look very similar to when we created the circles.\n\n\\`\\`\\`\nconst text = svg.selectAll(\"text\")\n .data(data)\n .enter().append(\"text\")\n .attr(\"x\", function(d) { return xScale(d.month); })\n .attr(\"y\", function(d) { return yScale(d.count); })\n .text( function (d) { return d.count; })\n\\`\\`\\`\n\nYou'll notice that the values are directly on the circle. You can move them a bit off to the side using the \\`\\`dx\\`\\` and \\`\\`dy\\`\\` attributes. \n\n\\`\\`\\`\nconst text = svg.selectAll(\"text\")\n .data(data)\n .enter().append(\"text\")\n .attr(\"x\", function(d) { return xScale(d.month); })\n .attr(\"y\", function(d) { return yScale(d.count); })\n .text( function (d) { return d.count; })\n .attr('dx', 10) //moves text 10px (right) on the x axis\n .attr('dy', -10); //moves text -10px (up) on the y axis. These help move the text so it's not overlapping with the circles\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"//Observable Specific; don't use this exact code\nchart7 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(data).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale(d.month) + ',' + yScale(d.count) + ')'})\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`\n**8) Add [axes](https://github.com/d3/d3-axis/blob/master/README.md)**\n\nDefine an Xaxis for your scale with the ticks oriented on the bottom\n\\`\\`\\`\nconst xAxis = d3.axisBottom(xScale);\n\\`\\`\\`\n\nDefine a yAxis with your ticks oriented on the left.\n\\`\\`\\`\nconst yAxis = d3.axisLeft(yScale);\n\\`\\`\\`\n\nAppend a \\`\\`g\\`\\` element to your svg, and call your xAxis function. \n\\`\\`\\`\nconst xAxisGroup = svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .call(xAxis);\n\\`\\`\\`\n\nAppend a \\`\\`g\\`\\` element to your svg, and call your yAxis function. \n\\`\\`\\`\nconst yAxisGroup = svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis);\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"xAxis = d3.axisBottom(xScale);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"yAxis = d3.axisLeft(yScale);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"//Observable Specific; don't use this exact code\nchart8 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(data).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale(d.month) + ',' + yScale(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .call(xAxis);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`\n**9) Add Margins**\n\nThe margins are a problem, and they will always be. Here's [a great trick](https://bl.ocks.org/mbostock/3019563) we'll use on every chart we make from here on out. We will use this example as a guide for creating our margins.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"//Observable Specific; don't use this exact code\nmargin = ({top: 20, right: 40, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"//Observable Specific; don't use this exact code\nouterWidth = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"//Observable Specific; don't use this exact code\nouterHeight = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"//Observable Specific; don't use this exact code\ninnerWidth = outerWidth - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"//Observable Specific; don't use this exact code\ninnerHeight = outerHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"//Observable Specific; don't use this exact code\nxScale2 = d3.scaleLinear()\n .domain([1,12])\n .range([0 , innerWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"//Observable Specific; don't use this exact code\nyScale2 = d3.scaleLinear()\n // .domain(d3.extent(startData, function(d) { return d.count }))\n .domain([0, 500])\n // .range([0, height])\n .range([0, innerHeight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"xAxis2 = d3.axisBottom(xScale2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"yAxis2 = d3.axisLeft(yScale2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"//Observable Specific; don't use this exact code\nchart9 = {\n const SVG = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n var svg = SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(data).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale2(d.month) + ',' + yScale2(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .call(xAxis2);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis2);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return SVG.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"md`\n**10) What's wrong with our x axis?**\n\nThis probably isn't where we want our x axis. \n\n*DISCUSSION: Any idea why it's at the top by default?*\n\nLet's move it down using transform, translate.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"//Observable Specific; don't use this exact code\nchartt10 = {\n const SVG = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n var svg = SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(data).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale2(d.month) + ',' + yScale2(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .attr(\"transform\", \"translate(0,\" + innerHeight + \")\")\n .call(xAxis2);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis2);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return SVG.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`\n**11) What wrong with our y axis?**\n\nLet's talk about why this happens. \n\nGood thing there's a simple way to fix it! We only need to edit our yScale slightly to fix this.\n\n\\`\\`\\`\nconst yScale = d3.scaleLinear()\n .domain([0, 500])\n .range([innerHeight, 0])\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"//Observable Specific; don't use this exact code\nyScale3 = d3.scaleLinear()\n // .domain(d3.extent(startData, function(d) { return d.count }))\n .domain([0, 500])\n // .range([0, height])\n .range([innerHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"yAxis3 = d3.axisLeft(yScale3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"//Observable Specific; don't use this exact code\nchartt11 = {\n const SVG = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n var svg = SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(data).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale2(d.month) + ',' + yScale3(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .attr(\"transform\", \"translate(0,\" + innerHeight + \")\")\n .call(xAxis2);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis3);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return SVG.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"// const parseTime = d3.timeParse(\"%m/%Y\");\n\n// d3.csv(\"https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/data/ufo.csv\", function(d) {\n// return {\n// date: d.date,\n// count: d.count,\n// month: d.date.split('/')[0],\n// parsedDate: parseTime(d.date),\n// year: parseTime(d.date).getYear() + 1900\n// };\n// }).then(function(fullData) {\n// console.log('second', fullData);\n// });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"fullData = d3.csv(\"https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/data/ufo.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"parseTime = d3.timeParse(\"%m/%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"fullData.forEach(function(d) {\n d.count = +d.count;\n d.month = +d.date.split('/')[0];\n d.parsedDate = parseTime(d.date);\n d.year = parseTime(d.date).getYear() + 1900\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"fullData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"//Observable Specific; don't use this exact code\nchartt12 = {\n const SVG = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n var svg = SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(fullData).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale2(d.month) + ',' + yScale3(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .attr(\"transform\", \"translate(0,\" + innerHeight + \")\")\n .call(xAxis2);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis3);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return SVG.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`\n**13) Filter data**\n\nNow that we've loaded in all of the data, all of the data is showing up! For starters, let's filter out everything that isn't 2018. This is where the year value we created earlier comes in handy!\n\nLet's create a new veriable \\`\\`startData\\`\\` that only includes 2018 data, using Javascript's [ \\`\\`filter \\`\\`](https://alligator.io/js/filter-array-method/) method.\n \n \\`\\`\\`\nconst startData = fullData.filter(function(d) { return d.year == 2018; })\n \\`\\`\\`\n\n You'll then need to replace data thoughout the file with \\`\\`startData\\`\\` for it to update.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"md`\n**RUN THIS LINE**; for some reason it doesn't do so automatically.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"startData = fullData.filter(function(d) { return d.year == 2018; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"xScale3 = d3.scaleTime()\n // .domain([1,12])\n .domain(d3.extent(startData, function(d) { return d.parsedDate; }))\n .range([0, innerWidth]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"xAxis3 = d3.axisBottom(xScale3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"//Observable Specific; don't use this exact code\nchartt14 = {\n const SVG = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n var svg = SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(startData).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale3(d.parsedDate) + ',' + yScale3(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .attr(\"transform\", \"translate(0,\" + innerHeight + \")\")\n .call(xAxis3);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis3);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return SVG.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`\n**15) Gridlines**\n\n*x axis*\n\nLet's style the chart to match the image above, starting with gridlines. Things like [\\`\\`tickSize()\\`\\`](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSize) might help. For example, adding a gridline to the x axis would look like this:\n\n\\`\\`\\`\nconst xAxis = d3.axisBottom(xScale)\n .tickSize(-innerHeight);\n\\`\\`\\`\n\nIf you don't understand why I'm inputting the variable \\`\\`innerHeight\\`\\`, try inputting different numbers to see what happens.\n\n*y axis*\n\nNext, add gridlines to the y axis. Think about what variable would be the correct input here.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md`\n*Observable Code:*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"xAxis4 = d3.axisBottom(xScale3)\n .tickSize(-innerHeight);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"yAxis4 = d3.axisLeft(yScale3)\n .tickSize(-innerWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"//Observable Specific; don't use this exact code\nchartt15 = {\n const SVG = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n var svg = SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n \n const ufoGroup = svg.selectAll('.ufoGroup')\n .data(startData).enter().append('g') \n .attr('class', 'ufoGroup')\n .attr('transform', function(d) { return 'translate(' + xScale3(d.parsedDate) + ',' + yScale3(d.count) + ')'})\n \n svg.append(\"g\")\n .attr(\"class\", \"x axis\") //gives group the classes 'x' and 'axis'\n .attr(\"transform\", \"translate(0,\" + innerHeight + \")\")\n .call(xAxis4);\n \n svg.append(\"g\")\n .attr(\"class\", \"y axis\") //gives group the classes 'y' and 'axis'\n .call(yAxis4);\n \n ufoGroup.append('circle')\n .attr('class', 'ufoCircle')\n .attr('r', 10)\n\nufoGroup.append('text')\n .attr('class', 'ufoText')\n .attr('dx', 10)\n .attr('dy', -10)\n .text(function(d) { return d.count})\n\n return SVG.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`\n\n*Styling the Gridlines*\n\nNow, let's add some further styling, starting with the styling of the gridlines. Inside the \\`\\`