Bar Chart Visualization & HTML

[00:00:00]
>> So in this section, let's take everything that we've been doing so far and our observable notebooks and translate it to an index HTML file. And we wanna translate both our simple bar chart and our filled flowers. So let's get started first with our simple bar chart and so I have here a code sandbox and the setup is our index HTML file.

[00:00:26]
And you can see what I've done here is and hello Dan kind of some of the standard headers. I've loaded in RD3 file and I've loaded in a copy of lodash. Now what I'm going to do is I'm going to create my SVG element, like we used to do in our observable notebooks.

[00:00:52]
I'm going to open up a script tag, and this is where all of our JavaScript is going to go. And I'm gonna copy over and the code that we had in our simple bar chart where we did the animation and updating. And then we're going to edit that to make it work in our index HTML.

[00:01:13]
And hopefully you'll see that the translation is actually quite straightforward. So oftentimes, you can take whatever you prototyped in observable and kind of drop it straight into your code, right. And your index HTML or whatever your setup is. So this is our code where we, Animated our simple bar chart and I'm just gonna take all of that.

[00:01:52]
And actually, I'm gonna take it until right here, where we said d3 Select button and click update bars. I'm going to drop it into our index HTML file. And, okay, let's go ahead and edit this a little bit so that it will work in this page. So the first things that we want to do is we add this part where we say HTML back tick, that is marked and that is observable specific syntax.

[00:02:30]
So that's not going to work in our HTML file. So let's take that out. Actually let's take all of this out. And here we have two options of doing things. So either we can go ahead and just create the equivalent in, so actually, let's leave this up for now.

[00:02:50]
And we can either create the equivalent in here, or we can create all of these with d3. So I'm going to show just the option where we're going to create it in HTML first. So we have our SVG height is, think we hard coded, so let's for now hard code it.

[00:03:17]
And this styling we can either put it in a style, a CSS style up here in the header or I'm just gonna drop it straight into the SVG. Then I'm going to put in a tag for the code. And then I'm going to put in a button for the clicking to get the new data.

[00:03:48]
And I believe I wrapped this in maybe, I think probably a div tag. So, yeah, okay, now let's take this away. So now we already see the SVG element, probably rendering here and the new data here. And now we still have our rectangle width and our SVG height defined.

[00:04:19]
And then here we have our function update bars. We're going to keep that. And here we have the transition defined. And this is where we're randomly generating our array of data. And our D3 code where we went and updated and transitioned our bars with the new data. And of course, our D3 select actually, there is something we want to make sure to update.

[00:04:49]
Which is now that we're not in observable anymore, and we no longer have this variable SVG, that is the actual DOM element. So here we were passed in passing in the actual DOM element when we were in observable. Now what we're going to do is turn this into a string.

[00:05:08]
So this is our selector. So this is saying, look at that. So it's actually already showing up. And so this will tell D3 and to go ahead and select this element And so that works. And just the same, let's go ahead and turn this code into the selector, perfect.

[00:05:36]
And now last thing we wanna do is select the button, and we got everything translated. So, yeah. That was hopefully a lot simpler than I imagined. The alternate way that we can do it potentially, is we can also. I wanna show this alternate way, although I would say that this is the easier way to translate it over.

[00:06:08]
Alternatively, the other option that we have is let's say we create a div and then we say okay, let's do a div ID. Is equal to app. And this might be how you'll do things if you're working with them like react or view. And if you imagine that now we're like in within reactor view here but, and now what we can do is we can say, okay.

[00:06:35]
We can have SUG. Sorry, we can have D3. Go ahead and select, I'm gona call it our container. And so I'm going to say D3. Select and select that div with ID app. And what I'm gonna do is I'm gonna use that to create an SVG. So I'm gonna use D3.

[00:07:00]
In this case, I'm gonna use D3 to append an SVG and things are already happening. And I believe we had an attribute of height, and in this case, I can pass in my variable SVG height. And then believe I had a style of was it overflow, visible. And again, we could put this in CSS style tag.

[00:07:36]
But just for the ease, we're gonna put it with in our JavaScript for now. And we wanna create our button. And so we actually need to do it in a specific order. So let's go ahead and create a div for, the button comes first and then the code tag So let's take the Taner and we'll say, we want to create a div.

[00:08:12]
Let's say we're gonna call it a, Let's call it, no. Okay. Naming is the thing I struggle the most with. I'm just gonna call it button code. And so now we have that container appendage. And then, I can do button code that append a button. And that button should say dot txt, new data and button code dot append a code, yes.

[00:09:01]
And this is all working because D3 knows to select and it's being passed in that string selector. And it knows because it's already been created up here and knows to go and find that in the DOM alternatively. I could name name each of these. And then I can pass in those, wait, no, actually, yeah, so I can pass in each of those.

[00:09:40]
But the thing to note here is we have to pass in a DOM element. So SVG right now is a D3 selection. To get the DOM element out of that, we do .node. Same thing, dot node here. And, so any of the above works. I personally think that the first option is the easiest translation.

[00:10:09]
But if you already have some sort of setup with your application, your web application, I wanted to show both of these options. There we go.