 slides now? Yes, you can see the slides. So, I'll start the talk now. Thank you. Okay. Go ahead. Thanks. Hi, I'm William. I'm a software developer and today I'm going to be talking about data visualizations and maps with JavaScript. So, I'm going to show you something similar to this today. It's blurry, but I'll show the real thing later. And there are problems with mine. I'm not sure how to, if I can, if you can see. I don't know if, can you see? We still see the slide with the... Okay, I have this. With this map. Manually. I think that's better. So, I can... Yes, I can now switch. Now you can see. So, if you look, like, with what map you see, I'm not sure if I've done something wrong or map box does this. Like, the D is cut off in New Zealand. I'm sorry about this. Like, I write down some notes inside my slides. It's because this talk has been postponed quite a few times and I might forget. I might forget what I want to say in the presentation. Here's another interesting thing to look at. If you can't see it, it's fine. Here it is zoomed in. There's a problem here with a data visualization given by Channel News Asia. There's supposed to be something here, but there's none. And I think it's just a mistake, I think. I mean, they probably didn't really care about it, I guess. So, what I want to say is that everybody makes mistakes. And I'll be... I guess this was done using D3. I can check now, but I guess it's done. I'll talk about D3 again later. And here is where a lot of data visualizations you see now are taken from this repository. And I just want to note that there's... And just notice that there's only one repository. And I'm also really grateful for the work that you can see in this repository. All the slides, these slides are going to be up on GitHub later on, so you can look at this after my talk. Okay. Here's the sources that this repository takes from. And I wanted to show this source, this part of the repository, because this is the data that I used in late March. And just notice that... Oh, gosh, it's so big. Late March, you get province and state, country, region. Last update, all these headings. And then this is your raw data. But then on... But then on... I think this was one week ago. And I'm just guessing that it's the same now. The headings have changed. And the raw data that I pulled from was different. Actually, a lot of other people pulled from this data. And they created APIs. I don't think I'm going to talk about that later. Here's something interesting, which I'll... I think I'll... Yeah, I'll talk about pulling from this source later. Here's just something interesting that I found that I think it looks nice. So when you build maps in JavaScript, I think you look at these map libraries at first. And so leaflet, open layers. And later I'm going to show where I got stuck when using open layers. So I ended up using leaflet for speed. And it looks like what I wanted to get in the end. You probably use these map APIs as well if you're working on maps. Some things that you might consider is like pricing. So for map box, I'm quite scared. So for Google Maps, you can set daily quotas to protect against unexpected increases. So you don't want your billing to suddenly increase without you knowing. Which I faced when using map box. So it's important to pick the right tool for the right job. And don't be like me if you can avoid it. I only picked leaflet because I only ended up using leaflet because it works nicely with map box. And it got close to results I wanted to get. So for security, you might want to look at that too, like how it deals with tokens. And how each of these map APIs deal with security. And how good their documentation is for security. So you can link leaflet to Google Maps by using plugins. You can also have a look at these other plugins as well. Like Apple's MapKit.js and Ink Maps. Like there's comparisons usually between Google Maps and map box and other map APIs. I'm not going to go through that in this talk. This talk is just meant for things specific to what I wanted to get. Also, if there's a plan, if there's a better API that can help with open source projects, like what I did, that would be best. Because I don't want to worry about building and things like that when I'm doing client side small projects open source. So before the demo, I just want to say again that if you take data from a repository or an API, be prepared for the data format to change and break your entire app. This will tend to happen if you automate pulling fetching the data. I'm not out there. Something I considered was like automating the whole process to get the latest, to show the latest map and the latest data. But after a while, I realized that if you pull from a dynamic API, your app might break. It might be inaccurate, which is not good for your users. I'll talk about this later in the next slide. Or now. It should also have to changes every day or extra other intervals. If you intend to work at a news organization or medical institution, this might be helpful for you. This is also helpful for database in general. So something I thought would be nice to have. I think it would be nice to have if you do any of this database in the future, let your users choose the primary location. Because you look here and what I want to see is data on Singapore. And I get this. And I have to slow down. Get to that in the end. It takes time. Also, there are enough existing visualizations online on COVID already. Please don't add more unless you can maintain it well. That's why I'm reluctant to add more to this. This whole thing I'm doing is just a learning tool. You can use it to deploy something, but just maintain it well. When I started off, I tried to use both open layers and leaflet. Just to do a comparison for them. And I think I tried them both around the same time. But what I got for open layers was this. What I got in the end, what I did was I followed the documentation and for some reason I did service. I would just not what I wanted. And then I did the client side thing. That's what you get when you use open layers. That's what you get when you use open layers. And open layers compared to leaflet, it's nice because like, for instance, if you want, it localizes the language of the locations automatically. It gives you, gives that out of the box for all the different places in the world. But the thing is for open layers, I got stuck. I got stuck here and I didn't want to move further because it's just more complicated because I wanted to get something similar to this, which is shown in Channel News Asia. And I don't mind it looking like this, but to get the markers on, it's quite difficult. I think it was quite difficult. So that's it for open layers. So I tried leaflet. I was going to show the real, like, what I was trying to recreate. And it's this thing that's on Channel News Asia. And it's kind of, kind of laggy. Anyway, this is mine. This is what I got after I used leaflet. So when you zoom in, you get, well, you get, like, the darker red areas are places where it's more affected, I guess. And then when you zoom in, you get a similar thing where you can see for each country, like their current situation. And this is March 21st. So I'm going to go through how you can build something like this five time. So the HTML is here. Add leaflet. Add another thing for leaflet. It gives you this, and the documentation is quite nice. And I joined, oh, I'm not sure if I have time. Well, I joined both chart.js and leaflet into the same app, actually. So what I mean by chart.js is, like, you can view the, you can view the cases left as well on the same. I just put it all together. So that's what chart.css does. Then all you have to do for leaflet is add this. All you have to do for chart.js is add that. And notice I don't use d3.js, and I use chart.js. And if I have time, I'll go through that. Why I try to avoid using d3 now. That's the buttons to switch between them. Access token here, which I'm not going to show. But the whole thing is open source, but I remove the access token and the public repository. This is the data from John Hopkins, I think. That's the data. And then script for leaflet is here. And that's all it takes to do, like, all of that. So I think you set the bounds of the map here southwest, northeast. Then you set, when you first load the page, you set the center here and set the view here. And I think I'm not sure which country it's set to for default. I think it's London or something. Then add the tiles. So for mapping in general on the web, I think everything has to use tiles. 512 pixels, I guess. I think so. Everything's made of tiles that are this size. Set the markers, which are the markers are the blue, these blue things where the pop-up comes from. It's tattooed. The circles are the circles. The red circles. Add them here. I'm trying to, I'll just go through this. For each data set, for each data point, you add a marker here and then it's pop-up. And then you add the pop-up to the position latitude, longitude on the map. You add the circle as well. Then you add the marker layer. The layer of markers, all the markers, which is all the blue points onto the map. And then you add all the circles onto the map. And you think you've added all the markers already, but what do you have to do? I'll tell you later. So all the blue, blue points. I think you should. Oh gosh. I think all the markers I pushed here, but I'm not sure. Do you remember what that does? The thing is, I wanted to add comments onto this, but I thought I'd be able to remember. Anyway, you have to add, like I've added all the markers already, but I have to add it again. I don't know why I have to do that for leaflet. And then I want to remove them. I think I have to clear them every time you zoom in at a certain point. I have to delete these blue markers at a certain zoom point. And the thing is, actually I shouldn't have even gone through the code. Like what I tried to do was, I just wanted to show this, but what you might firstly do is it'll show this, all of this, but what happens is that the whole map is shown. It shows all the markers and all the pop-ups for the entire map, even though it's not in the view right now. So in my code here, which is public, which is open source, you can find out how I did that. And it's these few lines only. But what it does out of the box is that it shows you all the pop-ups outside of this view. And it lags a lot. There's a very huge performance hit because all these things are dumb. All these things are built using the DOM. The pop-ups are all dumb. I guess the markers, I think the markers are images, which is not really not ideal. So okay, I think I've gone over time. Which is really not ideal. So I got around that, made the performance quite good. I think it performs better than this, which you can't even really load. And also something about this I've missed out. I fixed for this, I fixed there. This great thing you get when you drag to the top or to the bottom. Okay, William, how about where do people get the project from if they want to try your code out? I think it's on my GitHub. Let's type in the search for data visualizations and maps. Your GitHub is WL2, is it? Yep, it should be up here. And it's this search for this repository. And all you have to do is all you have to do is add the private key for Mapbox in this string here. And then you can get the whole thing and view the whole thing. Okay. Thanks a lot. Very interesting. We're going to open it up for questions now. I think Eric's going to unmute everyone in case anyone wants to ask questions. I don't know if Jian can help you with the billing because I know he's had trouble with that. In the past, I have one question for you. Did you try making the circles because you made them darker when there were more cases? Did you try making them larger by the number of cases changing with the size? I tried not to do that because I knew that that would take quite a long time. So I avoided doing that. It takes a considerable amount of time compared to how I got all this set up. It was quite quick. And I finished this within one or two days, I think, sometime in March. And I think joining, getting those large circles and doing it like Channel New Asia, there's also maybe performance problems that you might have to deal with as well once you get that out. Maybe. We can never know about performance until we try. Yeah, I guess. I guess you could try. Anyone else have questions for William? Actually, I've got a question for, I don't know if I'm allowed to ask. Yeah, go ahead. Actually, it's difficult to ask in Zoom, but I was wondering how many people still use D3 for their database. I don't think I can ask online. I think everyone can click on the path participants button at the bottom. And then you can select yes or no. I mean, everyone can select yes or no, and then you can see it. Yeah. And yes means D3, right? Yeah. How many people still use D3 for all their... No means something else. You can ask why you don't use it anymore. I still use it, but I'm just wondering how many people still use it. And actually, the follow up question would be, have you found anything better? Because it's causing it's cost problems for me, like for some work, and it happens again. And I ended up using Chartgears. I used to use D3. Now we're using Victory Charts for React, which seemed a little bit easier to get going with, but I couldn't really say which one is best. I think D3 would give us more flexibility. Victory was very simple to just put the data in and get some charts and some interactivity. Okay. So maybe at the end, you can have more chat after the end of the meet-up. And Keter.