Placeholder Image

Subtitles section Play video

  • everyone.

  • Thanks so much for coming out today.

  • I'm gonna walk you guys through.

  • Ah, quick exercise with the three.

  • D three is a Java script library.

  • So it isn't a language itself.

  • It's actually using native javascript.

  • It was all built by one human being.

  • He's a very cool guy who was really good at this.

  • And his whole idea was that he wanted to put together a library that would, in relatively few lines of code, give you the ability to make really interesting, interactive and adaptable data visualizations.

  • So a lot of what we're going to be dealing with today is, um, what it's like to load in data what it's like to do that synchronous levers is a synchronously.

  • And then we're going to build pretty simple bar graph here, where we're gonna have some clicking capability, and all of this is being generated dynamically.

  • So I'm gonna step you guys through the code, so you have an idea of what this looks like.

  • Um, feel free to stop me at any point.

  • But a few things that I do want to mention right off the bat is that in order to get any of this to work, you are gonna need a Web server up and running.

  • So just keep that in mind.

  • The whole reason that any of this is running is because I have a terminal window here where I've already, like, typed in http server and this is all running.

  • Um, good to go before before I start looking a code.

  • Awesome.

  • Great.

  • So first thing first is we're gonna talk about index dot html.

  • You don't have to do this and index dot html.

  • Since this is a pretty simple website with only one page, I decided to put it in Index.

  • But you could, of course, have data visualizations on any of your websites pages.

  • So we're gonna have some typical boilerplate code here where we see things like the meta char set, the meta names the title.

  • And then immediately I start, including things like bootstrap CSS, which I use a little bit of, Um, here I've made une p I call to Google to get some fancy fonts.

  • This is absolutely not d three related, and then I've included some of my own style sheets.

  • These air normal things you can do.

  • You don't have to do have absolutely nothing to do with D three itself.

  • It's more the stuff that we do in the body and that we included the bottom of the body.

  • That is actually D three specific where even here, I've just sort of configured the page so that I have a differ, my header.

  • And then I have a div where most of my visualizations and most of the interesting components of this page or going to exist.

  • So let's talk about that a little bit.

  • I'm using the bootstrap container class here, which basically lets me resize is I would like to.

  • So if you ever, like, click and drag the, um, the Web page, your data visualizations will resize accordingly, so you don't end up with things that are like awkwardly cut off, for that starts to look a little bit weird.

  • This is more of an aesthetic choice, as opposed to a functional choice, but it ends up being a nice way to do this on dhe when you're using anything within the container, the next class that you have to have his row.

  • If you're ever interested in looking any of this up, you can Google bootstrap grid layout and you'll immediately get documentation for this.

  • Um and what's important to know about the grid layout is that the Web page is split into 12 columns, so you'll see here that I actually have to dibs each taking up six columns.

  • Um, this is really just so that I could get a nice effect of splitting the page in half between the data visualization itself on any of the information that I was going to show.

  • You could absolutely configure this differently.

  • You could have your data visualization take up the entire width of the screen.

  • You could have a take up considerably less of the screen.

  • But for my purposes, this is what I what I wanted to dio and what I really want to point out is that I have made very judicious use of ideas here, where within d three, we're going to have the capability to similar to native JavaScript actually select components out of the Dom out of the document object model.

  • And the easiest way to do that is in fact, to do it by I d.

  • So get very accustomed to using ideas and try to keep in mind that the ideas that you use should be descriptive enough that you know, you either don't forget them or when you're actually writing your Java script.

  • It's easy enough to know what you're actually referring to within the HTML itself.

  • So you'll notice here.

  • I actually have two columns that are happening.

  • One where I've said Okay, I'm gonna actually display the chart and one where I'm going to display the information on within the information.

  • I said, okay, I'm gonna have a header, and then I have this other div that I have said is going to be albums.

  • The other really important thing here that is now actually D three specific is that I need to be sure to include the D three Java script library if I don't include this.

  • We literally aren't working with D three at this point.

  • In order to find this file, you can literally just Google d three JavaScript and you will find a link in order to include it in a script tag.

  • I always highly recommend whenever you can, following that link that you would otherwise just include, and actually copying and pasting all of that source code into a file because that way.

  • You never have to deal with lead and see if your connection is slow.

  • And now you're JavaScript.

  • Libraries aren't running.

  • So in fact, this file exists natively within my directory here so that I don't have to deal with any of these issues of, you know, poor connection on.

  • Now my visualizations aren't running and you know, of course I have my bootstrap Js.

  • I'm gonna use a little bit of Jake weary, which I think you all saw in one of the most recent P sets.

  • I'll point it out, but it's really a very small use.

  • And then finally, I'm going to use Q, which is just another job script library.

  • And the whole purpose of this is to make sure that my data gets loaded properly.

  • So having looked now at the Java script itself, I've also included one more JavaScript file, which is the file that I have actually written and where any of the logic that I have done for my project will actually exist for your projects.

  • They might be a little more complicated where in fact, you might have several JavaScript files that are all interacting with each other.

  • Always be sure that you're including your JavaScript files.

  • Um, it's one of my favorite debugging stories where I'm like Well, I've written all of this code.

  • Nothing is working.

  • Nothing is showing up.

  • Why isn't it showing up?

  • And it's because I've forgotten to include the file.

  • So it's always good to keep this mental checklist of, like, how I included the files that I need to include.

  • So if we hop over to main dot Js, first thing I really want to talk about is this idea of asynchronous javascript loading where in fact, I'm going to be loading data sets that again exist natively on my computer.

  • Um, and just to give you guys a quick idea of what those look like Oh, goodness.

  • Well, here, we can actually open them up over here.

  • So, you see, I have two data sets here.

  • I'm just gonna go ahead and open the artist's data set.

  • So all of this code are all of the state or rather is coming out of the sequel.

  • Lecture s so some of it should look vaguely familiar because it came out of the sequel lecture.

  • I actually ended up having to treat my data a little bit differently to make things line up properly.

  • You'll remember that in the sequel lecture, David was talking about ways to make your database more efficient on, and as a result, rather than store an artist name, he would instead you store in interview representing an artist I d which is a perfectly valid way to do this on.

  • It was actually a very good opportunity for me to show you guys how to use multiple data sets that actually perhaps interact with each other.

  • But this is just one of the two data sets.

  • You'll notice that I've saved it in a C S V format.

  • Um, this was out of convenience more than anything you could absolutely separate.

  • Save it as a like tab.

  • Separated values, which is similar to A C S V but uses tabs, is the limiters.

  • Just be consistent with what you're using.

  • And keep in mind that whatever type you used to save your data is going to correspond directly to the methods that you're going to be using to actually load that data.

  • So if we look at this step here, this is probably one of the most important steps that we're going to have Where, In essence, I've said Okay.

  • For each one of these data sets, I want you to call d three dot c s V on it.

  • What d three dot c s v actually does is it calls a method that literally reads in your C S V and saves it as Honore of JavaScript objects where each one of the objects And I'll show this to you in the developer tools in chrome in a second.

  • But each one of the objects is going to have a key that is artist I D.

  • And a key that is artist.

  • And so each one of these lines here is going to turn into its own JavaScript object.

  • So that's kind of the direct, um, the direct mapping that's happening there.

  • So I said, OK for each data set, Please load it in.

  • And it's kind of this differ.

  • That is most interesting where we've said once you load this one in wait to do anything else, but please also load in the next one.

  • And finally, this await line is the most important.

  • Where we've said Okay, once both of these differ statements are done meaning once you've loaded in both of those data sets.

  • Now please call this other function.

  • And what ends up happening here is this was just a function that I wrote you could have done.

  • This is an anonymous function, but it would start to get pretty ugly pretty quickly.

  • And so I went ahead and just gave it a name for simplicity's sake.

  • But what Q ends up doing and Q is coming out of this huge Java script library, it says, Okay, whatever function you pass to await needs to take at least one argument, but it's going to be one plus, however many differs you have.

  • So you'll notice here that artists dot C S V is going to immediately give US artists data.

  • I could have called this whatever I wanted.

  • I could have called it food.

  • I could have called it Lama.

  • Um, it's just most convenient here to call it artist data so that it is clear what I'm actually loaded in.

  • And here I've called this alb data because I was lazy and didn't want to type album.

  • But I could have easily done that.

  • The order here matters right.

  • The second differ is going to ah correspond to this third argument here.

  • This first error is an error that potentially might be thrown by either one of these two functions.

  • Right.

  • Either one of these two calls to D three dot CSP.

  • If, for example, something was wrong in opening your CSS file or if it wasn't able to get through the whole file, it will actually return an error.

  • And so the first thing you want to do is make sure that you have actually checked the error.

  • If that error exists, we're gonna go ahead and return as opposed to just console log.

  • We're returning here so that the entire program does not continue running.

  • But we're gonna constant log the error so that we as developers can try to troubleshoot exactly what happened.

  • But assuming that that didn't happen, let's step through the rest of the code.

  • So the first thing I said is Okay, I, um I'm immediately.

  • I'm going to have a problem because my data sets don't make a lot of sense on, in fact, what I'm going to do here as I'm going to go ahead and comment in this consul log which is going to show us everything that's in album data, and I'm going to go ahead and put in another consul log, which is going to show us herd ist data artist.

  • This is a cute trick.

  • This is the print ft bugging of Java script.

  • I highly recommend using it.

  • Um, nothing is more frustrating than not knowing what your data looks like because it's hard to make logic to manipulate your data.

  • So the first thing I always like to dio is actually figure out.

  • What does my data look like?

  • So I always Consul log my data as soon as I've loaded it in.

  • So, in fact, if I save this and make sure that my server is still running, I go back over here, refresh this page and then I'm going to go ahead on hope that the Internet is working and in fact, you see right away that I have an error.

  • So this is why the council is super helpful.

  • Um, first things first is just understanding how to read what the Consul errors are telling you.

  • You'll see here the line where the error occurred, So I I know I should be looking at main Js lying 22 where it has said to me, Okay, you've referred to something called album data and it's not defined.

  • So in fact, if I go back to Line 22 I can immediately say Oh yeah, I didn't call it album data.

  • I called it, helped data, right?

  • I could go back, save it, refresh the page again and you'll notice that if you have no errors, things will look good.

  • If you have errors, things will not load.

  • So this is always a good thing to do.

  • So these two things here are actually coming immediately out of those consul log statements that I did, and in fact, let me make this a little bit bigger for us.

  • So album data we see that it has 347 items.

  • Remember, I mentioned that it was an array of JavaScript objects.

  • One way you can immediately see that is that this first bracket here is in fact, a square bracket rate.

  • This tells me that it's an array similar to an array in python or listing python or in a rain.

  • See if you click this little drop down arrow.

  • It does this nice thing where it's segments it for you because otherwise it gets kind of impossible to read and to see you can drop down again and you can immediately see OK, this is what my data looks like.

  • Great.

  • Each one of these objects has this album I D Key and has this title key has this artist I d key.

  • All right, this will be good for me to know, as I'm writing loops to liberate through this data.

  • By the same token, I can look at the artist data and I can say, OK, artist data all has an i.

  • D.

  • And it has an artist that it corresponds to.

  • I happen to know from the data that I loaded in that an artist idea of one here corresponds to a same artist.

  • I d of one over here, right?

  • So for those about to rock, we salute you.

  • I know that this is supposed to be in the C.

  • D.

  • C.

  • Song or a CDC album, right?

  • So keeping that in mind, I said to myself, Ok, what would be an interesting thing to visualize once you've loaded in your data on Once you've decided what your data should be.

  • The next question you should really be asking is, what am I trying to visualize?

  • Because that's going to dictate how you're going to run through your your code.

  • And so what I decided to visualize was actually just the number of albums that were produced by a particular artist.

  • So you noticed here on my Y axis, I've got just a number of albums on on my X axis.

  • I actually have the name of the artist that this corresponds to.

  • I've added a little bit of extra functionality that if you click on any of the bars, you can actually see a list of these albums.

  • We'll talk about that in a second.

  • But keeping that in mind, I said to myself, Okay, I'm going to need some way to count the number of times an artist I d occurs, given the number of albums, right?

  • So the first thing I said to myself is, Okay, I'm going to need to make some kind of mapping between an artist I d and the actual name of the artist.

  • So what I did was I did the following.

  • I said, Okay, I'm going to make an artist map, which is itself going to be just a javascript object.

  • Or you can think of this more like a dictionary.

  • Which is kind of how I was envisioning it as I wrote this code and the idea here is that we're going to iterated through all of the artist data and for each one of the JavaScript objects in the artist data rate.

  • So for each object that has an artist, I d.

  • And it has an artist name, we're going to say, Okay, here's that individual object we're going to say OK, within artist map at the index that corresponds to that I d.

  • Please save the name of that artist.

  • And this was just to make a quick, easy mapping so that I could refer to these objects later.

  • The more interesting stuff actually happens in this d three dot nest.

  • So what d three dot nest does is that it says to you Okay, I'm going to literate all through all of this data for you on what I'm going to do is I'm going to build a brand new object where the keys are gorgeous, are going to correspond to something that already came out of your data and the values or the leaves as they like to call it, are going to correspond to something else out of your data.

  • So what I said here is OK, I want account by artist I D.

  • And the reason I wanted account by artist I d.

  • Was because I had already made this mapping by artist I d.

  • So that I could easily index into it.

  • So I said OK for each one of the pieces of data within my album data.

  • So this entries actually tells you which data you're going to be reading through.

  • I've said Okay, the keys.

  • Gore is going to correspond to that particular objects artist I d.

  • I've then said Okay, I want you to roll up all of the leaves.

  • I think this is one of the most confusing lines in this code.

  • So let me just unpack it a little bit for you and I've left a code.

  • I've left a comment just to be a little more clear.

  • But what we're basically saying here is what role it does is that it searches through every single one of the items in your greater data set, and it finds the ones that match the particular key.

  • So, in fact, what leaves is if I woulda consul dot log it leaves is actually an array of objects that match that key.

  • You can see then why that would be helpful for me, because what I'm really trying to do is count the number of objects that correspond to a particular artist.

  • I d.

  • Therefore, by getting the length of that array, which is literally the number of objects that have that artist i d.

  • This is how I have gone through and actually counted.

  • How many things exist for this artist?

  • The real question here is Athena.

  • Was this the only way to do it?

  • And the answer to that is no.

  • In fact, with the three, there's a lot of ways that you can do a lot of the same operations.

  • But in fact, this is probably the most concise way to do it all be.

  • It may be a little bit unclear if you're just using it for the first time.

  • That being said D three actually has very good documentation, And so if on your computer now you were to Google d three dot nest example if you see anything from bl 3.0.0 c k.

  • Something like that.

  • I look at it and I read blocks.

  • So if you see anything from like blocks dot award, that's great examples of visualizations that people have done that use different functionality out of d three.

  • I highly recommend, uh, taking a look at it.

  • So now I have this count by artist I d.

  • And I said to myself, Great, I have all of this information and I have said All right, I probably want to make a bar graph on because I want to make a bar graph.

  • What's important to me is to make sure that my data is arranged in such a way that it's going to be easy to display it.

  • So, in fact, the next thing that I do is an in place sort, um, in place here, meaning that I actually call this function on this, um, this array that I've been given and it will sort it in place for me.

  • The way sort works is this follows Sort expects an anonymous function, and in fact, what source hands that anonymous function is to side by side objects.

  • So we have object a an object, be It could be that object.

  • A is greater than object to be But in order to sort things in ascending order, what you really want is the difference between object a an object Be.

  • But keep in mind that object a really is an object and as a result, it has multiple keys.

  • The thing that I was interested in here was value.

  • And the reason I knew it was value.

  • Uh, so, for example, like, let's say I didn't know what I was going to get out of this count by artist.

  • I d I could go ahead and say, Okay, I'm gonna Consul, don't log it right.

  • And this is just a cute trick I like to use for consul dot log where you could actually label the thing that you're about to log so that you can find it easily in the console so I can go ahead and save.

  • Go ahead and refresh, and I can say Okay, like, what did I get back?

  • Computer.

  • Come on, you can do it.

  • All right, so here it is.

  • This artist idea count, I can see immediately again that this first character here was a bracket.

  • So I know it's gonna be, you know, right.

  • And I can see that what I end up with is a bunch of objects where they have the key key and the other key value where value is actually the number of objects that were counted for this particular artist, I d.

  • This was the only way for me to know that when I was sorting, I should be looking at the value field and not some other field.

  • I literally had to pull up the data and look at it in order to figure this out.

  • There is nothing wrong with doing that.

  • And in fact, I encourage you to do that.

  • So once I went ahead and sorted, I said, Okay, just for, like, display purposes here, I'm actually going to cut down some of the data we had because we have, like, 204 items of data and that just, like, gets a little bit ugly to display.

  • There are ways to get around this, but just like to make this a tractable example, I said Okay, I'm gonna just get rid of everything from index zero to index 1 80 this was perfectly arbitrary.

  • You absolutely don't have to do this, but it just simplified a little bit of this process.

  • And then finally, what I said was Okay, now that I have loaded all of my data and now that I have cleaned my data in a way that I am happy with, I can go ahead and call a new function that is actually going to create visual ization.

  • It's really important that you never try to create the visualization before you've loaded all of your data.

  • Because, in fact, the way JAVASCRIPT works is that it might try to create your visualization before your data has finished loading.

  • As a result, if your data doesn't yet exist, your visualization is going to fail.

  • And if it fails, you might have to refresh the page several 100 times until you get lucky.

  • That may be your data loads first and loads fast enough.

  • So in fact, you'll notice here that I never tried to say, Okay, create the visualization until I've made sure that everything has been loaded in.

  • This is super important.

  • Um, easier ways to do this include actually, just calling d three dot C s V and within that, pass it an anonymous function and then do all of your data creation within d three dot C s V.

  • We can look at an example of that later, if that's confusing, but this is just one way that you could do it.

  • So now I'm actually going to talk about the visualization itself.

  • But before I move on any questions?

  • Yeah.

  • This Hold this.

  • Yes.

  • So the question here was just to give another quick example of how d three dot nest works.

  • So d three dot nest is going to say I'm going to build you a new array of objects and the array of objects that I'm going to give you is going to have a key.

  • And it's going to have a value it wants to know as it's searching through your data.

  • What key do I want to be matching against?

  • And so what it does is it says okay.

  • As I'm iterating through your data, I'm going to look at a particular date.

  • Um and I am going to get its artist I d.

  • And that is what I'm going to use as the key here.

  • Right?

  • Roll up is kind of the confusing part where roll up kind of Does this like search and count for you where it says Okay, I am holding this key.

  • Let's say the key is three and it's going to look through every single one of the objects within this album data.

  • Right?

  • And it's going to say, Does this object match this key?

  • If yes, I'm going to stick it into an array.

  • Does this object match if no, I'm gonna discard it.

  • Does this one match?

  • Yes.

  • No.

  • Yes.

  • No.

  • And so at the end of the day, what roll up actually passes to this function is an array of all of the objects that matched that key.

  • Another way to think of this is that each one of these album data actually had an artist.

  • I d right.

  • So if this artist I d matched the current key that I was holding, this would be considered a match.

  • Once I have that array, I can do whatever I want without array, but because what I am interested in is actually the count.

  • I know that by taking the length of the array, that is really the same as saying how many albums corresponded to one artist and this final thing here the order, I always think, is a little bit weird.

  • But entries is actually where you specify the data set that you want to liberate through.

  • Did that answer your question?

  • Great.

  • Anything else before I move on?

  • Okay, great.

  • All right, let's talk about the visualization.

  • So there are fancier ways to do visualizations and less fancy ways.

  • Um, I always like to start by initializing a margin object where you'll notice that there's actually like a nice little bit of space here along the side.

  • And there's some space over here.

  • And, like admittedly, this name was the world's longest artist name.

  • And so it is taking up more space than it should be.

  • But there's actually a little bit of space wherein you can actually see that my visualization exists within this nice, confined rectangle.

  • The way I've configured that is through this margin object, where I can now, like calculate the within the size of my actual visualization itself by just changing values in one place, as opposed to changing values in a bunch of different places.

  • So this was really more of a convenience thing more than anything, but I highly recommend using it.

  • So this is a little bit of Jake weary that I said I would point out to you guys where, in essence, I've said Okay, I don't want to hard code the width and the height of my visualization.

  • In fact, I want my visualization to conform to whatever the width and the height of the element that it exists in is So that's a fancy way of saying if I've already said that I'm going to put my visualization in a box that is 500 by 600 pixels.

  • I'm once in essence, what I want to happen here Is this with Thio equal 500 pixels and this height to equal 600 pixels or the other way around.

  • Quite remember which way I said it.

  • Um, And in order to do that, I've said, Okay, Jake weary.

  • Please get me the HTML element that matches this I d.

  • We're noticed that I've actually passed parent element in here.

  • So you actually, it's worth noting that this creative is could be used multiple times, depending on the data that I'm going to pass.

  • So that's worth noting but notice that I said Okay, this visualization is going to exist in the chart display column, which you'll remember was the idea of this particular def here.

  • Right.

  • So this is why ideas We're gonna be super important.

  • All right, So please get me the width of that and then go ahead and subtract this margin that I've gotten you both for the left on the right where we said, OK, I know that this full with is gonna be this whole box.

  • In fact, I want to constrain things a little bit in case my visualization has like, struggling items because I don't want those to end up either off of the screen or out of the parent element.

  • So it's absolutely worth subtracting margins here, and you do the same thing for the height.

  • The other thing worth noting here is S P G's.

  • If you ever start reading about t three, you're going to see this all over the place.

  • SPG um stands for scalable vector graphics, which is really just a fancy way of saying that a bunch of people got together and said, Yeah, graphics on the Internet are really hard because the minute you try to re scale them, they lose all of their resolution.

  • Let's build something that isn't going to lose its resolution, no matter how big or how small you've made it.

  • And that is exactly what an SPG is.

  • D three expects S P G's.

  • It will only ever upend objects to S P G's.

  • And so, as a result, the first thing you will always find yourself doing whenever you deal with D three is you will find yourself making what you can think of is the canvas SPG.

  • This is the SPG onto which all of your particular objects that actually build up your visualization are going to end up.

  • So if we look at this, this d three dot select is really analogous to our document dot query selector where we've said Okay with D three, go ahead and find me the parent element.

  • And the first thing that I want you to do is actually append to it.

  • An SPG, and we'll look at the what the HTML looks like for this in a second, where now D three really just likes chain ings and tax where we said, OK, get me the parent element and a pendant spg to it.

  • From this point, they're like, Pointer that I'm holding correspondence not to the parent element, but actually to the SPG itself.

  • And I said OK for this spg that I'm holding.

  • Please give it the attributes of width and I've given a calculation for the width.

  • Please give it the attributes of height and I've given a calculation for height and then appended to it.

  • This thing called a g group a G group is really just a nicer way, Andy three to start building layers on top of layers so that if you want to, for example, apply styling to a bunch of things.

  • If they're all on the same layer, you can apply the styling very easily.

  • You could absolutely have done this without using a G group, but this was more.

  • Is it kind of just like the rule of thumb that people like to use.

  • And finally, what I've said is okay, once you've upended this SPG, go ahead and transform it, which is really the same as saying okay, I'm going to actually shift it somewhere on the page.

  • And the shift that I want to do is ah horizontal and vertical translate where I've said, OK, translate it.

  • Ah, a little bit to the left.

  • This money are actually rather translated to the right, this many pixels so that I get my margin and translate it down this many pixels.

  • Okay, All right, Question on SPG.

  • You don't have to understand what it is as long as you understand that it's a canvas at the end of the day, that's all.

  • This is where if you think about it, um, this white block here you can't actually see but is basically my SPG and everything that I've appended to it are just other elements that I have put onto that canvas.

  • If that canvas wasn't there, I couldn't have put any of these elements on here.

  • The next thing you should notice is that really a bar graph is just a bunch of rectangles, right?

  • And that is kind of exactly how D three is going to treat visualizations where d three is going to say, Well, you know, like a line graph is really just a couple of circles with a line running through it or a bar graph is really just a bunch of rectangles of varying heights and wits.

  • And so when we're going to be making this visualization were going to say, OK, I know that I need a bunch of rectangles and I know that I need the multi fit right And this is where this idea of scaling starts to come into play.

  • But scaling is really hard, especially if you don't know off the bat how many pieces of data you have, what the men in Macs values of those data are and like, remember that we didn't hard code the within the height.

  • So, in fact, your total scale could be changing, depending on what your parent element is.

  • So D three has been really nice, and it has actually come up with thes scale generators that let you give it a few parameters, and it will actually generate the scale for you.

  • It takes out all of the hard thinking, so there's several different kinds of skills that you can use.

  • Linear scales are, I think, the ones that come most easily to people because it's literally, you know, take this value in this domain and squish it to fit into the domain of like my wit through my height or the range of my door of my height.

  • My wit.

  • Orginal skills are a little bit more tricky, Andy three, but it's worth knowing how to use them.

  • If you ever want to visualize something that isn't numeric, where orginal scales will do, the following orginal scales will figure out for you.

  • How many items you need to display.

  • It will figure out how wide each one of those display items need to be.

  • So in this case, our bar with and it will figure out the space that needs to exist between each of the bars to make all of this work.

  • So you'll notice here that I've said Okay, the range of the values that I need you to output are going to be from zero to my width.

  • And that makes sense right where I said, This is going to be the scale for my X axis.

  • And so I know that my X axis is going to run from the zero with pixel to the pixel, representing my wit.

  • On the other hand, I've said okay between each of the blocks, go ahead and give me half a pixel worth of padding just to make it look a little bit prettier.

  • I could make this figure.

  • I could make this smaller.

  • This is really just up to taste.

  • And finally, it's the domain that kind of looks a little bit ugly.

  • Ranges are the values that the scale is goingto output, Given a value on the domain are all of the values that your scale should expect to get When it comes to scales, the domain is always going to come from your data itself.

  • So what we end up doing is the following.

  • I've said Okay, D three.

  • Please do me a favor and apply a function to every single one of the items in my count data where the function that I want you to apply to an individual item is going to do the following.

  • It's going to go ahead and figure out what the name of that artist is using my artist math and keep in mind what I've done here is I've said okay.

  • Datum itself is going to be of the form key value.

  • And I know that the key is going to correspond to some artist.

  • I d knowing that I can say okay if I give my artist math and artist I d What it will return to me is actually the name of the artist.

  • So I've gone ahead and said, OK, get me all of the names of the artists that correspond to all of the data, right?

  • That's exactly what this is done.

  • And it has actually built me JavaScript object.

  • But really, what I'm interested in here is all of the possible artist names that I could have gotten.

  • And so, by doing that by asking it, Okay, you're a Java script object.

  • Please tell me what all of your keys are.

  • I have, in essence, said to domain Okay, here is an array of every single possible artist name that you could ever get.

  • How it does the math to figure out which artist name goes where how wide the bars have to be is all abstracted away.

  • It's not important for you to know how it doesn't simply that it does it, quite frankly, scales and axes or some of the hardest parts to debug Indy three.

  • So don't feel bad if those aren't working quite the way you want them to right away.

  • There's a lot of really great examples online.

  • The linear scale is a little bit easier where we've said Okay, all of the items that you're going to output are going to be in the range from the height minus the margin and all the way to the margin of the top.

  • What's really important to note in terms of graphics is that in fact, while your height, or rather while you're with, actually moves in the direction that you expected to sew like zero starting on the left hand side and the greater numbers moving to the right height is a little bit different.

  • In fact, the Y axis is inverted, so zero for the Y axis starts in the top left hand corner and moves down, so the greater values are actually further down within the graphic.

  • Why did they do this?

  • I'm not totally sure, but it can be a pain.

  • As a result, you'll often find yourself reversing heights so that the values that you're getting out are actually corresponding, not to the height itself.

  • But the difference between the height that you've gotten for a bar and the total height of the visualization, which you can kind of see is would correspond to the height of a bar that we would be thinking off.

  • That's the only thing I want to know.

  • I want to note there.

  • The other thing I'll note here is that I needed the y scale to know what its maximum value is going to be.

  • And so, as a result, D three gives me on max function, which literally iterated through every single item in the county data, and it returns like an array, basically of all of the values and it picks the highest value.

  • Could I have done this another way?

  • Absolutely.

  • But since D three gives me these tools, you should absolutely use them.

  • Okay?

  • The scales themselves actually take care of the math, but does not take care of any of the visuals that you see.

  • And so, as a result, we actually have to set up the visuals ourselves.

  • Um, again, D three gives you very easy methods for setting up axes.

  • Where if I want an access on the left, I can literally just call access left.

  • If I wanted access on the bottom, I can go ahead and call access on the bottom.

  • It'll then ask you.

  • Okay?

  • What is the scaling I should use.

  • And the nice thing is you can actually just pass it the new scale that you have just made right?

  • So this is quick and easy.

  • Once you figured out the math for the scales, the rest kind of comes naturally.

  • So we've said, Okay, here's an object that is going to correspond to my access bottom.

  • But it's not yet on the SPG.

  • And this is where we start to see this first instance of this method upend where upend is going to say, OK, tell me exactly what I'm going to upend.

  • And when I append on that thing, tell me the attributes that it has to have again.

  • By convention, we tend to upend axes to G groups.

  • The reason we do this is that if we ever want to add color to our axes, make things smaller on the axis, rotate the axis, it's much easier to do that within a G group than it is to actually try to find the pointer to the access itself once it's already on the canvas.

  • Um, and there's this important method here, specifically for axes called, uh named call, where, in essence, you've said, okay, I want youto appended to a G group.

  • I want you to give it these classes so that I can style it later.

  • And now I actually want you to call this method and make my access.

  • This takes care of everything for me.

  • Once you've used this call, operator, your axes just magically appear okay.

  • Same thing goes for the X axis where I've done a little bit of fancy or things.

  • One thing I do want to point out is that in fact, everything wanted to start like a little funky looking, um, where all of the names of the artists were actually horizontal.

  • And because there were so many artists, it starts to look kind of ugly, right?

  • So D three is also a lot about, like, playing around and figuring out how you can rotate things and shift things to make them look pretty.

  • So, for example, if I wanted all of those artists names to be rotated 90 degrees from the horizontal so that they would look perpendicular to the access, I can go ahead and set this to 90 and so we can see that that looks a little bit like that I thought that this looked super ugly and was, like, hard to read.

  • And I was hoping that this would be short enough to fit if I rotated at 75 degrees.

  • Surprise, surprise.

  • It was not, um, but aesthetically, I thought that 75 looked a little bit nicer.

  • This is the only reason I've picked 75.

  • This is purely an aesthetic choice.

  • Okay, so we've talked about the access.

  • We've talked about the scale.

  • Once you've configured those again, the rest is relatively easy before I move on to the bars themselves questions about axes or scales, because I think those are the harder things.

  • But if you have no questions, that's also fine.

  • Awesome.

  • Okay, Bars.

  • It is so remember that I said the D three kind of likes to break down what your visualization actually is.

  • And so what?

  • These are just a bunch of rectangles.

  • And so the thing that I'm actually going to append to my canvas are really just rectangles.

  • When we're a pending let's call them like visualization items.

  • There's this cycle that D three likes to use where it's the like, Enter update exit cycle.

  • Where we've said Okay, Here's the data you're going to use.

  • Please enter it.

  • This is sort of this, like, weird semantic thing that D three has adopted, but it's very formulaic, and you don't really have to understand what it's doing as long as you remember the formula and the formulas.

  • Always.

  • Here's the data I'm going to give you now enter into the state where we're going to manipulate this data.

  • So I said, Okay, I have this data I'm holding all of this data on what I'm actually going to do is I'm going to upend the rectangle.

  • So you'll notice here that I actually have rectangle in two places.

  • Select All is actually looking for pointers to rectangles, even if they don't exist.

  • In fact, even if they don't exist, you still need to use select all because what select all we'll do is it will actually create pointers for things that don't exist.

  • If your data calls for that and because I have no rectangles, my data is obviously going to call for new rectangles to be made.

  • So I'm going to say, OK, we're going to upend these rectangles and we're gonna give them some attributes like a class of Phil.

  • And then things start to get a little bit funny where a lot of the things that we have to think about our how why do my rectangles have to be How tall do my rectangles have to be And where do I start drawing my rectangles again d three.

  • And when it comes to graphics, everything seems to do This actually starts drawing from the top left hand corner.

  • And so you have to say to yourself, Okay, if I'm drawing from the top left hand corner, how far right do I have to draw?

  • This is pretty easy because this access moves in the direction we expected to.

  • But how far down I have to draw Remember that all of these values air actually inverted.

  • So when I talk about with, in fact, I could just use this nice little method that comes right out of my scale, where my scale has already taken into a fact it taken into account how many bars I'm going to need and what the spacing between the bars is going to be on what the total with it has to work with is and so as a result it can very easily give me a calculation off how wide one particular bar has to be.

  • And so I didn't even have to think about this.

  • I could literally just say Hey, just tell me what?

  • The band with ISS for a particular bar.

  • Great height is the one that's a little bit funny again because we have to invert.

  • So I said, OK, for every one of the pieces of data that you're going to get from this data that I've given you, Please look at that data.

  • Look at its value, which remember, corresponds to account here.

  • And I'm going to say, OK, I need to know what this is going to be in terms of pixels in terms of pixels.

  • It's going to be whatever the scale has told me it is.

  • And now I have to invert it.

  • And the process of inverting it is really the same as subtracting this value from that minimum value at the top.

  • Um, sometimes it's a little bit easier to like visualize that, but just so that we can get through the rest of the example.

  • I'm gonna just let you guys figure that out or look at examples again, Very formulaic once you figure it out like it's pretty straightforward.

  • If, on the other hand, if you ever do bar graphs where the bars go like horizontally, you don't have to do this.

  • You can actually just set like a solid height for the bars.

  • And you don't have to figure out any of the weird stuff, and then it's the width that's gonna change.

  • And that kind of comes naturally.

  • The more of these you make.

  • So I'm taking care of wit and we're taking care of height.

  • The next question do you three is going to ask is it's going to say, OK, tell me the accident, Why position where I'm actually going to start drawing this bar?

  • Remember that this Y position is still going to have to correspond to whatever the scale has told me, right?

  • The scale is going to tell me relative to my access.

  • Where does something with a count of three have to start?

  • Where does something with account of 21 have to start?

  • And so again, I let my scale handle all of this.

  • Same thing goes for the X, where I've said Okay, the amount to the right that I have to shift within my canvas is really going to depend on every other piece of data that I already have.

  • And so, as a result, I again leave this to my scale to figure out this math would be really Harry to figure out yourself.

  • And so I cannot extol enough the virtues of the D three scales.

  • Um, notice here again that what I have said is actually okay, actually, this in taxes a little bit funny.

  • You'll notice that I'm using this artist map again, which seems a little bit weird because we kind of already have this artist key.

  • The reason I had to do it this way was the following.

  • I said to my scale that the domain meaning any of the inputs it was going to get, we're actually going to be artists names.

  • And so, as a result, for a particular piece of data, rather than hand the scale an artist I d which would come back undefined because this domain has no idea.

  • We're sorry.

  • Wrong one.

  • This domain has no idea what a one corresponds to or what are three corresponds to.

  • But it does know what an a c d c corresponds to or Santana corresponds to.

  • And so, as a result, as I'm iterating through all of my data and count data making these bars when I actually need to use my ex orginal scale to figure out the exposition of my bars, I need to pass it a name and not just an i d.

  • And so we're back to using this artist mouth.

  • Finally, this is the like, last little, mildly fancy thing where you said Okay, great.

  • I've made this visualization.

  • It's pretty.

  • It sits there.

  • But the whole idea behind the three is to make things visual and interactive and to make things interactive, you can actually start layering some of these JavaScript ideas.

  • For example, listeners In this case, we're going to say, OK, let's actually at a click listener.

  • There are other listeners, like, mouse over mouths off.

  • Um, these are things that I highly recommend Googling, but they work and kind of just the intuitive way that you might expect buttons to work on with just regular JavaScript on a regular HTML page where I said, okay, if someone ever clicks on a particular bar, please note that for that particular bar.

  • I want you to get whatever is going to get returned from this function call.

  • I could have written this entire function in here, but for the sake of clarity and segmenting, I made the decision to actually segment it away into another function.

  • In case, for example, my application ever grew and I wanted to use it on other places on the page.

  • But notice what I've passed is the Artem artist name, the artist I d.

  • And the actual album data that I was dealing with there.

  • And in fact, this is the entire data set.

  • So to get that artist name notice again that I'm using this artist map.

  • Um, just worth noting and basically what we're going to say is, OK, every time someone clicks on this bar, go ahead and run this function.

  • Up until this point, what we've done is literally just the following, right.

  • We've made axes such that they're calculated properly for the amount of data that we're going to do, right.

  • But in fact, the very first thing we did was load in this data and clean it in such a way that it was going to work with what we wanted to visualize.

  • This included sorting the data this included.

  • If this were more like fancy and real world data set, it might also include iterating through and taking care of anything like nan values right where they're literally is no value.

  • These are things that you're going to have to think about as you're visualizing your data.

  • How do you want to visualize a nan?

  • Do you want to visualize it is a zero.

  • Do you want to just literally cut it out of your data set?

  • And these are kind of like big philosophical questions that are worth asking yourself as you visualize data.

  • In addition to all of that.

  • Remember that I actually cut down our data set because I thought that fewer would be more interesting because it would be easier to read.

  • Um, and then keep in mind that we did a lot of math to actually handle making the axes in addition to then drawing the axes onto the canvas.

  • That final thing we did is actually, uh, dictating a lot of what is happening over here.

  • Remember that Java script, one of its primary objectives in life, is to change the dom.

  • And so, in fact, what's happening here is that every time I click, I am actually a pending new information to a div that I had already set up over here.

  • Um, if you're curious to see this

everyone.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it