Selections in D3.js

Luis Ramirez Jr
A free video tutorial from Luis Ramirez Jr
Professional Software Engineer Instructor
4.5 instructor rating • 2 courses • 14,447 students

Learn more from the full course

Learn and Understand D3.js for Data Visualization

Dive deep under the hood of D3.js. Learn core concepts and build stunning data visualizations using D3 version 6.x

10:04:40 of on-demand video • Updated May 2018

  • Create stunning data visualizations using D3 and SVG
  • Build interactive map visualizations with GeoJSON
  • Understand selections to manipulate the DOM using D3
  • Learn about layouts to build various charts and graphs
  • Create choropleth maps to display visual patterns on geographical locations.
  • Add transitions and animations to your graphs for a more interesting user experience
  • Use scales to help make your visuals work on any browser or device.
  • Understand the enter and exist modes in D3
  • Create responsive charts and graphs
English [Auto] Data when you hear that word what do you think it means. It's a very broad term that can mean a lot of things. What exactly is data in the programming and technology world. Data is almost everything. Images audio files text the browser you're using to watch this video is data. It's a bit hard to understand like that but that's what data generally is. Luckily when it comes to D-3 data is broken down to be more specific data to D-3 is just text and numbers. Generally speaking your data can come from four sources. You can hardcoded into your javascript files which is what you'll be doing in the beginning. Then there's data that comes from external sources. You can place your data in text files also known as TXI files. There's also Jasen which is a javascript object in its own file. Lastly there are spreadsheets or cxxviii files which is short for a comma separated values. All three of these file types can be used with D-3 easily. Data by itself can't really do anything by itself. When it comes to data visualisation there are two parts to it. There's the data itself which can be text or number based. For example the amount of dog owners in certain cities or how many students hold a certain great all of this would be considered your data. Then there's the second part which is the visual part for this course that would be TMLC assess the average user can't understand raw data or understand HVM LNC assess. That's where the challenge comes in combining these two parts together into something the user can understand. Hence the phrase data visualization D-3 is a library that bridges that gap and makes it easier for you to combine the data and the visual part together. Right now let's focus on learning how to make elements appear on the page. Later we'll learn how to add data into the mix. Right now I'm inside my editor and I have both the index of each DML and app. JS files open. I also have my server booted up with the page loaded to start things off. I'm going to add my code inside the javascript file when you loaded D-3 through the script tags you are provided an object called D-3. This object will contain all the properties and methods related to D-3. Usually the first thing you'll want to do is select an element. Doing that is very simple. The D-3 object has a method called select you simply pass in a CSSA selector of the element you'd like to grab. For example if you wanted to select an element with a certain ID then you would just pass in a hash tag followed by the ID name. So if I had a DIV tag with the ID of foo then I would passen hash foo for classes you would use a dot instead of a hash tag. Lastly if you just wanted to select a plain Cheema element then you would just pass in the element name. So if I wanted to select a paragraph then I would pass in P. Basically anything you can select with CSSA can be inputted here. This is one method of selecting an element. Another method is by using the select all method. This works the exact same way as the Select method except for one thing. The Select method will grab the first element it finds. For example if I passed in a paragraph tag the Miss will select the first paragraph element it finds. Even if we had multiple paragraph elements on the page this will still only grab the first one if you wanted to grab all the paragraph tags on the page then you should use the select all method which does this. So we have two methods here for selecting an element but I'm going to just stick with the Select method for now. I'm also going to change this to select the body element. We don't have a paragraph tag but we do have the body element which will work for now I'm going to create a variable named E. Which is short for elements and assign it to this value. Right below this I'm going to cause so long the element I want to see what exactly is going on internally. I'm going to boot up my server by going to view open in browser. Nothing is going on in the browser which is to be expected. Open the developer tools and view the console tap inside the console. We have an object being launched which is called selection a selection is a javascript object that represents an HMO element on the browser. This is very important to understand as selections are the most common types of objects you'll be working with. Essentially when you're working with SVGA elements they are referenced as a selection object in the resource section of this lecture. I provide a link to the D-3 selection repository. This page documents and contains all the code for the D-3 selection library. As I stated earlier D-3 has separated itself into various libraries for optimal performance. You don't have to include this as it's already part of the core. However if for whatever reason you want to use the selection library by itself then you can just download it here. So basically the selection library is a way to select and change h female elements. It's a very basic library. Feel free to read up on this page to learn more about it. We will discuss many of its features throughout the course. You will definitely get a lot of practice with it anyway. Let's go back to the page and view the console tab again. Inside this you'll see that the Selection object contains two properties called groups and parents. We won't be diving too much into these two as it's not required. This is really for D-3 and the browser to understand and use. Generally the parent's property contains the elements that the element we currently selected is contained in the groups property contains an array of the elements we selected. Let's look inside the groups property. Since we're using the Select method you will usually only see one element in the array which is fine by us. Eventually after going deep enough you'll find the element we selected with all the data applied to it. There's a lot going on here. All we did was write one line of code and all this was created for us. For the most part we don't have to worry about a lot of this as it's handled for us by. What I do want to highlight about this data is the element itself right here. The body tag is represented here for us. This is not a string. This is the actual element itself. If I were to hover my mouse over this element then you'll see my browser at the top highlighted for us. It will be represented by this orange red rectangle on the page. I can even click on this and I'll be taken to the elements tab of the developer tools the developer tools will automatically select the element we're selecting in javascript. This is one way to verify what element you're currently using. So basically D-3 has given us a way to reference the actual element on the page. If you've ever used J-20 and this concept should be familiar to you. Let's take a look what a list of elements looks like. Back inside my file I'm going to change the Select method to select all and change of body to the we don't have any paragraph tags inside the HVM document so this will return nothing. Once you have this changed go to the HVM help file and add a couple of paragraph tags. I'm going to add three. With all that setup let's refresh the page and check out the cons.. As usual we have the selection object being displayed and we have the groups array populated with all our elements. I added three paragraph tags so all see three paragraphs being selected. One difference you may notice is that D-3 will refer to this as a node list. You'll hear the word node a lot in tutorials and even in your code. Basically a node is the technical term for anything and everything in your document. That seems strange to hear but that's what it is. Your elements are notes the attributes inside them are nodes. Even the text inside your elements are nodes. So when you see the word node list it's basically saying a list of GMO elements. For the most part you don't have to worry about the technical words here as it's just for D-3 and the browser. Don't worry about it if you don't fully understand. All right I'm going to remove these paragraph tags and change my code back to its original state. I don't plan on using these at all and I want to keep everything simple for now. The last thing I want to show you is how to add elements. Usually when you select an element you want to add onto it adding another element is very simple. Right after selecting the element you can use the append method. This method is also a part of the D-3 selection library. Even though the Select method returns the selection we still have access to the D-3 library itself. This is taken care of for you it's the magic behind the D-3 library. This method accepts the name of the element you'd like to add. I'm going to keep it simple and pass in a paragraph tag. Let's refresh the page and see what we get. If you were to view the elements tab then you should see the p tag added inside the body tag. The append function is doing two things. It's creating the element and then it's adding it onto the current selection. In this case it would be the body tag. It's important to know that the element will be added inside the selection and at the very end. This is why the paragraph appears right below the script tags. Let's view the object now. You'll notice that the selection changes to the p tag rather than the body tag. This is to be expected. D-3 will shift its focus to the element you just added When you call the append method. Behind the scenes D-3 will call the Select method for you and pass on the element you just created by doing this. You are no longer manipulating or using the body element anymore. It's very important you understand this. Back inside my code you'll see that I'm changing all of this together. The idea of calling one method after the other is called chaining methods. This is something that D-3 heavily adopts. If you were to view any examples from D-3 then you'll see that there is a lot of chaining. This is something I want you to get used to. We'll be using a lot of chaining methods. In most cases a lot of methods return the selection you have. If you don't understand or don't know what a method returns then it's always a good idea to log the data or just check out the documentation. The theory is really well documented and will usually tell you what you can expect after calling a certain method. Of course you can break this chaining method by using variables. Let's say I wanted to have variables for both the body tag and paragraph tag. Well that's simple to do right after selecting the body tag I'm going to add a semi-colon. Then I'm going to create a new variable named P and set its value to l dot append like so writing it like this is the same way we had before. The only difference is that we now have two selections being stored. If you wanted to continue adding onto the body element then you can just reference it using the L element like we do in the second line if you wanted to add more stuff to the paragraph element then you can just reference it using the P variable. As the course progresses you'll see me chaining methods and sometimes breaking that chain. You can use either style but I usually like to mix them both together for readability and re-usability. It's all preference. I'm going to undo the changes and just go back to what we had before. There's no need to break down our code like this right now. Anyway that does it for now. There's actually a whole lot more you can do with selections but we'll explore that as the course progresses. I'll see you in the next lecture.