Flower Visualization & HTML: Refactoring the Code

[00:00:00]
>> Let's go ahead and, Do the same thing, this time for our film flowers. So let's go ahead and bring our film flowers over. I'm gonna call this film flowers. And so, I was thinking, that what we can potentially do is bring over our film flowers where we positioned everything.

[00:00:29]
So it's this piece of code, and then we're just not have the filter option. And we'll just have everything being rendered in kind of that forced layout. So I think that might be fun. So let's go ahead and do that. So the very first thing that we're gonna do, again, is create the SVG.

[00:00:53]
And then, let's create our script tag again. And, I'm gonna stop fighting code sandbox. Okay, and the first thing we want to do is we need to go ahead and load in the movies data for us. So in our observable notebooks, I had already loaded in the movies data separately.

[00:01:20]
And then, so we were able to just access it in our notebooks. But in here, because we're starting from scratch, we don't have the movies data loaded in here. So let's go ahead and do that. So d3 has some options built on top of fetching. One of them is dot JSON.

[00:01:40]
And just it makes fetching JSON. It goes and fetches and then turns everything into JSON. There's another function called d3 dot CSV that does the same thing with CSV files. So it just makes it very convenient to load our data. And I have our movies data already loaded or already saved here in our directory.

[00:02:11]
So let's go ahead and call that .then, and then movies should be loaded. And if I console log movies, there we go. So this is our movies dataset. Hopefully, it looks very familiar to you by now. And let's go ahead and copy over our code here, and then go ahead and figure out how to translate everything over.

[00:02:55]
So, We're gonna take that, I'm gonna copy and paste it over into, Gonna copy and paste it into our block that already has our movies data loaded. So here we are, and now we don't have. Now, we also need to go and get this calculate graph function. So, I'm gonna take out that line.

[00:03:48]
And let's go ahead and grab it from this, our fourth notebook, where we went and use scale to translate our raw data into our visual channels that we can use to draw in. So I'm gonna grab everything in this calculate data function. Actually, let me do this. I'm gonna, I'm gonna bring the whole calculate data function over.

[00:04:23]
And then, I'm gonna paste it just outside of the d3.JSON load. So now, if we do calculate data and passing movies, we should hopefully see. Wait, all right. So let's call this function. I'm gonna do it this way. And then, You should hopefully be able to see something being drawn to the console, which we're not seeing right now.

[00:05:12]
So let's see what's happening. I'm going to go and going here in console log movies. Okay, perfect. So we're seeing that. Things are being console logged here. We have our color scale, and it's because we need some of these arrays to be copy and paste it over to.

[00:05:36]
So let's go ahead and do that. Let's go get all of these arrays. So those we can find in our workshop utility functions. So we have our top genres. I'm gonna just paste that right outside of our function. Const topGenres, and we need to go get our petal colors, and we also need to go get our petal pads.

[00:06:11]
So, we're gonna be copying and pasting for a little bit and do, Const petalColors, and we have petal paths that we need to go get. Okay, so Let's go ahead and do that. All right, Petal paths, I'm gonna take this part out. Okay, perfect. And then, let's see.

[00:07:00]
Now, we shall have all of these variables resolved. We have movies being calculated. And so, hopefully now, we should have, let's take out this .console log. Now hopefully, we'll have still no. So, let's figure out where it's going wrong. Look at that, okay, calculate group position. Okay, so I knew the film flowers is the one I was gonna be a little bit more complicated to copy over, but that's okay.

[00:07:43]
So let's go ahead and find our calculate grid positions. Let's see, calculate grid positions. Actually, we don't need our calculate grid positions anymore because we're using our force layout to position everything. So we can just, we can take that up. Let's see, there we go. So that is everything we needed to copy over.

[00:08:15]
And now, we have the objects with all of the information that we've gotten so used to seeing, and with the colors and the pants. So now that we have that, perfect. So let's call that, actually. And then now, what we need to do is go and copy over the graph calculation.

[00:08:41]
So let's go and copy this over. Now, we should be able to, Say, const graph is equal to, No, hold on. So now, we need both the filtered set of movies and the filtered set of flowers. But because we're not doing our filters right now, we'll just pass in the movies data, the whole movies data set that we already have and the translated flowers array.

[00:09:37]
So let's go ahead and change this around a little bit. And so, we're going to pass in our movies array, our flowers array. Let's go ahead and replace this movie's part. In this flowers part are into flowers. And now, I believe we have, let me see if there's any case.

[00:10:01]
So SVG is not defined. And that's the only error that we're having now. So now, we'll go ahead and calculate our flowers array. And so that's our calculate data movies. And then, we're gonna go ahead and get our graph. So our graph is equal to, Calculate graph, and pass in our movies and our flowers.

[00:10:33]
And I'm gonna console log the graph just to make sure that that's being calculated the way that we're hoping for. Yes, and so, I'm just gonna pass in yes.