Now that you have a good understanding of how selections, content and attributes, it's time to add some data to the mix. Data can be added in a number of ways, but in this video, learn the simplest way to add simple information using using the data method.
- [Instructor] Now that we have a good understanding of how selections and attributes work it's time to add some data to the mix. Now data can be added in a number of different ways. In this video I'm going to show you the simplest way to add information using the data method. The data method joins the current selection with some information that you provide. Now it takes an array of elements and the first piece of data in that array is going to be assigned to the first element in the selection and in the case of select all the second one is going to be assigned to the second element and any additional elements are going to be assigned to anything else in the selection.
Now you can also pass the data to a function and this is called a callback in java script and that function can inherit the data passed down to it and do something with it. In addition to the data within this function you also have access to an index which you can use as well as the data to manage what d3 does with the selection or the information that you get back. So let's take a look at how this works. Here we are with the script from the previous video so I'm going to clear this out. I'll leave the first selection part alone and in here what I want to do is access the day-high temperatures so we'll target day-high and temp and if you remember from my index at html I have different td's and inside those I have either a class of day-high or day-lows so we're targeting just the high temperatures and then we have an item right here with a class of temp which gives you just the number right here so we can just target those temperatures that are in the high dates.
So all this column and just the numbers, we don't need the degree or the farenheit. So what you could do here is use the data method and pass along an array of data. So I'm just going to type in one for right now so you can see what happens. And then once you have that data then you can create some sort of function that uses the data so I'm going to use the html method that we've used before and I'm going to pass this along to a callback. This means that I want to do something with that data.
This d is going to assume that there's some data before and d3 sort of remembers the last bit of data I have added with this data method so we don't have to do anything special in here and then what I can do is just return that data. So let's go ahead and save and take a look right here when I save this, this is going to be updated to 45 because this is the first element and I'm using select all. So it's returning an array of elements and it's just replacing the first one because it didn't find any others.
Let's go ahead and type in some additional information here. It's sort of pretty smart so now when I type all these you can see that it replaced all of them. if I type anything else, it's just sort of going to ignore the fact that I don't have another record for this and if I forget to type one in or I don't type one in then it just doesn't change that one. So it's really pretty smart and since this is the html method, I could have used text in here or any of the other methods like append or anything else.
they all understand this sort of callback method and in here if I want to because this is the html method I can go and add something else like an html tag and let's make this stuff look bold by adding a strong tag and as we save that you can see that they are all bold. Now it didn't do anything to this one because we didn't have data for that one. Now let's go ahead and add some data here for this other one and we can see that now it has modified it.
So in addition to the data, you can also receive an index and this is just a number that allows you to target an individual element in any particular order. So we could say something like if this is the first element, if the index happens to be 0, remember java script is 0 indexed then I want you to return this but I'm going to add a class and this is going to be a bootstrap class of text.
Mute it. Let's go ahead and save that. You can see that the number here is a little bit grayer and then if you want to we can add a style tag here and save font size. We'll make this 2rem and then I'm going to save that and now it makes this text a little bit bigger. So that's pretty cool and then what we can do is say otherwise, then go ahead and return this and then we can do some other checks in here.
We can say if the value of this data is greater than or equal to some number, so 76 sounds like, (typing yes maybe 77, sounds like it's getting a little warm for my taste. So if the value of that number is greater than 77 then I'm going to make this class here text-danger (typing) and then I'll just do another else here and than otherwise this return the text by itself.
so anything that's above 77 degrees, it's going to make red right here. so that's pretty cool; we can use not just the data but also the index and the other thing to remember that's important is that d3 is going to pass this data along and it's kind of smart. It sort of just replaces as many elements as you specify. If you don't specify an element it's just sort of going to ignore things and then it allows you to modify that data or control how that data is displayed with these two extra variables, the data as well as the index.
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data