React Geospatial Visualization with kepler.gl

hey how's it going at Tooley holiday and today we're going to be checking out this tool Kepler GL from the folks at uber it utilizes map box and it allows you to visualize some really cool data and just as an example you can do this you can do heat maps you can do geo JSON but why don't we just get into it and get started so there's two ways you can use it way one is you can just use it hosted by them on their domain and that's a great way to get up and running there's really no coding involved at all but you can also install it into your react app and tweak things and load data from api's and do all of that yourself in code so we're going to be covering both ways in this video so the first way I'm going to be copying over a CSV file kovat 19 it's called and by popping that in it automatically loads the data into the map so if I were to sort of zoom out and it's showing nothing right now I've loaded it I can see here sort of the data I've imported sort of country latitude longitude what date and how many confirmed cases there were but it doesn't show it on the map so what you do is you add a layer and we'll just give it a name confirmed and we decide what we want it to look like so let's just go with points for now but you can do clustering heat maps hex pins all sorts of different things so we'll do that we'll pick what fields to use for latitude and longitude so right now you can see it start to show itself on the map we can tweak the color to make it like a red we can change the radius of these right now they're all the same size but we can base the radius on the value column and I guess I never did a really good yeah it's good enough I was gonna say I never did a good job of showing what the data looked like but just to to review that every country and maybe every state within that country has one row with its coordinates the date it was recorded on and how many confirmed cases so if we were to sort of pop down in Australia we've got the territory or province that it happened in where that is on the map the day and the value how many cases so the value being the number of cases we can change the radius based on the value and make sort of more cases show up as larger circles on the map so we could sort of do that and here we can sort of see China's really big Italy Spain in the US are the biggest I think this is Iran in here and that's basically it so once we have it showing on the map there's ways you can filter it so you can say I want to filter by say country and I only want to look at the cases in Italy so Italy doesn't really break out into the different zones that it happens in but we can filter down on any of the fields so let's do another one let's do it on the date and we'll go sort of near the beginning we can see that at this point all of the cases were over here in China but if we were to filter sort of to a later point we can see that the cases have shifted let me remove the first one the cases I've shifted over here into Italy in the United States so once you sort of have it looking like what you'd like you can export it and you can save that map as an image if I were to just click this open I can get this map export it as a PNG I can share it with others I can do tons of cool stuff with it that way as well but let's stop at this point and let's look at how to add it to our actual react app it will load this same data from a JSON endpoint I set up essentially it's just a gist that on github where I copied in sort of converted this CSV data to JSON data in the right format we're gonna load this data and show it inside of our own react code so let's pop over to our create react app right now it's just saying the word app and we're going to open up that code so there's a ton of imports a lot of it has to do with how Kepler GL stores its data it utilizes Redux so we have to set up some of the Redux store and reducers and whatnot but it's sort of a one-time thing if you already have Redux that's fine it sort of fits in with your existing Redux setup and I'll explain each of these imports as we go but right now we're just exporting this app component that says a div with the word app in it which is why we see this here so the first thing we need to do setting up Redux is we want to set up our reducers reducers basically allow the state to change from sort of one value an action takes place and it produces a new value we don't need to get into Redux at all we just basically need to set this out for kepler to work so we will create a variable called reducers and we'll call this function combined reducers and combined reducers you pass an object where you're sort of combining all of your your data points and the function the reducer function that manages that data so we want to set up some data called kepler GL and this will be managed by where is it coming from from kepler reducers there we go so the Kepler GL reducer will manage that state so with our reducers set up so that if you had additional reducers or whatever you could say app and some function that manages that data but we don't need to worry about that so reducers we now need a store this is where the data will be stored and the reducers will sort of manage that data so we'll call this store and we'll call the function create store from that is imported from redux so the things you pass to this function the first thing are our reducers I forget what the second parameter is but we don't need it and then we need to pass some middleware that Kepler GL uses so I'm not even really sure what they use it for I think they use it for sort of managing asynchronous events but we don't need to care really so apply middleware and we need to pass this task middleware function I'm gonna post this code and it has all of the imports you need to run this so if you want to download it feel free and go ahead so with our store we now need to make this store available to the rest of our application so we'll put that inside of our app so I've got react Redux installed it has a provider component so we'll pop this in here and we have to pass our store to that and inside can be the rest of our application we're going to create a component called the map so let's just create that down here we'll return for now a div that just says on the map and let's make sure that our app is working I'm the map so it looks good so the next thing we need to do is get the map actually displaying so at this point we're going to use a component called kepler GL and kepler GL is what renders the actual map so we'll give this an ID of kovat you can have multiple kepler GL maps at once in which case you you give them different IDs to differentiate between them we need to provide the map box what is it called written down map box API access token so you'll need a map box account to be able to use this how you can just set up a free token if you're just playing around with this I've already loaded my token into the dot F dot local file so I'm able to access it by process dot end react app map box API I called it and the last thing we need to do is give this thing a width and a height so I'm just going to set it to window dot inner width and window and the height being window dot inner height oops dot inner there we go so the map is turning returning Kepler which is hopefully rendering out let's go back and it is so at this point we can essentially use it the same way as the hosted version was working over here I'm just gonna close this so my computer doesn't it go too crazy but um we've got no data in here so we could add it by sort of dragging and dropping CSV files and whatnot but why don't we load this JSON data that's coming from an API in this case just a raw just file on github so let's get started with that so to load data I'm going to use use SW are stale while revalidate from the folks at site so it's a hook used for loading asynchronous data so I'm going to create a variable here called our data and we'll call use SW r so use SW r you need to give it a key so it can differentiate different calls to to external data some coffee and then you need to give it a function whose job it is to basically go and grab that asynchronous data so it's asynchronous so we're gonna set it up with su not a wait async and then the function that goes and fetches it so to fetch our data we will use fetch in the browser so that gives us a response that we're going to await and we'll call fetch and we need to pass it our URL here so I'll just copy and paste that okay so once we have the response we need to get the JSON version of that so const data equals a weight it's also a synchronous response jason and at this point we can just return the data cool so we've got the data we could do a console dot log just to make sure that it is working let me inspect here every object this is the data that we loaded from from the API and I'll just show you quickly what it looks like it's a combo of fields basically describing the data that's going to be in each of the rows so I've got my country which is a string state string the day that the recording took place of the confirmed cases I've got it as a timestamp latitude longitude our real er floats and then the count is an integer and then I've got all of the rows of data so if I were to just look at sort of the first one it looks the same as the CSV that I was looking at earlier I'll commit this in the repo but I wrote a quick Ruby script Ruby's what I sort of code day in and out at work so it's what I'm most comfortable with that would basically loop through the CSV file and produce the correct JSON file I took that JSON file and I uploaded it to gist in that sort of how I went from this CSV data here to this JSON data here but Ruby that's that's for another day right so we've got our data but we need to get this data into Kepler so you do that by utilizing Redux and dispatching an action an action is a way that basically Redux takes this action and it produces the new state which Kepler will then display so to do this we need the ability to dispatch an action to our Redux store so we can do that I've got this used dispatch hook imported from react to redux so why don't we just pop this up here at the top so dispatch is equal to use dispatch and when do I want a dispatch I want to dispatch any time this data changes so I'm going to set it up and effect so react dot use effect hook so we've got our function and the things we're watching to see when they change so we'll put dispatch in here this should never really change but that's in there and we also want to look for our data I don't think you need to worry about memorizing the data because I'm pretty sure use SWR handles that for us to avoid sort of constant re-rendering if you needed to you could use the use memo hook to be able to do that to avoid sort of excessive changes to the data causing use effect to rerun but I think we're good in this case so what we want to do is when this happens first we should just check do we have data because use SWR goes through like a loading state where data is empty so if we have data then we want to dispatch in action and with sort of an action function you can call already in place called add data to map so we're going to call that and then we need to pass a bunch of data to this I haven't memorized that so I'm going to come into our sort of documentation on github and I'm going to go look at their example and I'm going to copy it and tweak it because that is so much easier than trying to memorize that so what you can pass in our data sets that we're going to be adding to the map so we'll give it a label called covet 19 call it Kovan 19 here and our data so this would be the data that we loaded from our API so we can change it to that but that's overkill so just the data will be passed up here and remember it's already in the right sort of format where we set it up with defining the fields and its definition and then all of the rows we want it to load in I showed that in the console and we can also set other options so should we Center the map around the data so that it sort of confined the map covers all the data read-only do we want the user to be able to tweak this in any way we'll say I'll read-only false meaning they can and you can also set up configs so one of the configs for example are pre set up some filters will just do that ourselves but you can modify all of that through these Redux actions so I'm just going to say config nothing for now we're not going to change anything and at this point we've loaded the data we've got an effect that we'll watch when the data is changing so if we have data we're going to dispatch an action up to our Redux store which should get Kepler to display the data on the map so if we go back to our app close this console refresh cool so now we have all of our data showing and then at this point we can go in and we can tweak what it looks like so let's make it this red color let's change the radius to reflect I call it the count and now I want to show a really cool filter option that we never touched on before because I changed date field to a time field sort of with our US or the day plus the hour and all that stuff if it's in the time format it gives you this really cool sort of visualization tool and sort of this is all of the data is sort of going back to January 2 now if we filter that down to sort of just maybe a couple days we can actually hit play on this and it will step through the day and this allows us to sort of visualize the effects of this virus sort of it's starting to spread in China and then as time goes on I believe it will start to pick up in Italy and in Spain and then sort of as that's picking up finally the u.s. is catching up so you can see it is sort of spreading across the world here we can make it go faster so pop up to 3 3 X so it's spreading a lot more quickly we could also like view one week at a time and my computer's struggling a bit to render all of this and also record the video but it's a pretty cool visualization No so if we were just gonna pause that let's hide it I'll just show what the image looks like when we export it so it shows here if we're happy with that we could maybe increase the resolution get that to render us that and we can download it so downloading it we get a nice PNG like this that you can share with all your co-workers and make them jealous of your sweet map visualization skills so why don't we just review this very quickly way up at the top I had to import a whole bunch of packages to be able to handle the Kepler set up with Redux but we step through sort of all of these individually the first thing we need to set up our reducers create a store to store our kepler stayed in we set up our app component with a provider providing the store a read X store to the rest of our application so our map inside of map component we started by just returning the Kepler map which is under the scenes rendering map box and we added in an ID a token its width and height and then we went through the work of sort of loading data from an API watching sort of when the data is there dispatching that data into our Redux store so that it shows it on the map one thing I didn't really show you I just quickly go back to the web I'll remove filters it's just sort of other ways you can visualize it so there's hex bins so we can make it bigger and you can change the the height of them and you can base that on sort of the count and what you can do is switch to like a 3d view and you can sort of see that the higher points are the ones that um that have more cases could make these even bigger and now we start to see some some red ones with more data anyways that's one way to look at it you can look at them in heat maps like this so we can make our sort of radius is bigger but base it on the count so now we're seeing sort of where the hot spots are around the world that's probably good enough for now we've got cluster did well as well we can change sort of how big the cluster points should be and as we sort of zoom in they break apart you can hover them to see how many points are in each one so the there's tons of different ways to visualizes data in in Kepler hope you enjoyed the video try it out for yourselves I'll publish this code and link it below in in the description on the video and also why don't I'll deploy it to some sites so you can actually click and view this data as well have a great day everyone stay safe bye

Channel: Leigh Halliday

Views: 27,320

Keywords: react geospatial viz, react geospatial visualization, react data viz, react data visualization, react geo, kepler, kepler.gl, react data, react maps

Id: BEZjt08Myxs

Length: 22min 25sec (1345 seconds)

Published: Wed Mar 25 2020