 Hey, hello, okay, Andrew you and you forgot to the view was supposed to be here. So I'm going to Do my best So okay, as he said, I'm having some time in front of TV. I'm going to talk about talk. Yes this is a This map or one very similar to To this this is a Twitter map. You know the people tweets Obviously and we plot it on the map and we suit this fireworks, so this is the New map about about tweets that are going to use in this presentation. So don't worry guys Before I start to talk about the video. Yes, I would like to Introduce a little bit your the library and why we created it and work what we did it. So so the general point was We we needed to show the first station over time in the in the Amazonas and in the rest of the world. So We were hired to do that. So that was the first the first map that we get So as you can see so with the forest station in the front place of the wall, this is a static map. So But there are problems with the first station there are for example fires And the first station there are people cutting trees and things like that. So the first station change over the time so our final goal was to show Animated on the time to see how they hold this for the first station change change over the time. So there were like We have already like two options to show that that dataset So the first one is use the current technology using PNG types So we have a set of PNG types for each month or per week. So we switch it on the client side with for example In this case was Google Maps The other solution was to use better information and the actual polygons for the client With the with the time information and so on so we can show it using some SBD or Canvas technology So we we went with better Yeah Basically, it's not switching. Oh, yeah You can see the north of How the first nation is is growing and you should pull like The time and see how the first station change and so on so it was pretty pretty dynamic so We saw a common pattern in different places that we were working like we had we wish we saw the time component in A lot of places most of them right there with the for station So Andrew got the code that we did for we did for that project and create the first version of It was like some mix of code from different projects put out together so And we started to create different maps with with that I'm going to show you some some maps that you can do with the current version of torque In order to see that you can do it Maps different different kind of maps not related to tweets So for example this shows earthquakes in Iceland that was that was happening like three weeks ago or something like that so you can see how It looks for some of these you have you see the trains on the Different stations on there is a in this map. There is a base Based on these and then the animated layer on top I don't really know But this is really nice map It's not I mean it's not it's done by someone using card TV. It's not it's not from from us This is a farmer spraying the different plots. So you can see this and made This animated map you can see the red tones are more the more he passed like more time for for that song This is a farmer tool In this case with a plane So he's explaining this song he goes to the to the land in the street to to refill the The plane and he goes he goes again to the to the triton This is a car in Nürburgring. That's where you will now race track This is for example, we thought you can do animated if we're remated animated ifs. So So this is the format definition to get a is a Library that allows you to read the point the good thing is that you can do it on top of Google Maps or leaflet or Probably you can do you can do in like we started to do in In models maps, so this will work You can do it you come so animated that sets and you can use cut to CSS Probably most of you know you're not cut to CSS, right? Some kind of CSS that map box created Make easier to to create basemask, so we we thought okay, that's really good So we could use to render things on client side too And allow people to to to use that simple format. So we we we got to CSS the car to the car to Parcel and we created some kind of version from for process from from map box code I'm going to show you I'm going to Do different samples of the library sorry there is no code in this in this presentation. I didn't get that made So I'm going to show you an example of one million points that I said it's not three million point that I said But it's one million. So this is the final the final This is probably the first Yes, as you can see there are a lot of seeps going Is the first world war and the ships go to one to one country to another so? This is the final the final map and you can see how more or less is done. This is cut to the beat This is the editor so So you can change that we have you the design just changing cut to CSS you can Not only changing the How it looks but the animation for simple in this case I added some frames so you can you get that fair life So now that you know a little bit of Torpy.js I'm going to start to talk about the technology behind it. So I'm going to talk about three things The data format how we send information from the from the server to the client which is pretty important Server-side generation how we do it will go pretty quick Because it's not that important and the clients and the client-side render how we render how we put pictures on the on the on the screen So the data format Basically, we are using when they don't use in times in the same way that we will match or leave it or or other Do they send the data on PNG or whatever other format we do the same But we have a new component like the time so we have So we have like another another more access to the What we do is we quantificate and aggregate not only coordinates We we are quantificate and aggregate at some time. So for example, as you know top position for example one of these one of the things that that if that is They get the the coordinates and they quantify so the final size of the of the of the files is Is far less so so we use the same technique using when Mercato when Mercator pixel So we we are some information of per aggregated per per when Mercator pixel So and we with the time for example imagine that you have a data set of one year So what we do is we get the one year We split in weeks for example or in months or whatever the user wants We use we aggregate data Impositions in time a slice so So this is for the original data set. I Plot our grid on top of it So this is all the points plot and on a map. So the first thing what we do is with our phone We only send the points that It's nothing to the grid of where Mercator You can see that there are different levels of Opacity in this in this map. I don't know if you can see it pretty well, but We see we use it like it's only like the number of points or some attributes I use at once So for example in this case is the number of points So, okay, I put this slide because in order to show that there is only one point per per grid And this is the time the final time This is the XY which is the time that you have seen before and then we add another axis So this is for this is for the time looks of protein 3d If you look at the purple to the left, you can see how I some some parts of Of the six and this is the final. This is the format that we are sending to the clients This is it looks like looks like a geogation or something like that So this is basically a Jason are a rate of objects and each object has the position The XY in pixel coordinates an array with the dates for example, this fixer is actually for for It's not time the first lot is not time for a lot time and so on and then Values array that shows the quantity of each time is lot for example for fear for first time is one for Second time is not history and so on So the nice thing about this format there are a lot of nice things about this But one of the things that is really good is that the the time size remains flat Particle for for different Data sets of different size So this is really really good for for for data visualization The key point in this format is that we are not sending all the information We are sending all the information that that is useful for for the data visualization on service side We use an OGS and Using postless and actually we use post keys for for for this So basically another good thing about this format is that you can generate the whole time with that with a single SQL query So this is the I don't know if it's the last the latest one But this is this is one of the key that we have used to generate all time So with with a single SQL query, you can generate the the time you don't need fancy stuff on server side I'm finally client side. This is I think this is most important part of this of the presentation of the presentation So I would like to talk about three things here. The first of all is how we transform a time format to a render format It's in the same way that to with WGL you need to transform to vertex buffer attributes and so on You is you need to do the same for for I mean you actually don't need but it's good to do it I'm going to talk about part of CSS 2.js to Yamasky compiler and about the render so the type processing is More less simple basically what we do is we get the time we parse the JSON file and we got it to a To type a race and what is the way the reason of you know, probably most of you know what a type of write is some kind of new types that That Where I did today to JavaScript when when we gel I come up so Are pretty fast you don't need to worry about mixing things. So they work pretty well on They're not if basically so are pretty pretty good. Oh This is the This is the way we store the information internally. We have three arrays This is not something the way way we store but it's really similar is that we use pixels We have an array of pixels, but we store the all the positions We have an array of values Which mean this just contains a list of value with the pixel index that refers to the pixel the DC array And a value for that for that pixel and finally the time slots So for example, if you want to render the first time is not you get you go to the value in this This So you go to the values array and just render it with a for a simple for loop If you remember when I when I brought the format There was some kind of where types here We are using that those those types in order to tell the client side What the what type formats will use in order to avoid to avoid use more memory than needed And also we are using this in order to serialize to our to our binary format. So this is pretty It's a pretty simple approach and it works pretty well when you need to serialize all the stuff to to send to the client side in an efficient way It's the style We started to work with Cartos CSS parser we we I was I was I was looking at it looking at it and Work it so I started to they have had like Render for Mamnik to to transfer Cartos CSS to Mamnik to XML for for Manik So I thought why not transform it to JavaScript to after to actually JavaScript and I call it JavaScript say this like some internal way to call it Basically, it's not the same that which you say that's what you do. You do an operation per pixel, but this you do operation per Per feature, but it's more or less the same concept Well, what we do is we get the Cartos CSS and we have to Partials with different layers where for example in this case what we do is In order to calculate the market width for each point that we are that we are showing what we do is We pass to the function the context the map context life for support zoom position the time is not And we Return the value for the value for the market with the same in the same way that you do for line color And and so on all the properties that you can do with Cartos CSS for for markets in this case Oh another thing that we added we added today to Cartos CSS in this case is the Cartos don't create base maps and maps so there are no Not about time, but we are money. We are working with time So we added this frame of set property like some property that you can use on any map In order to render the the previous frames. So for example in this case, we are rendering it We are rendering a frame. So we are not rendering only one frame We are rendering actually two frames the current one and the previous one and the previous one We are rendering it with market with equals five And finally the the rendering the final render how we put the pictures on the screens using canvas today We didn't try actually SVG we did another another project and we saw that Come as was faster for for this matter. So so we go straight to the two to come us and what decision this is a question that I Do myself a lot of times. Why should we go where should we do use a full canvas full map canvas that covers all the All the people from the from the from the Or you see a come as per type so The one of the products that we had this time boundaries outside when we are in their points animated that rose or Do your animation moving the map one of the ones are tie boundaries. So We went with full canvas We Full time canvas is before it's good for base maps and more static maps because the library Contrasts all the dumb stuff. You don't you don't need to know about how panning and filming. So that's good with full come as one of the problems that we have is that There were no libraries for the for for this so we One that That Do so they all the stuff like movements And filming and so on and it allows you to like render It gives you a bit context to render all the all the stuff in there for Google Maps I think that it was created already and I think that I don't know if it's a guy's around here, but think thanks to him And this is the okay, there is code in this presentation This is the this is that we will render points in torque we for each point We have a lot I decided with the value for for the point and we render point in the in the coordinates, but Here there's a big problem because the style Could be hard depending on the depending on the the attributes that the user issues, you know the Conditioners and so on the style could be really hard Really really heavy. So basically what we do Is use it we use the dynamic sprites all the time So it's we don't render actual geometry on the map But we what we send to the map our sprites. So before Before rendering on the screen we we we look for for the sprite for every point If we send to the to the we do our other women's I'm not we generate the sprite and send to the Image so for example, I created this map As you can see this really nice mob nice colors is perfect. So So I took this This kind of moment and I Extract the the the sprite is that is being used in and for for this for this frame as you can see We'll render all the all the possible size all the possible capacities all the possible columns So this is this is the way that this is a way to render fast points on animated point on commas I would like to talk about that a little bit on the future And basically we are working on doing So you can put polygons animated polygons on the way on the on the map Basically, it is probably the most wanted feature in touch.js. So in so we're animated polygons There is no way to show animated polygons like like we do with with points But you can you can use raster to show so for example, this is a map of temperature on on on Europe Um Work translated to what yeah, I did some tests. I'm just working more or less I have to translate the cut to CSS to not to yes, but to but to add to our shader That's it. Thank you for listening me on this is my Twitter handle and this is there the web for cut to DB So, thank you The amount of stress I felt over CSS Qualifies it for something and of course we all know it's sequel is a first tier occupant of the Cody hierarchy Questions questions for hobby 3 million points CSS shaders the back Showing both estimating the location of it along those paths and Fading appearing the routes But sorry, can you repeat there? Location of a ship along yeah, and then the route is During the duration showing up or disappearing. Yeah Was there a timeline? On visualization Okay, what we do is render two layers Like we render the current frame and then we render the different layers for the previous frames So that's the way we we do that, you know, I mean And you're managing the transitions between two different time periods What we do is the the previous frame we create some we do like Different opacity for that What we do is to we give a different opacity we have like we render like four or three or seven As seven frames before the before of the current one So we we give different size and different opacity of the for the previous frames So it gives the sensation of some animation, but it's actually we are running the previous frames on different It's actually six or six or seven different layers at the same time But I mean you you don't so I mean you don't show the actually the path is I mean You're not showing the the path because it doesn't know about a path It knows about points appearing on time. So what we wish we are we aggregate per time slot So so that's it It just appears when you are working with with this so but there's no there is no Path or polygon or line or socially that is just points happening points plus time Yeah The I think that the the biggest data set is one for on Twitter like 12 million points But the problem is the permission on the client side the permission on the server side But when you need to generate the time for for that You need to aggregate all the data for different some levels It's the same way that you need to do with raster that you create some overlays for different some level This is basically the same. That's the problem in client side Depending on the number of points that you that you do you want to render for example in the same in the first one Of the first maps I saw Let me check if I can Well, sorry Yeah, this map Okay, in this month there are a lot of points rendered at the same time This that's that's the big problem we turn because they are They are all at the same time on the screen But for example for for animated that the data set at the points are changing that you are so we like 28,000 Points is not it's not a big problem. I mean the program is generating that that the types on on server One more question one more question Steve in the back guess what it's gonna be What was going to be as an expert in the field what do you see is the next big thing coming? So I'm not working on my book so I can say that my books is doing a read your weed with what you know I think that's it. Is there a really big thing basically not not not what gel itself But the thing that throwing Better things to the client. I think that is the next big thing because you do I think we will probably forget the The static base maps and things like that Well, we started to do that with the With the new maps where you the change that they are the street change depending on the client the user that is watching the map or the clicks of the map, so I think that's the In the following years that is going to be the thing Probably that's that's the big thing. I would I mean talk for sure is I mean the one big thing No, it's okay. I think that time and animation on Dynamic datasets are the big thing on JavaScript You