 Okay, hi. Thanks for coming. This is my first ever JS food talk in pretty black and happy to be here. Happy to also see some faces that I've seen before and implanted to for the people who do not know me, you will know me in like a moment. So I have like 45 minutes and starting like a minute earlier. So without much speaking, I'll just tell you, I'm pretty passionate about actually looking at other people's work, deconstruct them and reconstruct them. That's because my imagination sometimes sort of lets me down. So I cannot come up with any of the cool stuff all by myself. But whenever somebody does something really cool, I want to look at that and try to reconstruct it. So I structured this talk entirely around something like that which affected me significantly in the last couple of months and application that's on the internet. I don't know what the hell, let's do this again and see how well we can do this and how quickly can we get to something like this. So that's my talk. That's code. Let's do the retaxalization in 30 minutes. That was a typographic error. I meant 45 minutes, but let's see. So quickly, that's me. My name is Hari Sriram Krishnan. I am the random web guy at a company called Adobe. My designation is developer web developer evangelist. I'm also a musician. I moonwalk with my band Agam. I plug on that later. I'm a huge Dream Theater fan and most importantly, I'm an overall nice guy. Sorry? Overrated. So here's the deal. This presentation is all code. Of course I'll be talking. I've got only like 40 minutes to do this. Blink and you'll definitely miss something. So you have had a nice lunch and you want to actually crash out and think about life in general, call your girlfriend, text her, figure out, do it, but you're not going to be able to come back and see what I did because I'm not going to go back. Purely because baby is going to come looking at me if I'm going to do that. So I'm not going to stop. And that also means I, like the yawning is allowed. I don't know if I can do that, but any sort of physical abuse assault throwing chappals is not allowed, right? Because it's on video and I don't want this to go viral and feel free to interrupt me. However, even though that would have a bearing on, you know, sort of where I will end up with the stock, right? So that is with the intro madness. I'll show you what inspired me to do the stock. Have you seen this application? Stop looking at the lady on the left and start looking at the visualization on the right. Do it now. Do it. All right, so this stock is not about the wake up laugh, but it is about the visualization that sits to the right of it. So this page has got a lot of massively beautiful visualization. See this one. I have seen several, several, several great visualization projects happening. You know, they have like serious data crunching. They have like, you know, a lot of complex structure. What really impressed me and this is the simplicity of that. It's nothing but a column chart, like, you know, a column chart with a, with a graphic asset, a column chart that comes forward. And what would it really take to actually build something which looks this beautiful? You know, for me, anybody who thinks this is actually ugly, speak your mind now. Who thinks this is beautiful? I want hash to go up. It depends on what you compare it with. Huh? It depends on what you compare it with. I'm not comparing it with Rebecca Black. Rebecca Black. Okay. Nevermind. So that means we all, we all completely understand why we are sitting in this talk. Right? Okay. So secondly, now I don't have, like, bleeding it, bleeding it stuff here. Like, you know, sometimes open web conferences are also about that. Like, you know, stuff that is really going to change the world in the next 10 years. These are the things that was changed in the last 10 years ago. I was writing the same code 90s as well. So this is like simple JavaScript, simple HTML, and some customary jQuery. Apparently if I don't write a dollar sign on my code, it doesn't run. So I'm going to just add jQuery to create a document dot ready, but it's just pure JavaScript HTML. And let me show you what I'm going to end up with. Okay. So, so this is what I did. I recreated the whole demo. This is the application that we saw on there. It's just a snapshot of that. But this is what I will end up with today. In the next, how many minutes? 30. 30, man. I finally give you 335. Okay, that is what we're talking. And, right, request you to pay attention and hold off your questions. And if there's something completely incorrect that I'm doing, like not putting the semi-colonel, not declaring the variable, say that immediately. You can interrupt them. If I'm doing everything right and things seem to work, do not interrupt because you're going to interrupt me after I'm done with the demo. Got me all of us? Yes. I just heard 4 people. Can I say yes? Yes. Brilliant. Thank you very much. I hate doing this college teacher thing, but I hold this against Billy and Kiran for throwing me at the post lunch session. So that's fine. Okay. The editor I'm going to use is called sublime text, right? And I have to start with, hang on. Can you see this? So it's a simple HTML file with a simple template in there because the stock is not about writing HTML markup. So I've just thrown the markup already in there. I have linked three libraries here. A library called easel.js. Anybody heard about it? Anybody used it here? Brilliant. One, two. Flash guy. Maybe? Yes. Okay. Grantskin was a flash guy too. I was an else file flash guy. Okay. Beat me up now. And I'm using a library called tween.js, which is also built by the same guy. And of course, everybody knows jQuery, right? So those are the three libraries I'm using. I've also looked up a style sheet to just make my chart look nice. And I'm happy to share the strategy to the, this course already on GitHub so you can go and take a look at it. But let us just get started by running this. Yeah. Just to make sure that I'm not cheating. That's all I got. Just an image and a rectangle. Okay. Now I want something from the audience and not believe to time me every five minutes. Who's going to do that? I mean, five minutes is a simple thing to do. Yes, sir. Brilliant. Every five minutes you said, dude, you're, you're five minutes is up, right? Perfect. Let's stop and get more coding. Let me get started. So the first thing I'm going to do is like I said, do my Pulea Shruthi Reshen Tamil. Like, you know, so I'm going to do my customary jQuery call. Anytime I'm making a typographical, I'm very important to that. So just let me know so that I can save up that time. Okay. So here is how we will access this problem. Let's actually look at this demo once again very quickly. So what, what is this all about? It is a chart with columns that animate, right? You see the columns actually animate and the line that extrapolates, correct? That's what this demo is all about. So this demo can be split into the following parts that you need to get those graphic assets to actually work really nicely. You can see that there's no pixelation. There's no, you know, clenching. It's like actually really nice. So, so that is the first step. The second step is to actually get these animations going, right? So let me just get started. And that is the reason why I'm using this framework called ESL.js. I'll pull up the link at the end of the talk. It's a JavaScript library, which actually helps you program for Canvas in a more display object stage oriented way. Anybody from a display programming world may be Delphi or maybe any of those flash or even Canvas would understand what this is. So let me create a function called Inet. We need a few variables, right? So a variable which holds the canvas, a variable which holds the stage, stage is nothing but the region where we're going to draw all the, all the graphics. It eventually contains the canvas, but stage is the, we need with maps, right? To show the chart items. We also need some graphics to draw the lines, correct? So those are the four variables I've just described. They're pretty simple and straight, right? Now let's come here and just get a reference to a canvas. Everybody understands this. If you, if you don't, sometimes the trivial things I will not even say, right? Now I just need to, this is the account practice that I do. I don't typically style my canvas in the CSS. I sort of set it in my code. That's just a quote with me. You can always do this, but let's just get this past is equal to, this is the holder which contains the canvas. If you see the marker, there's a holder and the canvas sits inside it. I'm just going to do this. Remember you don't have to do this. It's just that I'm doing this. Okay, so we have a canvas with the same size as the holder. There's a reason why I have a holder that's for a more UI like situation. Otherwise, you could have just directly thrown the canvas, but I need the holder, right? Now let us start the ease and stuff. So we need a stage to draw our bitmaps and lines into. So we create an instance of stage. This class comes from Excel.js. Don't worry about this rumor that it's called stage and we will add the canvas to it. Fine. Now, as you understand any drawing application, anything that has got animations, they all have this concept for frames. Who understands what frames are? Don't understand what frames are. So we also understand what frames per second is. So if you understand what frames are, you understand what seconds are, you understand what frames per second are. So we're going to have a pretty optimistic view about the frames per second of this application. So I'm going to create instance of a class for it's a static called ticker, which again comes from Excel and say set FPS. It is very ambitious. If you're running this on a mobile phone, you're not going to get this. See, nothing runs at 100 FPS, but I'm going to just show a demo and to make it look really smooth and make me look really nice, 100 FPS. Yeah. And a listener on the window. So that every time there's like a frame, change all like an auto-interframe, you actually get to do something. And there is this one method that is an exposes called tick. Any guesses what tick would be? Every time the, or in the frame of the tick gets fired, and every time the tick gets fired, something in the stage has to change, right? Otherwise, why are we listening to it? So if nothing is changing on the stage, you're not listening to this. So we will simply say stage. We are done with bootstrapping this thing, right? Now we have a way to understand, add a canvas onto the stage. We understand that when something changes, when a frame actually gets fired, we can actually do something inside the characteristic function. Brilliant. You're really, you're awesome. Okay. Now, since we don't have an ATAC service, we don't have a good data source that I can connect to, I'm going to adopt a patented brilliant process of mine, which is called generating dummy data. I sort of mastered that whole thing about dummy data. I create extremely imaginative dummy data. We'll see about that. And of course, typing dummy data is beyond all our collective intelligence. So I'm going to copy paste that. You can hold me responsible for that. But this is nothing. It actually has followed the runs across 16 elements and creates an object which has got an item called item 012 and create a property called to scale. It could ideally be percentages, right? A column chart is like, how much personnel can it go to? But you know, that's what it is. And of course, we need a variable to hold that. Correct. So we have the dummy data set right now. Now, let us start doing some real stuff with all of the bootstrapping and blood done. Now we need to start adding the chart items to the canvas. So let me go to my init method and say if I increase it any further, I'll find it hard to type here, but I'm going to do that. In a seed. Okay. So as the name would indicate, we are going to add items to the canvas. So for adding items, we need to run a for loop. Any ambiguity here? Nothing. We're going to loop through the items. I'm going to add as many items. Correct. So for that, I'm going to do. Okay, this talk is not about JavaScript coding best practices. So please don't give me feedback on that. I will read it like variables. I will use whatever scoping I want because my job is to finish this in 30 minutes. I'm happy to hear what my coding blunders but not in perspective to the stop. So I'm going to declare an image here and rest of it I'll copy paste. And I know that's a bad thing, but I'm going to do that. But you don't do it. Yeah. I created a new image and set the source property. See, we are talking bitmaps here because those were like complicated graphics. I mean, you could actually do them with vectors. You could actually draw, you know, vectors of the ship that would be like a far, you know, more far more process for the clamor of the session. We will use bitmaps. So I have these assets don't wonder where they came from. I have them in my file system. So I have so this this whole thing is what you have a bottom, then you have an area that scales, and then you have a cap. That's what the chart is, right? The bottom doesn't scale, the top doesn't scale. The mid portion kind of scales and the caps, it's on top of that, right? So now we create an image and since an image cannot be directly added onto the canvas, he still gives you a nice little way of figuring that out. So create a new bitmap and add an image to that, right? And then you will say, add child. What with math? Now, as every simple mathematical problem, you have to position them one after the other. I'm not going to teach you that. I'm simply going to do that. So for that, you need to start with the X position, set that to zero. So you are going to come down here and say, you know, the width of the ball is 30. I know that. That's why I'm doing this. That should do it, right? Correct. Now, after I've added this, I will call a, I'm just going to update that on the screen. Can we run this and see something that is on the screen? Hopefully. Sorry, don't you want to increment it? Oh, no, because I'm multiplying it with i. Dude, seriously? 55 seconds to five minutes. Seconds to five minutes. Okay, let's see. Does this look right, guys? I haven't called that. Correct. Now, fine. So we have called the PWA dummy data and we have called all children. It doesn't work. See, I'm doing the wrong with you guys, right? So I'm going to make mistakes. It's fine. I'm braiding it. Okay, not bad. That's good. Now this is what I said. Good coding practices later. Don't do this, guys. Don't don't do this in your real projects. This is actually a pitch. Yeah. So yeah, so this should just work as well. Let's reload it. 300 always. Fine. Right. Now, this is fine. This actually looks like the start point of the chart. Now, what is the next job to actually scale them, not just scale them and animate them? Scaling or just no, no, just set the scale property, you have a chart done. That's all go home. It's about showing that whole animation and then showing the right extrapolation or that 10 minutes, is it? Yeah. Really? Okay, now what? We'll see. So, okay. So now, which one of these would scale? You tell me the one in the middle scales, correct? The other one says in the bottom, the other guy positions himself on top. Correct. That's about it, right? So I'm going to scale the guy in the middle. So I'm just going to keep track of them. So I create a just an array to hold the items that are going to scale. See, there are several ways of doing this. You can actually directly go and query the DOM to actually find that item. I simply like to hold the data structure. It actually comes from my background as an actual slip guy. I typically tend to, I mean, it's a confession. I've done flash for like, what six years in my life. So there are certain practices that comes from me from Flash World, which I strongly believe are right. So that's, that's the reason why I'm doing this. So let's go here and say scaling objects.push clip. Nothing. I'm just storing it. I'm just pushing it onto the array. And you should always remember to, otherwise you'll keep searching what happened, but you guys are good in finding out them. We also need to hold the caps, right? The cap, the top gray guy. So let me, fair enough, it's just two arrays. One holds the scaling items, all 16 of them. And the other one holds the information about cap. Mind you, this is not a string. Mind you, this is not an object. It is actually a reference to what is sitting on your canvas. See, when I say caps of I, it will actually point to the bitmap, the one which we added to the stage. That's why it is so powerful. Now if you want to modify it, you can simply iterate onto these two loops. And one thing. Okay, sorry. Yep. I can pass here. Any questions until now? Seems all in target? Yep. Okay. Now, what do we need to do? We need to animate this, right? Okay. So that is where we need the tick function, right? Because animation is a frame-oriented process, right? So every time, or a time-oriented process. You can either think in terms of frames or in terms of intervals. So in the past, we will use something like a set interval. A lot of us have done that. A set interval is something which keeps firing. At a particular interval, you can do that. No harm in it. People in Moscow never call you an idiot. You won't state. So other than that, set interval is also a fair thing to do. But here, I'm using ESL, which actually has handled the frame thing for me. So I'm going to run another follow-up. This time, through the scaling objects, right? So what does this contain? So this contains, correct. And I can do this, right? Everybody's length is the same. All of them are running through the length of items. It's just that I'm processing that at two different arrays. That's all. It's just a convenience. There are other ways of thinking about it. You create a complex object and kind of push it back into the same array. You could do that. Go into items, query the object, add on to it or find your own way of doing this persisted. But here, it's plain simple to dump. I'm going to do that, right? That's fine. And now, what do we have to do? Five more minutes done. Okay, that's 15 minutes. Yeah, 20 minutes. That's 20 minutes? No problem. No pressure. Okay, so where are we? So, sorry, I lost track. So right now, we need to... So anybody knows in a graphic what is the registration point of a graphic is? Anybody knows what nice slicing is? Anybody knows what... So you know what registration point is? A registration point is the point where the graphic would use to understand how he's going to scale. The registration point is on the center of a graphic. He will grow both ways. If it is on the top of the graphic, he will grow downwards. If it's on the bottom of the graphic, he's going to go upwards. Any questions? That's fairly simple, right? So where should our registration point be? In this case, the bottom and a small secret tidbit for you guys. That bottom image is height is 7. So what should be the registration point? 7 would be a stretch because it would be at the deep bottom. So what it will do is it will actually leave a couple of pixels in the bottom and start growing that way. You will see that when you're actually using nothing like paint. If you actually stretch it beyond, it will actually leave... So you put something which is close to 7th. Something like that. I just came up with it. So if you put it at 7, it is at the bottom most pixel and that one pixel level will always show up as a gap. It's a minor detail. Anybody who's like doing graphic intensive stuff always remember your registration point is never at the absolute bottom. It's slightly above your bottom, which actually gives you a slightly better. Fine, that's fine. So not gap man. Right? So now what do I need to do? So I need to do a simple little check if clip.scaleY. Which is the current scaling which is equal to 1. We're not scaling it at all. When we are adding it, everything is scaled as 1 is less than where did this come from? It comes from here. So if my current scaling is less than where it really needs to be, this is the less than case. We will simply say clip.scaleY plus equal to 0.5. That means if it reaches there, keep incrementing. Now, the other case. Elsef. Oh yes, thank you. You tell me. Thank you. Thank you very much. It was a very kind guy. Right? So what would this do? If it is more, it will increase. If it is less, it will decrease. Even though this else condition will never fire in this case because we're not going to write the navigation. We're always going to keep refreshing but it's a good thing if in case I get some extra time to add that feature. So and finally we have to position the cap right? So the cap has to be added on top of the scaled objects which is a simple trick. I know the bottom version is 300. Correct? Minus scaleY and height of the object. That should do it, right? There's a difference from top and you'll actually have a caption. Hey, these guys, this is just mathematics. I'm not going to tell you what I'm doing. Okay, this is just plain math that everybody understands. Right? Are we feeling lucky yet? Who thinks this will work? Put hands up. I don't think it doesn't work. Who thinks it works? One, two people. It's skeptics, I'd say. Why? What have we done wrongly here? Tell me, I say. What is that being called? Oh, function. It's all being called. Let's see. Why ponder on something which we can see. Nice and non-jerky and smooth and what not. Isn't that really pretty? Prettier than Rebecca Black. 20 minutes with ranting and talking and coding. Actually, it works. That's why sometimes you know. You look at a great research and say, oh, some geek at Google would have done this. Don't want these guys to pay so much. This is bullshit. It's pretty simple. It's just that you sit down and reconstruct it. That's what we're doing here. Right? Programming is not always about geeking out. Like it's not about how you're going to combine bootstrap.js and Angular.js and bring a MEC pattern into it. What's going to be a templating? Sometimes it's not about any of that. Sometimes it's about writing stupid straightforward JavaScript code. But we have not done yet. Let's go back and see where the pitch was. The pitch has this nice little plots on top of it. 25 minutes done, 20 to go. Or 15 to go. Okay. Here we have. Okay. That's the thing. You saw that? So it has got those. Do you see that? It is pretty. The beauty is it's intricate. It is not all of them falling at one go. Do you observe that? They actually come like this. And then they animate. Now, how far of that are we going to do right now? I'll see. But then just just and you can see that the interpolation is smooth as hell. Like, you know, confession again, I come from the Adobe flash side of things where, you know, smoothness was never an issue. The issue was different. The issue was about memory, issue was about size, issue was about multi-platform. But this is this is good stuff. It is like really smooth and it runs it. What are we running it? 100 FPS, right? And it seems fine. Maybe it's just doing 60. We'll never go to 100. But it's doing fine at 60. It is actually really good, right? Okay. Enough about the pitch. Now, let us do the damn plotting. Not plotting, plotting. Right. So, copy paste, as always, plot.png. So we want the plot to be in the middle of every bar, right? We don't want it to be in the left corner. So, another simple mathematics. Push it by five pixels, right? So, it will come in the middle, right? Let's run this. That's not very nice. We're all standing in one. And if you see in this, let's go back and look again. Falls down to that, right? So, let us do a small little trick here. It's just a simple mathematical thing. Okay. So, I'm just going to create a variable called y. What is it called man? Plot, no? Plot y. And set that to zero. Okay. I'm going to come down here. Okay. Just setting it to plot by and I'm going to do a small little thing, which is fine. First one here, second one here, third one here, fourth one here, fifth one here. Okay. I am just sending them out of face. It is, it is just your imagination of how that extra interpolation is working. Okay. There won't be a hundred other ways of doing this. But I am just sending them in an ascending way so that only one is visible in the beginning. Fair enough. Now, as always, we need to hold this somewhere. So, it's light. You tell me, what should I do? I'm saying, add this thing and say, have a property called two position and set it to zero. Fine. Now, let's go to our, we don't need to go to tick, right? We just have to move it. See, tick is all four things that require incrementally change. While a movement can be done using what is known as a tween. Right. A tween is nothing but like a position increment. So, interesting you can do that inside the tick. But what I'm using here is a library called tweenjs. Okay. The tweenjs is similar to easeljs in many ways. It's built by the same guy. So, I'm gonna, so what do we iterate on? One second. Okay. Now, what do we have here? We have the clip, right? This is just reading them back from that thing. Now, we'll just call tween.getClip. This is the syntax of the library. So, you can just, you know which one you are tweening. You're tweening this one. And you're doing what? Two. X doesn't change. Correct. We're not going to change the X at all. We're not even going to change the Y. Right. And Y it is. Right. We should make it correct. Right. We'll run this and see what we get. There should be an error. You need to have them in a, surprisingly not. No, the Y is incorrect. It's actually dropping to 0. Point. Point, man. Who's that? I could actually give you a goody. It should be 300. We're actually coming from the top. Yeah. Sorry. Good catch. Good catch, but nothing happened. Not one, but also the same thing here. And they're tickling me. No, no, that's fine. It's, they, they all eventually need to come down to, uh, two, three hundred minus. Okay. You know what? Screw it. I'm gonna do something else. Okay. We got a bug. So, we just need to get it onto the stage somewhere. Right. So, it should be fine. Right. Nothing. Basically, I'm just finding a random coordinate in that space between zero and three hundred. That's all. I mean, again, math guys, you know. Well, let's see if this works. Somehow it should work. Right. Also last 10 minutes. Oh, that means I have five more minutes. Theoretically, right? Depends on next week also. Okay. Can you like, tell him to, what the hell, man? Somebody tell me, man. Right. So, am I, am I calling this method? Yeah. Yeah. Calling it, right? Drop plot points. Have I pushed it into plots? Yes, I have. Have I declared it? Fine, man. You'll see about it. We're going to debug it now. Yeah. Lord's dot I dot to pause. Okay. Let's quickly see what's happening. I have five more minutes, right? Yes. I have five minutes. Yeah, it should work. Hang on. People keep looking, man. If you see something incorrect. You see anything? Hang on. Anybody who's worked with tweets, can you tell me how a tweet will work without giving the time to run the tweet? My bad. How do I do this? Define, no? Where, where, where? Beginning of the tweet. Okay. So, this, I just want them to come, not come together. Like, you see that it has got that easing motion, right? They all come in separate intervals. I just want to randomize that. That's the reason why I put this algorithm. You can just make it 100. That should work. This should work, no? Hopefully. Yes. That's my boy. The plots are all working. Now, we have a simple problem. Okay. All the, all the math. Now, you have to just draw lines between them, correct? You just have to draw lines between them and as the plot for the lines to keep, needs to keep changing. So, again, for want of a little bit time, I was intending to type this, but since we had this unrequired interruption, just see that it's nothing. I was just creating that. Anybody who has done canvas-based programming, it is just about setting graphics style and about the stroke styles and things like that. Let me go up here and no, the line, this is just a line step, but what you're saying is right. So, we'll just do that. So, now we need to draw the lines. What happens is like there are two things happening in concurrency here, right? The plots are dropping, they're also used as frames and the lines are also going to use some sort of frame. So, just to prevent that, both of them trying to override it to each other, we'll just put a simple flag. This is just a, what do you call, same thing step. So, we will not start drawing the line until the plotting is complete. It's a fair thing to do, right? Otherwise, you're doing too many things together and you don't know what is getting, what's going, just ensuring it again. Right? So, now what we need to draw the lines after the plotting is complete. Fair thing to say. Like he correctly mentioned, you have to go to tick now. You have to go to the tick method. Come down here if plotting complete. Do the drawing madness. Correct? That drawing is yet again, I'm going to, there's nothing shattering here. Calling a g.clear before doing anything is actually useful because in certain other cases, there might be road lines drawn into the screen and you might want to just clear them out before you are actually starting to draw something. Again, housekeeping customary step. In this particular case, it will work here without the g.clear. But and finally, I would really love to type this out. I want to take a few questions as well. So, trace locations matter. You can just look at it again. I tried so the list of plots and just caused a line to that plus eight and plus seven is because I didn't set the registration point of the of the plot. So, it should be actually set eight this way and seven this way just because it was lazy and I didn't want to write that code. I have not done that. That's why I'm doing this incrementing here. It's it's ugly, but then it's functional. Right? Let's go. We should be through now. First point? Yeah, first point doesn't animate. I don't know. Something wrong with browser, right? It should be. It's never me. Even if the previous thing didn't work, it was something wrong with diesel jams. That's why I'm throwing in frameworks, right? If I said I'm writing this whole damn thing, I'll be putting my neck in the line. You know, on that note, I'm officially done. Isn't that what I showed you in the beginning? What I agree to you guys? Yeah. No, it's not almost. This is what I agreed to. I have the points I have to draw back and down. Oh, they're drawn. Oh, okay. How much? Okay, you cut my 10% I don't have time, but never mind. I can ask how much how much time do I have on? Let's see. You have three minutes. Can you copy paste that? See, honestly, I know what to do. Instead of first, I will run this and set this to zero. It will all come down. I'll again because we call that it will actually go. Okay. Not a programming topic. We're all great programmers. I was just trying to the idea of this talk was to demonstrate that, you know, I mean, a lot of people actually speak very complex things about data visualization. It is actually a job and I'm not undermining the function that I think there was a great dv talk right before mine, you know, which is like talking about data, but my intent is to also look at my I ultimately aim to look at this example is to look JavaScript with its all its simplicity before we throw in all the jargons, all the micro frameworks, you know, jithub integration and all the all the craziness that JavaScript is bringing to table today is like insane things they can do. Coffee script, SaaS, Compass, sometimes plain simple programming with JavaScript and some canvas and some really useful libraries. You can actually have a nice post lunch conversation like this. We actually built something. There was no empty promises thrown there now with all this great power you can conquer the world. No we didn't say that we actually did something which is actually pretty trivial and simple, but that is also something which I want to tell every aspect in JavaScript development. It's great to know about all the new micro frameworks and new ways of doing stuff, but sometimes writing plain simple down based JavaScript actually can give you great results. It is actually honestly speaking, I this actually took me just a little more than what I did. I actually built it as as a demo which took like three hours for me to build. So before I stop and I'll just show you something which is a little more interesting. So have you seen this? This is brilliant. I have never seen a chart like this. Somebody actually wrote a blog post completely killing the same. This is the shittiest blurry data expression I have seen. I am an average villager gate. I love this visualization. Okay, I am not going to prove somebody who did this because your data correctness is wrong. Well, it is not such important information. It's about how many people downloaded Rebecca Black's Goddamn. What is that song? Friday. Friday. Yeah, it deserves already that much importance in terms of data safety. Fuck data safety. Yeah, sorry. Are you gonna beep that? Answer your fuck. Yeah. Right. So I just, you know, you are encouraged to or rather you are requested to or rather you are told to have one. Damn, come on man. Is it networking? Okay. So that's my blog. I will put that. So this is something which I built similarly as a half-hour project. Here you go. Like I mentioned, I am a deconstructing reconstructing guy. So feel free to go look at this as well. These are interesting thoughts in TV. So now that let's code this up. Now that we have coded this up. Beer, etc. Today evening. Those are the coordinates. But you said you don't support shameless plug about your band. Coming, coming. Okay. Coming in the moment. So at www.com.com. .com slash tech is my blog. Mostly assorted tech geek outs in there. Could be JavaScript. Could be actions prepared. Anything that's on the client side. I don't discriminate. I mean, so I would write if it is on the client, I'm interested. If it's on the server, you can go fuck yourself. So twitter.com slash etc. That's my Twitter. Please follow me over there. The more number of followers I have, better hikes I get because it's one of my KPIs in the office. My manager takes it very seriously. Follow me on Jitha. There's hardly any shit there. But these, these examples are there. I just got into Jitha pretty recently. At www.sivaram.com all the boring shit write me there. Write, you know, when you, when you need something, you know, when you really want to get things done, write me there. But you want to just say hi to other channels. I also moonwalk as a musician. Like I mentioned, facebook.com slash agam the band is my band. We're actually half decent. We actually play quite a few shows. So he's surprised actually. We didn't think so. So never mind. So that's the reason to prove my claim go to reverberation.com slash agam. Go check it. Music is out there. And next time we're playing in a city, do come and cheer. And thank you.