28:null 29:["$","title",null,{"children":"Learning D3.js - Part 2 - Now with data! | Patrick M. Dudas | Observable"}] 2e:T54e,md` There are 3 things we need to add to our code to connect the data to the shapes. 1. **.selectAll("circle")** - This is probably one of the most confusing parts of D3.js. I have spent many hours trying to figure how best to describe what is going on here. The basic concept is this; because we want to create circles based on our data, logically, we need to know how many circles do we originally have on our canvas and then compare this to our data. The best analogy I can come up with is imagine cooking with a friend and having that friend ask you to put 6 cloves of garlic into the bowl. A pretty standard question you might ask is "how many did you add already?" Because you don't want to add more than what is neccessary. This is what is going on here, you want to add 6 circles, so you need to ask, "how many do I have so far?" 2. **.data(drawingCircles)** - This is where we add the data. The function, or the way we bring in the data, is called **.data()** and our data is called **drawingCircles**. **REALLY IMPORTANT** that the data you bring in *has to be* an array. Hence why we spent all that time talking and learning about arrays 😃 3. **.join("circle")** - This last step tells d3.js what you want to add to our canvas. In this case, we want to add a circle. In our next notebook, we will discuss the other types we can use in D3.js.`2f:T40c,md` We did it! We made 6 circles! You might be wondering why you only see 1 circle here. Well, logically, if you draw 6 circles all on top of each other of the same radius. This is what you would see. Let's try using the data to make the circles unique. To do this, we need to change the way we use the **.attr()**. Specifically, use these in conjunction with our data to make unique circles based on our data. Here is an example: * .attr("r", 80) becomes .attr("r", (d,i) => d) this is called [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) or using an arrow to indicate a function or action taking place. You may notice that we are "shooting" two things -- the letter *d* and *i*. The *d* references the d(ata) and the *i* the i(ndex). So, if we want to change the radius based on the data, we would use the d value and if you wanted to use the index, you would use the i. Let's change the radius based on the d(ata) and the cx value based on the i(ndex).`30:[] 2c:{"id":"cdc8e5ad4cbf50b4","slug":"learning-d3-js-part-2","title":"Learning D3.js - Part 2 - Now with data!","thumbnail":"96afde235fa2a3ea2e495d9afd7682b0a5f64153f473b67e38d7d52054d7350c","access_level":"public","create_time":"$D2020-06-03T14:41:23.799Z","update_time":"$D2020-09-09T12:47:08.683Z","view_time":null,"first_public_time":"$D2020-06-08T14:23:19.920Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"4a43c9904123893c","login":"dudaspm","name":"Patrick M. Dudas","avatar_url":"https://avatars-next.observableusercontent.com/61f0e3a54b7fff3f565785a1eaeeec9b8a5f9cceca03cf7df7c7b94afac71c0e","tier":"starter_2024"},"version":354,"publish_version":354,"role":null,"authored":false,"authors":[{"type":"individual","id":"45342dad908d2c92","login":"dudaspm","name":"Patrick M. Dudas","avatar_url":"https://avatars-next.observableusercontent.com/61f0e3a54b7fff3f565785a1eaeeec9b8a5f9cceca03cf7df7c7b94afac71c0e","tier":null}],"members":[{"type":"individual","id":"45342dad908d2c92","login":"dudaspm","name":"Patrick M. Dudas","avatar_url":"https://avatars-next.observableusercontent.com/61f0e3a54b7fff3f565785a1eaeeec9b8a5f9cceca03cf7df7c7b94afac71c0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":{"id":"d9d7575d62559fe0","slug":"d3-in-observablehq","title":"D3 in ObservableHQ","owner":{"id":"4a43c9904123893c","login":"dudaspm","name":"Patrick M. Dudas"}},"type":"notebook","body":{"title":"Learning D3.js - Part 2 - Now with data!","cells":[{"id":0,"value":"md`# Learning D3.js - Part 2 - Now with data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Now with data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`Now that we know how to make a basic graph, we should focus on what makes D3 so special: its ability to connect data to visualizations. D3 actually stands for Data Driven Documents, meaning that data should inform the visual artifact or the document.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md` ### Introduction to Arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md` Before we begin, we first need to introduce a programming concept called arrays. If you are familiar to this concept, feel free to skip this section (skip to: [Arrays to Artwork](https://observablehq.com/d/cdc8e5ad4cbf50b4#ArraystoArtwork)). \n\nOK, assuming you are still here, let's talk about arrays. Arrays are basically lists. \"Lists of what?\", you may ask. Well lists of basically anything. Let's think about this example, a grocery list. First, we create our list.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"groceryList = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md` Note, what we did was create a variable or a named piece of code. Something that can vary (hence its name, variable). Variables must be one continous string of letters/numbers. So, instead of **grocery list**, I called it **groceryList**. Why the capitalization? because it makes it easier to separate out the words in the name. As in, **grocerylist** vs. **groceryList**. We have a fun name for this: camel case. $\"camel$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"html`File:CamelCase new.svg. (2020, April 15). Wikimedia Commons, the free media repository. Retrieved 15:25, June 3, 2020 from https://commons.wikimedia.org/w/index.php?title=File:CamelCase_new.svg&oldid=411544943.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md` Now to add to our array, we need to **push** some data into it. What, thats not how you usually put things in other things? By pushing it? OK, the naming is a bit weird, but we need to push data into our groceryList.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md` Let's put this all together. \n1. Create the array called groceryList\n2. Adding apples to our list 🍎\n3. Adding bananas to our list 🍌\n4. Adding coffee to our list ☕\n5. Return the array called groceryList`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"list = {\n var groceryList = []\n groceryList.push(\"apples\")\n groceryList.push(\"bananas\")\n groceryList.push(\"coffee\")\n return groceryList\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md` What we are storing in this list are something called strings. Strings refer to a string of letters or numbers with quoations around them. \n\nExample:\n\n**myName = \"Patrick\"**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md` ### Referencing parts of our array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`With our lists, we can access the data we put into them by using a numeric reference. Like saying, this is first on the list, second on the list, and so on. Unfortunately, this is where it gets a little weird. Where we expect to see that ordering would be 1, 2, 3, etc. it actually starts at 0. So, it's 0, 1, 2, etc...\n\nSo, to access let's say \"banana\". We would use position 1 or index 1 to access this element. Here is our array written out:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"html` $\"an$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"list[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md` I want to access \"apple\". `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"list[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md` Another way to create an array is just to list out the items or elements in array. \n\nHere is an example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"listOfThings = [\"item1\", 42, 3.14, [\"pb\",\"j\"]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md` If we look at our listOfThings, we can basically add whatever we want into the array. Even other arrays!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md` String of characters numbers and letters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"listOfThings[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md` Integers or whole numbers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"listOfThings[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md` Floats (Floating point numbers, real numbers, or numbers with a decimal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"listOfThings[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md` Lists of lists!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"listOfThings[3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"ArraystoArtwork = md`### Arrays to Artwork`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md` For our array to artwork, we will be working with some data. For this I will be using some integer (or whole numbers).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"drawingCircles = [3, 5, 5, 6, 15, 18]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"{\n var table = \"\"\n table+=\"\"\n table+=\"\"\n drawingCircles.forEach((d,i)=> table+=\"\")\n table+=\"

index	element
\"+i+\"	\"+d+\"

\" \n return html`${table}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md` Let's copy and paste our code from our previous notebook for creating a circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n canvas.append(\"circle\")\n .attr(\"cx\", 160)\n .attr(\"cy\", 280)\n .attr(\"r\", 80)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md` Now we need to add our data to our artwork, which will allow us to create 6 circles from our 6 data points.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`To simplify these steps, let's create a 3 piece set of actions:\n1. Observe (the original scene) - **.selectAll()**\n2. Collect (the data we need to update) - **.data()**\n3. Update (the shape with this data) - **.join()**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n // Observe\n canvas.selectAll(\"circle\")\n // Collect\n .data(drawingCircles)\n // Update\n .join(\"circle\")\n .attr(\"cx\", 160)\n .attr(\"cy\", 280)\n .attr(\"r\", 80)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`Also, let's show this using two different methods.\n\n1. using a tradition JavaScript function\n\n2. using an arrow function `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`#### Traditional JavaScript function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n\n // Observe\n canvas.selectAll(\"circle\")\n // Collect\n .data(drawingCircles)\n // Update\n .join(\"circle\")\n .attr(\"cx\", \n function(d,i) {\n return i*20\n }\n )\n .attr(\"cy\", 280)\n .attr(\"r\",\n function(d,i) {\n return d\n }\n )\n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`#### Arrow JavaScript function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n // Observe\n canvas.selectAll(\"circle\")\n // Collect\n .data(drawingCircles)\n // Update\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*20)\n .attr(\"cy\", 280)\n .attr(\"r\", (d,i)=> d)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md` As you can see, I used the i(ndex) and multiplied it by 20 to help create more spacing. This shows you the power of D3.js, the data is dictating the drawing (maybe they should use this for D3 acronym instead 😆).\n\nKnowing this, let's making a drawing that looks like a plot of points with a positive slope (meaning the points are heading up as you move left to right.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> i*20)\n .attr(\"r\", (d,i)=> d)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`So, in this example, the points are heading down the hill. Remember from before, the (0,0) position is in the top-left, not the bottom-left. With this in mind, we can use the **height** to draw these.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"{\n const width = 600\n const height = 400\n const canvas = d3.select(DOM.svg(width, height))\n \n canvas.selectAll(\"circle\")\n .data(drawingCircles)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i*30)\n .attr(\"cy\", (d,i)=> height - (i*20))\n .attr(\"r\", (d,i)=> d)\n \n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md` Your turn: Create a new array with random numbers in it (how many and the order does not matter). Then create circles with that array.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"yourCircles = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"{\n // define the canvas\n \n // remember 1) Observe 2) Collect 3) Update\n // Observe (no circles on the canvas)\n \n // Collect (add yourCircles data)\n \n // Update (update the canvas with your data)\n \n // return your canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"