Creating our workspace
We create our wrapper and learn about d3 selection objects.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:19] So now we're ready to start updating our website. So if we go to our code and we go to this index.humma.mail file, normally if you're creating website, you'll just start editing the HTML, say adding divs or spans.
[00:20 - 00:30] This is a little bit different. We'll be creating our chart using JavaScript instead of just having a static HTML content.
[00:31 - 00:44] That's because we need to load up the data and create the elements on the page instead of being able to hard code them. So if we look at our index.humma.mail file, we'll see it's pretty bare bones.
[00:45 - 01:08] There's a head, there's a body, we're importing our chart.js JavaScript script so that we'll run when our page loads and we also have this div with an ID of wrapper. So when we're in our JavaScript file, we'll need something to hook onto to know where in our page we'll want to draw our chart.
[01:09 - 01:18] So we get to use something called d3.select. It's one of D3's methods and it takes a selector string.
[01:19 - 01:36] So if you've ever written CSS or jQuery, you might be familiar with this string . Basically, if the string starts with a hash, anything after that will, it will look for an ID of that name.
[01:37 - 01:47] So hash wrapper will look for anything with an ID of wrapper. If we instead start with a period, it would look for anything with a class of wrapper.
[01:48 - 01:59] And if we don't have any prefix, it will look for anything with that element name. So if we had just the string div, then it will look for any divs on the page.
[02:00 - 02:17] So knowing that we have this div with an ID of wrapper, let's go back to our JavaScript file and take out this log statement. And then let's create a variable with the name wrapper.
[02:18 - 02:27] And then use d3.select and pass in this string of our wrapper element. So that's a hash because it's an ID and then wrapper.
[02:28 - 02:37] So let's log out what are we getting here? So over here we can see this is a D3 selection object.
[02:38 - 02:45] And you'll become pretty familiar with these. It's a pretty core part of the D3 library.
[02:46 - 02:57] So this object will have a groups array that includes the element that you're targeting. So this is that wrapper element that we're looking for.
[02:58 - 03:12] And then it will also have a parents array that has all the parents of these targeted elements. This is an extension of the native object.
[03:13 - 03:24] So there are a bunch of different methods that we'll be able to use and we'll go into in a little bit more depth. But what's important here is that you're seeing the element that you're trying to target here.