 Hey guys, welcome back. Skipso in episode 14. Great video planned. But first, I want to show you some plots. So this is the mean annual heart rate of John F. Kennedy. Up until the feds took him out in the early 60s. This is a plot of the heights of the two tallest world trade center towers. Up until the time the feds took those out in 2001. This is a plot of the generic mathematical function. I guess you could plot anything that you would want, but um, maybe you want to plot the trajectory of an airline flight that was piloted by a couple of untrained terrorists might be interesting. And this is a drawing that I made for the quick of an I-beam, maybe a steel I-beam between some panels. I guess it would be cool to try at home, maybe to try and melt this with jet fuel. I don't know. Just an idea. With that out of the way though, the topic of today's video is scatter plots. And vector graphics in particular scalable vector graphics, as well as data structures in so far as we're using those to encode information to use for this purpose. And spoiler alert, obviously those plots I just showed you were all generated with the assembly code that we're going to talk about in this video. That was written entirely from scratch. And there's no libraries, no dependencies of any kind for that program. So if that interests you, kind of how those plots were made in assembly, stick around. If not, I'll see you in the next video. So oh yeah, also I want to keep this very short. So I'm going to go really fast over this stuff. It's way too detailed to go through at a very deep level. So SVGs, I love SVGs. I love them for 10 years. They're awesome. I use them all the time for so many different things. Look them up if you don't know what they are. I highly recommend looking into that stuff. Basically, this is top level vector graphics versus raster graphics. Rasters are like pixels, like a bitmap image has all the pixels to find their colors. That's great for photographs, but it's honestly trash for everything else. Everything that's not a photograph or doesn't have photographs embedded in it should be a vector graphic. I'm a hypocrite because this slide right now is a PNG, but I also pasted images like this. So that's kind of why I do that. But yeah, this whole thing could be an SVG, but then I couldn't use like this nostalgia MS Paint looking program to make them. So that's why I do PNGs, but I really do have a soft spot for SVGs in my heart. But yeah, for engineering stuff SVGs are far and away. Well, vector graphics are far and away the best way to encode engineering information. SVGs are particularly good for browser portable stuff. I'm not saying that stuff we do in engineering, you know, is SVG usually it's other formats, but even still the concept still stands that vectors are better than rasters for most mathematical stuff. Way more efficient. The number of bytes required is just so much less. Why is that? Because I can encode the geometry, right? So a vector image is just basically this one here. All these things are just geometric elements. So this orange circle, it has a center position and it has a radius and it has a color. That's very easy to encode in memory. It's very challenging to encode that in terms of the pixel values of every single pixel in this image. You know, it's just way more overhead for that. So, yeah, so more efficient. Also, the S is scalable so you can zoom in a million times, right? If I go back to that rendering, I can zoom in as far as Firefox will let me, you know, and it keeps its perfect resolution as far as you go. And I like them, so that's great. So here's an example of an SVG. Again, I'm not going to go into the details of SVGs. Look it up yourself, but basically you have an outer tag with SVG and that kind of, it's XML code, basically. It has the size of the image as well as the view box. I won't talk about what that is. You could put in their rectangles, you put in their circles, polylines, which is like a bunch of line segments, or you can put in lines and curves and stuff. So a lot of cool stuff you can do, gradients, fills, and this G tag, that's a group. So it means everything inside this tag has opacity of 80%. So rectangle, circle, lines, they're all kind of transparent. Obviously that's so you can see the grid behind it. But yeah, so cool stuff. You can encode images that are geometric in nature in a very efficient way, which I like. So yeah. Now, data structures, again, there's a whole like PhD you can get in this one particular topic. And this isn't due justice at all. But what we're going to do is basically use data structure to pass in information into our program. So into our function, I should say. Here's an example of how that would work. So you had a function that dealt with animals. So you pass in the animal and it would like compute its, I don't know, something about it. It's estimated volume, right? You pass the number of feet it has number eyes, it has number of hairs it has, and it computes its approximation for its volume based off of these three parameters, which is a dumb idea. But fine. The problem is, if you have a bunch of stuff you want to pass in that you could pass in three values, no problem into a function in C or assembly or whatever. But it's not always very wieldy. And so typically what I do, and I think most people do this is that we encode that information in a structure, and then just pass the structure address into a function. And in this way, let's say you had an animal structure like this where you have one bite allocated for the number of feet, one bite for number of eyes and one quad word. So eight bites for the number of hairs, that's 10 bites of data. And you can have an instance of that structure for a cat. Cat has four feet, two eyes and 50 million hair. A snake has no feet or hair, but it still has two eyes. So you could pass in this address into your function or this address. And then you always know that if I were to access the bite at that address, I'd be getting the number of feet. And if I were to access the bite at that address plus one, I'd get the number of eyes. If I were to access the quad word at that address plus two, I'd get the number of hair. So yeah, that's the beauty of this. That's the use of this. And that's pretty much the structures in a nutshell. So then I had a question, I was asking, how can we make a scatter plot vector graphic like we talked about automatically using data structures? And JFK always follows through with the great answer. He's like, well, why don't you make a data structure for the plot itself? So make a structure that encodes the teal thing here, make a structure that encodes everything about this plot, except for the data. So encodes the title, the y axis, x axis, the actual axis values, the minimum and the maximum value, the number of grid lines, major grid lines and minor grid lines, the legend placement and positioning and size, all the font colors and all the font sizes, all that stuff should be encoded in this teal data structure here, this light blue cyan or whatever structure here, then have a separate linked list of data structures that define the lines. So have one data structure for the red line and one structure for the blue line. And then just link them together with a linked list. That's the idea there. Great idea. Then the idea is to take, to basically insert that linked list into the main structure and then call a function that is an assembly that reads that data structure, this, this one here, and generates an SVG and writes it out to an output file that you can then render in the browser or in some other program. Great idea. And that's what I did. Thanks, JFK. So again, this particular program is super long. I think it's like 2000 plus lines. So I'm not going to go into the actual implementation. It's just a bunch of like checking the flags and printing loops and stuff. So it's not very advanced stuff. Check it if you're curious. It's all in this repository, but I'm not going to go through details of that in this video. I will talk about the function and how it's used and also the data structures that feed into that function. And the function is called scatter plot. So basically, it's a function that has no return value returns void. Oh, you should return errors. No, I don't do errors. So sorry, we take inputs. And if it fails, it fails. Who cares? So this basically writes an SVG scatter plot described by this data structure in RSI to the file descriptor that you've already opened, hopefully, which you're passing in RDI. So simple two parameter function that writes an SVG completely from scratch. So basically, it's going to generate code like this based off the input data structures that describe images like this automatically. So you can imagine how that would work. I'm not going to go into details. That's very simple. So here are the structures that feed in. So this is the main structure. This structure is the structure that defines the the plot itself, not the data but the plot itself. So what are we passing into the structure? So we have some quad words here. The first quad word is the address of the null terminated title string. So that in that case would be this here. It says, you know, it's somewhere else in memory called dot title. That's the address in memory. It's a bunch of ASCII bytes with the zero byte at the end. That's the null byte that terminates the string in C, for example. So yeah, I have another string address for the X label, the Y label. And then I have a pointer to the actual linked list of the line data, a linked list of the structure that defines the lines, the red line and the blue line. Or in this case, just the red line. Or in this case, the red line. Or in this case, the lines that govern the boundaries of these shapes. This is actually a scatter plot and I'll clean that in a second. So yeah, back to the slides. I'm also encoding the width and the height of the image. Again, it doesn't matter so much for SVGs because you can zoom in a million times. But let's say you made a report. Let's say you made a report. Let's say you made a bunch of other stuff and you just dropped this SVG in an HTML file and say, Hey, this is my report that I'm generating automatically. I want that to be a certain size. So I want to control the boundaries of that in the render relative to everything else on the page. Then we have the X min X max Y min Y max for the axes. So these values here, right? Then we have the legend location. If you have a legend, you put these values in. We have some color information in hex for the background, the axes as well as the font. We have the number of ticks along the X and Y axis number of divisions per tick. We have the number of significant figures and digits in the access labels. We have the font sizes, a bunch of other spacing parameters. Who cares about those stroke thickness for the lines. And lastly, we have the flags. The flags actually matter quite a bit. So basically, I have one bite that kind of controls the entire image. And basically, if different bits are set high, that means those things are in the image. If they're low, they're not in the image. So the low bit is for the title. If you want a title, put a one X label. If you want it, put a one Y label, put a one grid, put a one tick labels, put a one legend, put a one in this case, I put zero X one F for whatever this particular example is. That means the first, I guess five bits zero through four are set. The last bit is not. So this particular structure includes a title labels, a grid, bunch of tick labels, but no legend. Then if you recall, this pointer pointed to a supposedly a linked list of line structures. So structures that define the lines themselves, the red line or the blue line, the data, right? That's down here. So in this case, it's linked list. I always put the first element of a link list to be the next element. In this case, it's zero, which means there's no other elements. This is the last element in the linked list. Then we have a address for the label. If you want to label this in the legend, you put a label string here. You have labels for the title, the X and the Y axis. You put a label for this particular data set. You have the address of the arrays that can contain the actual data, the plot. In this case, the X coordinate is at dot year and the Y coordinate information is at address dot BPM. Those are down here. You can see this in codes. The year is between 1900 and 2000. And this controls the beats per minute of JFK. You can see he was at 80 beats per minute for most of his life. A decent heart rate, not great. That's a guess, by the way. I have no idea what his heart rate was. The number of elements is in here. The color of all the stuff, color of the marker, of the lines, of the fill. If you want to fill in between the lines, we have the marker dimensions, the line dimensions, as well as the fill opacity. And finally, you have the flags. In this case, I've got seven bits. I guess there's seven flags stored in this byte. These bits control, do I want to have a marker at every data point? So I want to have lines between the points. Should the lines be dashed? Should they be a fill between the lines? Should it be in the legend? And the last two bits looks like I'm including other information. I won't talk about that in this video, but you can actually draw like Bezier curves and stuff. That's really important for us down the road, but not in this video. So I'll talk about that later. So yeah, that's pretty much the gist of this. Basically, you pass in this structure address into this function after you've already opened a file that you want to write to and then boom, you're done. You have an SVG image that you can now open up in Firefox and view like this. So I have some examples. I already showed you the example results, but I want to show you the code just in so far as we're defining the structures. I'm not going to talk about the actual implementation. That's a little bit too detailed for this video, but yeah. First example would be a basic scatter plot. That's the one of JFK's heart rate. Show the basics. Then I have one with multiple data. That's the one with the Twin Towers and the legend, right? This one has example C is evaluating mathematical functions, which could also be anything. Let's say you were to write your own FEA software and you wanted to plot like a convergence study. Let's say you were to mesh something, a Twin Tower model, you were to mesh that in finer and finer and finer number of, mesh of elements. You want to see, hey, does the damage the same? Does the damage change the function of the mesh density? You could do that. Anything that you want to evaluate, you can plot like a mathematical function. Then I have a simple example about drawing stuff. Again, it's not the best way to draw stuff. There's definitely better ways, but you can draw simple diagrams in this way as well. That was that I-beam example that I showed in the beginning. Let's check out the code. Example 14. It's all in the suppository. Check it out if you're curious. Let's open up the first example. Let's do that first. Let's go to light mode for you guys. That's not light mode at all. In this case, this is the JFK heart rate example. It's a very simple program, bare bones, Elf header here, bare bones, program header. Only five includes. One of them is the syscalls for the OS. One of them is opening a file. This one, closing files is optional. You don't have to close files. That's a conspiracy theory as well. The function that we talked about today, which is scatterplot, that makes the scatterplot itself. Then obviously sys exit. Again, you don't need that. You can just exit with an error, but who cares? We'll leave that in there as well. This is the whole function. This is the whole program. We open the file using file open. It opens up a file at file name. This file name happens to be called firstCatholicPresident.SVG. That's what we're going to write our SVG to. It opens that file. It writes the scatterplot to that file, closes the file. Again, optional step, and then exits the code. Exits the program. That's it. Very simple, right? This function, scatterplot, does all the heavy lifting. It does that lifting with the structure that you're passing in called, in this case, plot structure. What's in the plot structure? Well, that's this. Again, I already spoke about this. All the elements have been described. Here you can see how it's implemented. We have addresses for the title, labels. Those are up here. You can see all the plot parameters are in the first structure. All of the line parameters are in the second structure. This structure is pointed to by this structure, just like JFK recommended. This structure points to this structure, but then also the data points to this structure or the way around. This structure points to the data. You know what I'm saying, right? Because we have down here the actual data arrays, and those addresses are also stored in this structure. Long story short, this code generates that image. So if I run this code, I'll get a first Catholic president SPG image. And if I open that in Firefox, that's the wrong one. This is the right one. You get this image. So very simple. Next example. I use dark mode. It's so hard to see. I got to change that. So this example is the Twin Tower example. Again, it's exactly the same thing. Same includes same header. Basically, obviously the file size changes, so headers are going to change too, but pretty much the same everything, the same code, opening a file, running the scatterplot function, closing the file, exiting the program, the same steps. Only difference is the structure has changed. So this structure has changed, meaning all these things changed. The file name is now called inside Java SVG, right? Our title is now called height of one and two World Trade Center. The label is now, says days after August 1st, right? My label is now feet. So everything has been redefined, but it's otherwise the exact same program. In this case, we have two data structures, though, for the lines. We have one for the first tower, which looks like the first tower is, is that red? And the second one is blue. Looks like. So we have a linked list. You can see here the address of a linked list for the first element pointing to the second one is, is there. It's non-zero, but then the second one is zero, because there's no, there's no other towers that we're drawing in the picture. But yeah, very simple. And here's the data you can see down here. They share the same X values, but they have different Y values and have different legend entries. Oh, and also, the legend is turned on. So yeah, including legend is, is on. That's bit four. That's a one. And then the legend is also on for this. You see, all, all six bits are high. 0x3f is a bunch of ones, right? So these are all set to high. So yeah, if you run this code and then open up in Firefox or whatever, you will get this plot on FreeBSD, on Linux, all the same. And yeah, it works. Okay, next example. Thanks, JFK. Now this one, I'm not going to go into great detail about, I'll open the code, but this is the one that drew the mathematical functions. The reason why I don't want to talk about it in this video is because it uses parametric stuff. So we are basically, if you ever use MATLAB, like linspace and then evaluating stuff, I don't want to get into that. Basically, we have a function here that computes that polynomial that we were talking about. This polynomial here is being evaluated at a bunch of different X values, and those values are being sorted in a Y value parameter. And so you have two parameters, you have X and Y, and I'll talk about that in a future video. Basically, it just draws that line. So simple as I won't talk about that too much. Let's go to the last example. Again, this one is not too important either. But actually, I wanted to talk about this because this drawing is a scatter plot. It may not seem like one because it has no legend, it has no title or access labels or ticks or grid or anything like that. Everything is turned off, but you still drew this. How is that possible? How can we still draw that? How is this a scatter plot? It is. Basically, this top panel is five points. Well, it's four points and then one more to go back to the beginning. So this is a five point line. And this is a five point line. And this IBM is, I don't know, what, like 13 something points or whatever around all the way around with a line thickness and a fill and an opacity. And this is just a scatter plot. So you can draw things like this and I will show you how that looks in the code. So again, the main code is going to be all the same as before. Oh my God. The same four steps, open the file, make the scatter plot, close the file, close the program. But now we have this data. So I have an X and a Y value for those shapes. So we've drawn basically drawing those shapes with X and Y values on a grid. So the sheet one, the top sheet has five points, bottom sheet has five points. And this one has whatever, how many points for the IBM? We have a different file name. But other than that, we're just literally just drawing three different shapes on an image. And the last thing to point out is that the background color was set. So the background color of that image was 0x4c84f5. I guess that turns out to be blue. So with that out of the way, that's what I wanted to cover in the video. At this point, we have a pretty awesome capacity. We can now draw a bunch of cool stuff. We can draw a bunch of like plots, but also schematics. And we'll be able to embed this kind of information in an in a report file. So we can make like an HTML report for something like, let's say you want to automate a process and then write a report automatically, not like an essay, but like a here are the results of your analysis. You tried to optimize this. Here is the results of optimization. You wanted to evaluate this electric circuit and change these parameters. Well, this is how it looks when you make those changes, right? You can generate those reports automatically now because now we can generate these plots completely from scratch in assembly. So if that interests you, check out the code. And if you want to talk with some like-minded folks about conspiracies, maybe not that, but on the Discord server, check it out. Link in the description. Thanks for watching, guys. I'll see you around.