How to Create Coronavirus Dashboards with Maps and Charts using Free Tools and Data #GIS

hello everyone in this video I'll show you how to create coronavirus dashboards with maps and charts using free tools and data if you want to learn how to make coronavirus dashboards this video is for you [Music] as the world continues to respond to coronavirus more and more we are seeing the use of dashboards for presenting multiple forms of visual information about corona virus infections recoveries deaths and other information dashboards are useful way of presenting multiple forms of information in visual ways such as maps and charts a dashboard helps you to see the bigger picture about what's happening through data and by extension in overall situation like corona virus now there are a lot of really great commercial visualization and geographic information systems or GIS tools that you can use to create dashboards and you may likely have seen some of them no matter where you live in the world however I wanted to create a video that can show you how you can create your own coronavirus dashboards with maps and charts using free and open source tools and based on reliable data my overall goal with this video is that if you don't have access to commercial visualization tools to make dashboards or perhaps you're looking to expand your own technical information technology skill set this video will get you started on how you can make your own coronavirus dashboards in a sense this video is a follow-up from my previous video where I showed you how to make basic maps of coronavirus data in this video specific things I will teach you include what a dashboard is things you should also consider when creating a dashboard such as the layout of the dashboard design focusing on the end user of your dashboard an area called user experience and user centered design and how you can find different forms of reliable data that you can use to create a coronavirus dashboard I'll then show you the specific steps on how to make a dashboard using open source geographic information systems or GIS tools I've used in previous videos and also show you a chart making tool that you access right from the GIS tool at the end of the video I'll provide an advanced technical discussion on creating an interactive web-based coronavirus dashboard using open source mapping and charting tools I'll use a case study of creating a basic dashboard using coronavirus data with state-level coronavirus data from India to illustrate the ideas in this video now I developed this particular case study to get you started to think about coronavirus dashboards beyond the country level that have been very popular in the mainstream media coronavirus operates on a local level affecting individuals and I think going forward we're going to need more dashboards that can really contextualize coronavirus at the local level however no matter where you live in the world you should be able to transfer the ideas and techniques I show you in this video for building a dashboard or growt coronavirus or anything else and like I said throughout this entire video I will use a free and open source software package so you can get started right away learning how to make coronavirus dashboards links to the software data and code I use are available in the videos descriptions below and by the way I've also included a link to the full GIS project that I show you in the technical demonstration that you can go ahead and download to help you get started with making your own dashboard if you enjoyed this video please hit the like button share this video or consider subscribing to this channel alright let's go learn how to make coronavirus dashboards hello and welcome to this video on how to create coronavirus dashboards with maps and charts using free tools and data to give you an overview about what you'll learn in this video I've designed this video for people that want to learn how to create your own coronavirus dashboards that use maps and charts to show coronavirus cases I'm also assuming that you have some basic knowledge of how to work with computers in information technology specifically how to download and unzip files on your computer I'll first go over some dashboard concepts and design practices and then I'll show you how to create a basic static dashboard using the QGIS software I'll also include an advanced discussion on a web-based interactive dashboard that may be of interest to you if you have skills with web development and programming languages such as JavaScript for a little bit more of a technical scope of what is covered in this video I want to teach you how to go beyond country level dashboards for example showing coronavirus cases at the sub-national level and generally trying to provide more context I'll show you how you can compile and curate data related to coronavirus cases I'll review a core geographic information system skill known as table joining I'll show you the specific steps on how you can create a static dashboard layout using QGIS with maps and charts I'll then show you how you can prepare data for export into a format known as geo JSON and then I'll show you how you can use the geo JSON in a demonstration of a web-based interactive dashboard again this last point is more of an advanced topic but I encourage you to learn how you can start to take your coronavirus dashboards to new levels through the web here's an example of what I'll show you how to make I'll show you how to download all of the data used in this example how to process the data and how to create a static dashboard like this using a free and open source geographic information systems tool called QGIS and as I previously discussed as a very advanced topic I will show you how you can take what you created and huge yes and exported out of QGIS to make a web-based interactive dashboard prototype like this that I developed for the video using all open-source tools this prototype makes limited use of a concept from information visualization known as linked brushing where interaction between the visual interface elements such as moving the mouse over a state of India causes the same data point to be interacted with in another visual interface or in this example the bar chart all of the code for this prototype is available for download see the comments section of this video also to give you a quick overview of the tools in the data that will be used in this video links to all these tools will be provided in the comment section below I'll use a lot of commonly available open source tools that include the Google Chrome web browser Open Office calc which is similar to Microsoft Excel zip tool called 7-zip notepad plus plus for editing text files and I'll use QGIS as the main desktop GIS software and also for the advanced web-based interactive dashboard I'll show you a little bit about leet lift JFS and chart j/s leaflet j/s is a common open source mapping tool used on the web and chart j/s is a common open source charting tool used for the web datasets all use will come from the India Ministry of Health and Family Welfare and the deva GIS indian state boundaries I'll also briefly touch upon using the World Bank country boundaries detail and all these data sets will be provided in just a moment before we dive into the specific topic of creating a dashboard related to coronavirus data I thought it might be helpful to first talk about what a dashboard is in general a dashboard is a collection of visual interfaces that are used to provide measurement of some indicator of interest by combining all the visual interfaces together the dashboard can be used to give you an overall picture of the goal or topic of interest you most likely have already probably seen a dashboard most likely in an automobile in this image you're seeing a - word from a van from the United States this dashboard tells me the speed of the vehicle how much fuel is remaining how many miles the vehicles traveled over its lifetime the temperature of the engine how many revolutions per minute or rpm the engine is currently doing all of these data points are used for both the safety of the vehicle such as notification if the engine is overheating or more practical things such as how much fuel is left in the vehicle so you don't run out of gas so a coronavirus dashboard is basically the same idea as a dashboard from a vehicle combining multiple visual interfaces to keep aware of a situation that is going on in this example the status of coronavirus in a country in this image which is from the prototype web-based coronavirus dashboard that I showed you previously you'll see three visual interfaces a geographic map a bar graph and a scatter plot each of these give some indication of indicators of interest related to coronavirus in this case at the state level in India and using different visual representations to communicate those indicators in this example the dashboard is showing the number of coronavirus cases recoveries and deaths from coronavirus coronavirus dashboards have become very popular all over the world given the ability of a dashboard to combine various visual interfaces together to represent different variables of interest related to coronavirus for example like seeing previously the numbers of new cases of coronavirus people that have recovered from the virus and people that have died from the virus often these dashboards feature a geographic map as the central interface with other types of graphs and other visual interfaces use to create the coronavirus dashboard and like you saw in the brief demonstration at the beginning of this video often the visual interfaces can interact with one another using linked brushing in the next slide we'll take a look at perhaps one of the most popular Corona dashboards as of 2020 here we see a screenshot of the John Hopkins Center for System science and engineering kovat 19 dashboard as of 2020 this is perhaps one of the most well known coronavirus dashboards that's been created often news media sources use the data contained in this dashboard for statistics and figures about the state of coronavirus in the world make note of a few visual interface elements in this dashboard note how the map is the central visual interface and in this example showing coronavirus cases at the world level note that there is a line graph on the bottom right that shows the cumulative number of cases around the world and note how they also provide controls for changing the styling of the line graph in the dashboard also includes basic statistical numbers such as the total number of cases around the world and a country breakdown if you're looking for inspiration for how to create your own dashboard take a look at the John Hopkins dashboard a link for which is provided in the comment sections below of this video when creating a dashboard it can be important to give a little thought as to what you're actually going to create before going about doing technical tasks as a reminder your goal is to combine separate visual interfaces into one overall interface take a moment to think about what you want to show who is the audience give that a little bit of thought for example are they the general public government leaders technical specialists the type of audience for the dashboard is often what will dictate what type of visual interfaces that you will use in the dashboard I'll talk more on this specific topic in a moment when I discuss the idea of what is called user centered design and think about how do you want to show it do you want to use a geographic map a bar chart a pie chart text these decisions will often be made by the type of data that you have to work with as well as the audience that you're designing the dashboard for and keep in mind that creating a dashboard is often the iterative process you most likely go through several designs and variations once you come up with a final design that works for your intended audience for example before you start spending a lot of time on doing technical tasks on the computer you might just want to take a moment and sketch out with good old pen and paper the design of your dashboard this can be a very helpful way to develop prototypes that in the long run will save you a lot of time not creating something that will not be a value to your users of your dashboard in this example I sketched out a simple dashboard design that features a geographic map that takes half of the size of the interface along with a bar chart in a simple text table later in this video I'll show you how you can turn the simple pen and paper design into an actual product using QGIS software and data stats I'll show you how to download and work with and like I said earlier dashboard design can be an iterative process so you may in fact experiment with several different designs before you actually build something in this example I reconsider the design I showed you earlier by making four equally sized visual interfaces that contain a geographic map a scatter plot a pie chart and a bar chart so remember a paper prototype can be a very cost effective way to start designing your dashboard and getting feedback from people who might use your dashboard before you actually get into the technical tasks of building the dashboard and as one final comment always keep the end user of your dashboard in mind or really anything else that you're going to make this is what is known as user centered design or the idea that anything you create is always being built around whoever is going to use what is being created as opposed to creating something that's more focused on the person who's creating it for example it's easy to slip into the trap of making a fun and interesting graphic that looks cool and interesting to you but has no actual end value to the people that might actually use what you create and remember the KISS principle key but simple if your dashboard is too complicated people will not use it think about a time when you tried to use something that was overly complicated and would have benefited from simplification such as a complicated website or app on your phone for example perhaps you visited a website you found very difficult to navigate and you clicked away from it within seconds related to the point is the bigger idea of what is known as user experience or UX user experience as a well studied field this diagram highlights some of the key points you should think about when engaging in user experience for both creating a dashboard or anything else as seen in this user experience honeycomb diagram for example useful your content such as a dashboard should be original and fulfill a need usable the dashboard must be easy to use desirable ideally through image identity brand and other design elements will be used to invoke emotion and appreciation findable your dashboard needs to be navigable and located on site and available to people think about accessibility is the content of your dashboard accessible to people with disabilities such as color blindness or perhaps they can't read incredible as you'll hear me saying a lot of these coronavirus videos you must use data from credible sources users must trust and believe what you're telling them with your dashboard or anything else you build for that matter so with some of these background concepts in mind let's now begin to think about creating a dashboard related to coronavirus cases at the state level in India which is the featured case study of this video at a minimum you can go through some of the questions that I outlined just a few moments ago as part of the design process for example what do I want to show I want to show Kovan 19 confirmed cases discharged and deaths at the state level for India based on official sources who is the audience the audience for this dashboard will be the general public and how do I want to show it I'm gonna use a combination of a geographic map a bar chart and a text info table as I want this to be as easy to use for as many people as possible as per the ideas of user centered design and user experience that I previously discussed so for example when developing the static dashboard for coronavirus cases in India I'll use this paper prototype sketch to inform my design and as you can see this hand-drawn prototype then becomes the final product that I will show you how to create using QGIS let's talk now about the datasets I'll use for this dashboard as discussed in previous videos it is essential that you use reliable official data for any kind of coronavirus product you might create dashboard map or otherwise for this case study we're going to use Ministry of Health and Family Welfare data published by the government of India a link to where you can access this webpage is available in the comments section below note that this webpage as of 2020 does not give you direct data that you can download however it is conveniently structured in a table that'll show you how you can pull off of this webpage and plug into a comma separated values or CSV file that we will then bring into our QGIS mapping program note too that when you're watching this video data on this website may have changed in terms of its format so make sure to make any adjustments you see if there's something different between what you're watching in this video and what you're seeing when you go to look at this data yourself I'll next show you how you can download what is known as reference data in the form of the boundaries of Indian states we will obtain these data sets from the diva GIS website which is a useful source for finding free reference data on country boundaries around the world particularly at the sub-national and administrative boundaries such as Indian state boundaries as opposed to just country outlines I also want to briefly mention about an important geographic information systems or GIS technical topic that we will do in hands-on portion of this video specifically we are going to do a table join a table join is the idea that two data tables have a common column or field in common using this common field or column the two tables can then be combined together into one table in this graphic the table on the left is a reference data set that shows the boundaries of land use polygons the land use polygon contains a column called land use code that is a number the table on the right contains descriptions of those land use codes as well as a land use code number because both tables have a column that contain a land type code number the two tables can then be joined together by joining the tables together the final map can then contain the textual description of what the land code description is which is more intuitive to the map user as to post adjust a land type code number for the hands-on demonstration we are going to do is join together the state-level coronavirus data from the government of india with the administrative boundaries of India that we download from diva GIS by combining these two datasets we will then be able to create both static and interactive dashboards a process that I'll show you in the hands-on demonstration I do want to mention that I'm also going to use the World Bank country boundaries these are an excellent data set for providing country level reference data I will not discuss how to download and incorporate these data sets into QGIS as this was a topic I covered in another video and see the card above to reference that video where I talk more specifically about these specific data sets before I get into the hands-on technical demonstration let's just first go through the specific steps involved in creating a static coronavirus dashboard step one we're going to acquire state-level coronavirus data for India in step two we're going to acquire reference Geographic data for India in step three we're going to prepare these data sets for table joining in step four will join the datasets together in QGIS in step five we will then create a static dashboard layout in QGIS in step six we'll export the data sets out as geo JSON from QGIS and then later I'll show you how to plug the Geo JSON into a web-based interactive dashboard with all these steps in mind let's now begin the hands-on technical demonstration to show you how you can make a coronavirus dashboard with charts and maps alright and welcome to the hands-on portion of this video we're gonna start with downloading kovat 19 data at the state level from india and what you're seeing right now is the website of the Ministry of Health and Family Welfare and what we're gonna do is load this page up and scroll down and we're gonna look for right here where it says coded 19 state wise status click to expand so when I click on that you'll see this table of information or data about the different states of India confirmed cases cure discharged and people that have died now keep in mind this website may be different at the time you're looking at and keep in mind too if you're not from India but you want to do something similar you do have to be a little creative with how you can go and access data for example I can't just go and download this data directly I have to do some minor technical tricks to get it out now I was particularly happy with this data set because it is easy to capture so what I'm gonna do is I'm gonna open up open office calc and this is a software similar to Microsoft Excel and you can use Microsoft Excel by the way if you have it but this whole lecture is using free and open source tool so I'm going to use OpenOffice calc and all I'm going to do on this table on the website is highlight everything so starting and I'm just gonna scroll down and I won't grab the totals but I've got all the different states I'm gonna right-click and do copy and then I'm going to come back open to over office calc and I'm gonna click on the first cell right click and do paste and that's it it's that easy and so now I've got the state level data in a table format and I can eventually join that data on to some state boundaries that we'll do in just a second so what I'm going to do is with this I'm going to save it and this whole video I'm going to use my C temp directory for downloads and other things and I'm gonna call it India kovat and I'm gonna save it as a CSV a comma separated file is that's a pretty universally available file format text CSV and I'll keep the current format and I'll take the defaults there ignore any warnings and that's it now we're going to come back to this in just a moment we have to do some cleanup but let's move on now to step two where we're going to download reference datasets for India and for that we're gonna go over to diva GIS and I have a link to this in the comments in the video and I'm gonna look for India and by the way I use this website as it's really easy to use and it's got country data from all over the world so if you're not from India but you want to build a dashboard for your country you might find this to be a useful resource and I'll find India and from the drop-down here I want the administrative areas I'll hit okay and I'll click on the download button here and I'm gonna go ahead and put that in my C temp directory where I'm putting all my project files ind india admin i'll save that 14 megabytes and i can do this little thing here in chrome i'll show it in the folder and there it is india admin now 14 megabytes this is where you have to unzip the file so i'm going to right click i'm using 7-zip and i'll extract it to its own folder and you may if it's easier for you you might want to rename it and what you have inside of here now you have several what are known as shapefiles and these are what are going to be the basis for our map when we will create in just a moment here okay so that's a technical thing but admin zero admin one and so forth those are different sort of administrative levels in the country so we're going to next now do is start to look at some of these files so I'm going to go to QGIS that I already have opened with a brand new project with nothing in it and again this isn't a video designed to train on all the aspects of QGIS are really sort of quick and dirty way you can get data into QGIS I want to take the admin one SHP or shape file I'm going to drag that right out of Windows Explorer and drop it in the layers pane and what I get with that is I get all of the states of India and again as I talked about earlier in the video we're going to take and join this data onto these states so we can start making some dashboards and the first thing we're going to want to do is take a look at what's going on underneath here if I go to in in admin one I right-click and do open attribute table you can see the different attributes associated with each of these shapes a state of India that I've actually visit is Tamil Nadu so when I highlight that row you see how the shape turns yellow because that record has been selected in the table and of course this is a much bigger topic about GIS in general there's links I'll provide for if you want to learn more about this stuff but we're really focused on getting into making a dashboard okay okay let's move on now to step three and prepare these data sets for table joining now the central issue here will have to deal with is the fact that we have to have a column between the two of these data tables basically the attribute table from the Indian states and our Cova data that's in common so we can basically take all the data from here in to this table here and the main issue is that we have to really work out that column now if we look at some of the columns in the Indian states we'll see that there's not exactly something that's directly related we could possibly use the names but there could be some difference in the spelling what you want to do with a table joint is you really want something as easy as possible in ID column and so forth now it might be tempting to look at this if you look at this column a s number 1 2 3 that looks pretty good but when you look at it closer there may not be exact matchups so for example like number 8 ID number 1 column 8 over here is Dadra and Nagar Haveli apologize if I'm saying that incorrect and over in this table number 8 is Delhi which is number 10 over here so you could possibly you could possibly use those numbers and maybe ignore those ones but here's what I recommend for you as a longer-term investment let's say that you're planning to make dashboards for your given area of interest for a long time it would be worth it to actually update this table so that you can do subsequent table joins in the future and so the way you would do that is I'm actually then going to make a new column in the shape file I downloaded and I'm gonna make an ID a new ID number based on what I get from the official government data so that down the road if I want to update it again with a table joint I already have it all set it's a little investment of your time but it's really not that bad once you do it so the way we're going to do that is let's see we're going to start editing the data set toggle edit mode and we have to look for the look for the we want to click right here a new field and we're gonna call this new field I'll call it new ID for identification I'll make it a whole integer okay and then basically what I'm gonna do is put these two windows side by side and I'm going so I have the kind of the name here and I'm basically just going to make match the two together now if you have a better way to do this I'm just going to do it manually so I know that on-demand Nicobar Island is going to be one and it might be a little easier actually to do it like this yeah I'm in Andhra Pradesh we'll be number two number three and so forth and some things to point out too when you get down to the example I showed earlier because these are union territories and they're not being reported at least in the state data I'll just give those a value of zero because they don't for now have a corresponding ID in the other table I'm not gonna make you watch me put all these numbers in but just note here at this case too here's another one that's missing and also note the spelling between ERISA and Odisha how they're different you can fix it in different place depending on how you want to represent on a map but just make note of that as you go through these datasets and this can this is not just a thing for India you always got to make sure that any dataset you download especially for free will have consistency here's another little thing to point out to sort of the alphabetical order between these last three ultra per deaf Sutra channel and West Bengal which rekon cuchara Pradesh West Bengal so again just just keep a close eye on these things so Ultra Pradesh is actually number 31 over here which were khan there's number 30 and West Bengal is gonna be 32 okay so I went through and like I said I've matched up all of these numbers and I've created my own numbers over here in a modified version and make sure to always save your work once you do that because you just made the time to go through all that and now let's go take a closer look back over it over here we just have to do a few modifications of this data whenever you do a table join you need to have the easiest format of the data so what I'm gonna do simply is change some of these headings around so I'm kind of and call instead of calling it s number I'm just gonna call it ID I'm basically just taking out all the weird characters I'm gonna call this one state I'm gonna call this one confirmed I'm going to call this one discharged and again this isn't specific to India anytime you work and create your own data set you want to have the easiest column headings no special characters because it can be a real pain sometimes to get table joints to work correctly because of annoying formatting issues so I've got here we go in next dataset we got five columns got all my records and so forth and it looks like I am good to go to bring this over so I'm gonna save the CSV and I'll close it because I don't need it anymore and I'll go back over to QGIS okay now let's move on to step number four doing the actual join of the datasets in QGIS and the way I'm going to do that is I'm gonna go up here to layer add layer add add eliminated text layer and I'm gonna browse to my C temp directory where I created that CSV file and here it is right here India kovat CSV I'm gonna open that up and by default CSV comma separated values it has no geometry it's just what's called an attribute table and this is what you want you want a nice here's all those column headings looking good the data is all ready to go I've got my ID and so forth if you run into problems if you're not seeing something nice and sort of clean like this go back and double check your underlying data on things like commas or dashes or weird characters we'll trip up the import process and so far so we're gonna head add and I'll close that and so now you can see here India Co vid there's my table and let's go ahead now and do the table join so what the way that's gonna work I'm gonna go to the India admin I'm going to right-click and go to properties joins then hit the plus button to add a new join and the join layer is going to be India Co vid and it's going to use the ID and the target field is going to be the one that we created and engineered it so it matched the numbers in the data we downloaded and that's it so join layers India Co vyd ID the new ID I hit OK hit apply and if everything worked correctly when I go to the attribute table now of the administrative boundaries and open the attribute table I should see and there you see so I see how here it says India kovat state so all of these are the records from my CSV file and as a check name one this column we're all the data records from the original shape file and these are all the join data and that's this is what you want you can double check so this if the names are the same you got it and what you really wanted here are those numbers and this is what we can now use to make our dashboard lift all right now let me just show you even with before we get to making charts and dashboards and so forth let me just show you real quick what you can do with this map one thing that you can do if I go to the properties and go to symbology and click over here I can start making what are called choropleth maps so I click under here and I do graduated and because of my table join I now have numerical data and that's the whole power behind a table join why it's so common in GIS is that you can bring numerical data and combine it with reference data so let's say I want the confirmed number of cases I want to make a map showing that so I use that table join field and I'll do down here natural brakes with five classes I'll hit apply and you can see right right off the bat I get a choropleth map now one thing I did want to mention just a little bit about cartography and design is making your colors just look a little better and I recommend using this website called color Brewer and I'll put a link to it in the video and this is a wonderful resource that you can use to make maps that look good but also use proper color science I know I've seen plenty of maps that are very poorly designed and color Brewer for example like I want to show five classes using sequential colors and perhaps with a single hue or a multi hue right and so what I can do then is set that up because I'm using numbers and I want five classes and so forth and these are kind of the colors I use when I was on putting the slides together and then when I can go over here is get the RGB or the hex value depending and what I can do then is plug those values in to my QGIS value numbers or color color values here so if I go back over here and let's say instead of using white for that symbol I just double click on that white shape I go to color I select choose color and then I get this HTML what I can do is go over to Color brewer and you have ways you can export it CSS and so forth other ways way I deal with too is just I kind of highlight and copy it come over here paste it in oh whoops I clicked on the wrong one and what yeah that's what yeah there we go and I apply and you can see the start of this now I won't make you watch I won't make you go through me watching me do this for every single one of them but I'll do one more so the next one I'll double click on that shape I'll go to color so instead of this sort of salmon pink I'll do choose color and I'll go back over to color Brewer and I'll grab the second one so basically what you can see is I'm just matching up the five color classes from low to high and I'm applying them into my map here I'm going to copy that hex value put that in the HTML notation hit OK okay and apply and so forth and you can see the maps are changing let me um I'll go through now and apply all the other colors and not make you watch me go through applying all these colors okay so I've finished applying all the color Brewer colors to my confirmed cases data and you can just see the map just it just looks better we're using the color Brewer color so I recommend using that resource in fact if you use tools like ArcGIS Pro the color Brewer color palettes are what they use now so don't just automatically use whatever colors come up there is there is lots of cartography and so for another big topic that we don't really have time to talk about so let's now start step number five creating a static dashboard layout let me first show you to a plug-in called plotly which actually can be a very handy little tool for making charts in general and the way I'm going to use plotly is I'm going to install a plugin so to install the plug-in I'm going to go up here to plugins manage and install plugins and I'm assuming you don't have it installed and I'm gonna look for it's called data plotly and this is a nice tool for adding information data graphics that can go along with your map so I'll go ahead and install that plug-in and I'll close this window and you can see here now I have a new button that shows up so let's go ahead and open up plotly and I'll make a basic bar plot show you how just to show you how it works so I'm gonna select bar plot and let's make a basic bar plot or chart showing the confirmed cases by each state and so for my X field I'm gonna select name one and for my Y field again this is where my table join is still coming in my confirmed cases and I'll just use the default values here and so if I go ahead just with that and I get who create plot you can see it gives me a basic bar chart and you might want to do if it's not checked already dynamically update the size so that will help with if you adjust your windows and so forth between the two now this in itself is is a kind of dashboard right so I've got a map over here if you're new with QGIS you know I can do things like click on identify and that tells me things about it in a cool thing with plotly is you know I can mouse over and so forth and if I click on records here it'll highlight the corresponding record in my table now for some reason I honestly don't know why this is you know I call a learning moment it's added a second one here and maybe somebody in the comments can tell me why I'm not I don't claim to be an expert on this but I can go and clean the plot canvas kind of just start over and do a single plot and create a new one and that'll clean that up and so I can mouse over and get things when I click on the various shapes by the way I have a couple things selected if you need to clear the selected features one way that you can do that and again somebody else might be able to give me a better way of doing this deselect all and so when you use a tool like identify it'll keep things selected and once you clean up the graph you can see how you can mouse over when you click on notice how when I click on part of the graph that's highlighting the corresponding record in the map that itself is a kind of dashboard so even that might be helpful for you to have the map compare with a data graphic and so forth okay so where we're at now we've joined the datasets we've created a map we've created a simple data plot and now let's move on to the next step which is to create a static dashboard layout and what we're gonna do with this is we're going to combine the map with two different plots or graphs all right let's move on now to the next step where we actually create the static dashboard in QGIS oh and by the way don't forget to always save your project [Music] all right as we get ready for this next step I've gone ahead and added the World Bank country boundaries into our map to give some what you call some context or figure-ground relationships between India and surrounding countries I'll close the plot let's do a few things to get this map ready for making making a static dashboard layout the first thing I want to do is actually clean up the presentation here a little bit so instead of calling it into admin one I might call it India kovat 19 and instead of having all these decimal places in my legend I'm gonna click here and have them trimmed out inside having multiple 0 that's pretty handy it allows you to do that so I'll hit that to apply there and so forth so just me and another thing too I'll do is under properties is add some labels and I'll do a single label and I'll label it with that name one and I'll maybe make those down a little bit I'm not going to spend a lot of time on you know fine-tuning every little bit of this I just want to show you what's possible and you can see here that adds kind of the names of the of the states on there and again if you see this yellow one is selected from before you can open the attribute table and I believe it is yeah deselect create ctrl shift a and see now it's 0 so we've got a map ready to go and let's do that now to create a dashboard so I'm going to go to project new print layout and I'll call it [Music] okay so the first thing I want to do to start building my static dashboard I'll add a map front of the add item menu and I'm gonna make it about halfway of the page sort of as per the design layout we showed earlier and it'll take a moment to render now the first thing we want to do of course is adjust the position of India we want to really fill things out so I'm going to do that with this here and then I'll use my mouse wheel to very gently zoom the map in and then I hold my left button now to adjust the the pan of the map and you know India is kind of interesting it's both long and wide in terms of filling that frame out and I'll click this one if I want to adjust the this part again and I think that'll be pretty good now design-wise I have all this open space and let up I'll put my legend in there next and the way I'll do that is add item add add the legend and I'm gonna fill that space out there and some of these things I don't want to have in my legend so what you can do here for that part is go over to the legend items uncheck auto update and take the things out that you don't want I don't need to show the the CSV file I kind of don't really need to show the country boundaries in the legend but the way I set my my title up India Kovan 19 and so forth now let's say you don't actually maybe India kovat 19 is not very intuitive so what you could do to fix that is save it save the save the layout go back over here and change the name of the the lair because you're showing confirmed [Music] okay now unfortunately you have to redo a little bit some but if I click Auto update you can see it brings everything back so then I uncheck that and then I just take the things out I don't want but now I've got a more intuitive legend and again I've positioned it so that the legend is taking advantage of that space that's created right there and when I'm happy with it I can lock it down so that nothing happens to it now some other little things you might want to do for the design here though is to add a frame around it and so forth and you can use the zoom to see how it's shaping up so that just gives a little bit more contrast you could really do the same thing for the map and so forth like I said I'm not going to have time to go into in depth every little possible thing that you can do but that's why I'm making a good map takes a long time because there are all these little details that you can work on and make it look nice and so forth so that we're already off to a good start though all right let's go ahead now and add the plot item in so I'm gonna do here is go select add item and plot item and I'm gonna make it you know fill up that quarter space there and over here I'll select plot item and it'll default to scatter so what I want to do now Nexis collects set up selected plot and I'm going to make um I think they call it a dual plot where I show two things so I'm gonna change it from scatter plot to bar plot and I can make this a little bigger so I long more room to see what I'm doing and in this case the X field I'll use the state names in the Y field like I showed you earlier I'll use the confirmed cases and I'll make that one blue and I'll give it the plot of title [Music] and so forth here and let's update it and see what it looks like and there I get that okay now if you wanted to add a second plot what you can do is go over to UM you click on that to get out of here now if I go here and add another one make this a bar plot and same thing I'll use the name one and this time let's say I'll use the deaths and I'll give that bar a different color make it red because it's it's showing something powerful like people that have died and so forth and if I update it you can see now how the the plot has changed where it's showing different values you know the first one was the confirmed cases and the second one is the death by state and now you can make a lot of adjustments to this layout in general I found that when I was preparing this you actually have two most of the main things like the labels and the title come from the thing that's the top the first thing so I go back over to this one uncheck the horizontal legend that'll move things around a little bit and you'll have to play around with this you know make that to size it up a little better and so forth right but that's again as per the the dashboard idea now this is your chart a bar chart with two different variables and let's add one more thing as per the design I showed you I'll save this nope that is a template I'll just save it alright let's add one more thing to our static dashboard I'll add a data table so I go up here to add item and the attribute table and what I'm going to show here are the top 10 states with discharge values now the first thing you'll see you get tons and tons of columns so what you want to first do is go to your attributes and you can start paring out things you don't mean like you don't need to show all these ID and ISO you basically want the name and whatever it is you're interested in so I'll just go ahead and start removing those so I want the name 1 a little tedious but it doesn't take long for you to get to what you want and then so if I hit ok so you can see right right off the bat that will kind of make you make it a little more readable and so forth now if you just want to adjust the discharge values again I can go and take everything else out I'm sorry we're gonna do just the confirmed value so I'll get rid of discharged in the death rate and then I'll sort the table by descending don't forget to take that one out and I didn't click that so we want okay so now you can see how I've got just the states sort of the top ten now there's more than ten that are in here so kind of a hack I did when I was putting this together as you could just simply resize it and so forth depending on how you want to show it in and so forth so I've got one two three four five six seven eight nine ten eleven twelve fifteen ways you could make it bigger to fill it out you can make the table heading font a little bigger and that'll push records out one two three four five six seven eight nine ten so if Punjab is the the final one there you go so kind of a little bit of a hack but you know again I don't ever claim to be a complete world expert on all little aspects of using these tools so if somebody has a better way of doing it please write a comment in the section below but what I do like to show you is what's possible and so forth with just generally getting these tools started oh and one thing else I should mention too just to make it look a little better in presentation instead of using name underscore one if I go to attributes I'll give the heading I'll call this one [Music] I'll call this one confirmed cases and makes that a little nicer presentation all right finally what you might want to again always save your work now you might want to put some other things to think about here you might want to put a line around that a frame kind of make it visually standout and you might also want to add a label for a title again something like that and you have a lot of different formatting just like you've seen in with the other you know if you're new to these tools once you work with them you'll find they have the kind of the same way you usually make your title the biggest thing and looks okay I can see a typo here I'll fix that and I'll make that in the center so it's really prominent and so forth so there we go there you have a basic static dashboard but as you learned about in the beginning of this video it has a geographic map it has a bar chart showing two variables and it has a data table and this could be a product even though I made it for you quickly that if you spent more time in really refining it could be used to show multiple variables of interest using visual interfaces and what you can do with something like this of course always save your work you can then go ahead and layout export it as an image and I'll just save it right as a PNG file you can adjust all that and you get your graphic right here and then you can use that however you want you can put in a report put it on a web page or so forth and you're good to go and there's your basic sort of dashboard graphic thing now I also want to show you one last little thing that's kind of important if you want to make your datasets more widely available and that's to export this data as a Geo JSON layer and it's pretty easy to do so I'm gonna go back to the main QGIS program I'm gonna go to my shapefile that I created the join I'm going to right click I'm going to right click on that layer and do export save features as and it right by default it's going to give you a geo JSON and I'll save it in my project directory I'll call it India now I'll hit the Save button and you really don't need to do much with it that is pretty much sofyan you can if you get into more technical stuff yeah we'll add it to the map to see what it looks like and I'll hit OK and takes a couple seconds to run but what you have here now is you have a new data set a geo JSON which I didn't really explain much what a geo JSON is but I'll provide a link for a geo JSON it's basically a text representation if I now were to right-click on this new file and open its attribute table it basically took the shape file for the state boundaries combined it with my CSV file and now they're all sort of one master file and with this I can now use it in my web-based dashboard that I've talked about earlier in this video and just to look behind the scenes here's the file it just created just make note it's actually kind of a large file it'll create almost 22 megabytes because basically what it is is a text file with every little vertice of every little shape rendered out in text so it makes a really big file format and so forth so I hope you found this of benefit in terms of how to go about using huger I asked to take datasets that you've downloaded curated brought in to QGIS done a table join created bar graphs and then created a layout and there's a lot more room for improvement you can go from what I've showed you relatively quickly and so in the next part of this video I'll give you a hands-on quick demonstration of the interactive dashboard that will take the Geo JSON that we created as the final step in this process process and takes it to a whole nother place where you can use and interact with it finally I want to do a brief demonstration of a prototype web-based interactive dashboard I put together for this video some of you has asked me about how to create coronavirus data and maps that can be put on the web and in the spirit of this video being focused on free and open source tools I created a prototype accordingly note that development of a web-based interactive dashboard especially using open source web development tools is a very advanced topic however that should not discourage you and I would encourage you to learn web computer programming languages such as JavaScript so you can begin to build like what I'm going to show you and note that I'm not going to do a coding demonstration rather I'm going to walk you through the existing source code so that if you do have some experience as a web developer you can get a sense of how all the pieces fit together as a starting point for your own development especially if you are new to doing web development that involves using mapping and charting tool libraries source code for this prototype is available through my website and a link to where you can download the source code is available in the comments below and as one final comment note that this is just a prototype tool I put together for this video to show you what's possible I'm not a full-time web developer and I would encourage any of you with web development skills to take what I've started and take it to a new level okay so welcome to the but I'm convinced part of this lesson this is just a really quick overview of this prototype open-source kovat dashboard that I built with leaflet J s and chart J ass if you're somebody who has web development skills I think you'll find this of interest or hopefully this will encourage you don't want to build something like this so what I have here is when I move my mouse over the different shapes it makes this bar chart interact with it and that's we might call linked brushing and I can move it around you might notice the colors look familiar from what you just saw earlier in the video if you're new to mapping web mapping tools this is leaflet J s it's a very popular open-source JavaScript library for mapping it's similar to Google Maps and so forth this is using chart J s chart J s excuse me for doing the charting and again like I said it's a prototype so there might be some little bugs in it and the scatter plot doesn't interact with other things but what I'm showing on the x-axis are the confirmed cases and on the y-axis the discharged and I have the labels accordingly now let's look under the hood as a little code walkthrough I'm not gonna not going to code the whole thing out for you but if I do view page source and again that's why this is the advanced thing it is helpful if you know what JavaScript is and cascading style sheets and all the other web tech stuff but like a lot of these tools first take a look at all your various script references how you're going to pull chart Jas and leaflet and so forth and I give links to all these things the very first thing you might want to do those jump down the bottom here and make a note of this I've tried to comment this code as much as I can to show you what's going on get JSON so basically what you want to do is that geo JSON that we created back over here right I took that file this file put it on a web location where it can be accessed and then it comes into into the sort of this web client or the dashboard right and so it gets read in now what's cool about this is that the Geo JSON created from QGIS drives everything so all the data the map and the charts all use the Geo JSON data and you can see some what are called callback feature so what'll happen on every feature and so forth and another thing I might want to point out is here so on each feature this is when leaflet is bringing a new dataset in when it processes every feature so in this case that's every feature is every Indian state boundary and what I'm having it do is create a separate data array I'm calling scatter data that that populates the via the scatter plot and this I had a little bug the way I did it was I had to update the scatter plot every time it pulls data in so make note of that you also have things like this is how the resetting the highlight highlighting the feature that's all this when these things happen so when you know move your mouse over highlight it move off accordingly that's setting the colors and so forth there's also some things in here you'll find those color Brewer colors that I showed you earlier that's how those are applied to the map legend and that's down at the bottom actually is where the the legend the map legend it'll take hard coded class values that I used from QGIS and plug those in to create the color ramp using the color Brewer colors and this is kind of an important part to the info update so info is basically from leaflet it's a control that leaflet helps give the map in terms of things that are on top of the map like these shapes so the idea is here every time you move over one of the shapes you're calling this sort of update function and what it's doing is it's grabbing the data out of that current shape that's been moved over so like the confirmed cases that discharge the down and it's gonna create a div tag HTML this part is what updates all this stuff here so notice how when I move my mouse Kouta pradesh ja cond tamil nadu and so forth it updates that and then it also sends off to new chart it'll send that data off to this function which is right about our new chart yeah it basically updates this variable again I don't claim to be an expert on everything about chart J ass chart J a so I learned enough to kind of be dangerous to make this but it's basically sending that data into re rendering of the chart so when you move over a map shape it takes the data from that map shape sends it over here and updates the chart and that's why you're seeing the chart move along so something you could do if you're interested is maybe update it to also update the scatterplot or highlight the scatterplot I just didn't have time to do that and so forth the scatterplot just gets rendered when the page loads window.onload I have it start out with just nothing so there's something appears and it follows the same general function it takes data that I showed you earlier how it gets populated it puts a title and tooltips this part is what will do the actual display of what happens when you move over the the scatterplot so when I move over these shapes the fact that says Tamil Nadu and the data values and so forth I couldn't honestly figure out how to make it break down instead of having it be on one line in terms of the x and y values but again it was a prototype to show you what's possible so that's kind of a quick whirlwind advanced tour of this prototype the code is available if you're web developer I think you'll find it relatively easy to start working with and again it's using all open source tools that are linked and so I encourage you to take it to a whole nother level look at other dashboards that are out there and create something unique and original using open source tools and if you do let us know share it back that's the spirit thanks a lot thanks for watching this video I hope now that you have a good understanding of how to go about creating coronavirus dashboards using maps and charts and as a reminder all of the software data and code examples given in this video are free and open source check out the links below in the video description how you can access all the tools datasets and code samples use in the video to get started right away with creating coronavirus dashboards using maps and charts and as one final reminder this is just the beginning if you enjoyed this video please subscribe to this channel like this video leave me comments or send me a message I love hearing from the YouTube community thanks a lot for watching [Music]

Channel: GIScience

Views: 6,116

Rating: 4.9387755 out of 5

Keywords: Coronavirus, Data, Dashboard, Charts, Maps, GIS, Geographic Information Systems, QGIS, DataPlotly, India, Design, Training, Education, Computers, Software GeographicInformationSystems, Open Source, yt:cc=on

Id: mQCl7tKqNz4

Length: 74min 47sec (4487 seconds)

Published: Wed Apr 29 2020