Animated Map Visualizations with Deck.gl

Oh so hi I'm Peter bush I tell you a little bit about myself I have kind of a background in data visualization weird design things 3d stuff sometimes when I waste a lot of energy and sometimes putting some on line things like d3 interpolate pass and use query programs recently on the open source community for some reason science let me design a cover some of the research we did in our lab on the spread of false rumors I don't think allows me to do it again but that was something so to tell you how I came to Boston I did a basketball visualization online the Boston Celtics said hey that looks pretty cool why didn't come do that for us privately and I said okay so I quit my PhD and moved here that was about four years ago now and I thought wow life is really fun when I get to hang out in the arena for every home game and program or just watch but it was maybe too fun so I was like let's leave that's too easy so eventually I found my way to court eco cortico is a non-profit in the MIT Media Lab and that's where I lead the engineering and design teams we're very small company but we do text for good I want to tell you a little bit about what we do and what motivated me getting into this kind of mapping stuff before I get into actually showing you guys some cool map stuff so bear with me as I talk about this we are hiring to join our small team local or remote so the main project we're working on right now which I think is important for our current this society is called the local voices network or LVN and the mission at quartic only a couple minutes foster is to foster a constructive public conversation in communities and in the media that improves our understanding of each other and so we kind of see the world right now is this kind of divisive place and the public conversation is kind of at its worse than it's ever been and we're trying to find ways to try to address that through kind of fighting against divisive stereotypes and looking at lived experience and so what we've done is we built this device we call digital hearth because it glows and people gather around it to talk but it's basically this IOT device that has a Raspberry Pi and in a speaker but just microphones and it records people talking has a little in this wedge though I'm not going to talk to you about that controls it but basically people come talk around it and they share their kind of hopes and concerns of their community and like some experiences from a first-person perspective we take all that we uploaded to the cloud transcribe it run natural language processing and machine learning on it and then provide these insights back to the community and then to local media and to local government with hopes that we can kind of elevate under heard voices and get it kind of more even ground for everyone that lives in their local area but okay the way this works is we have these hearts and we have these hosts so we have a bunch of volunteers we have maybe like 60 or 70 volunteers I didn't Madison Wisconsin right now and they're trained to host conversations and they take one of these hearts that are hosted in a library and so we have we partner with libraries which is how this whole thing comes together so at quartic oh we're founded by this guy Deb Roy I don't know if anyone's ever seen this TED talk does anyone know it by any chance some nods a lot of shaking heads but it's amazing this TED talk is unbelievable I had nothing to do with it unfortunately but it's really amazing is basically he did something totally crazy which was installed microphones and cameras throughout an entire house and record the first four years of his child's life and how the child developed speaking and you see he's able to construct like this growth of the word water from a mumble and along with this talk which is 20 minutes long and well worth your time it's like amazing visualizations in there and so when Deb comes and he's like hey about those libraries Peter what if we what if we try to leave visualize that and like try to show people the growth of LV and what if we show them like a hearth in every library can you do that and I'm like oh Deb sure I'd love to and then I go run for help but he's he's got a you know he's very creative guy super smart guy too so I was like I got this though I got this and here it is right on okay we get the globe I show everyone where all the libraries are and boom we put a hearth in each one and so I go show Devlin like Deb look I'm done what do you think and that's the talk actually so thank you so much for coming appreciate it yeah of course only he wasn't too impressed with that as neither are you I assume so he was like you know what why don't we try it again and I realize okay maybe we got to use some real data and so it turns out there's like twenty twenty thousand ish libraries in America which is a good amount it's a good amount to draw if you want to kind of be respond so you could probably get away with like some canvas things SVG is probably too slow but when there's cool tech out there that does cool maps why not try to use it because you might as well learn while you're at work so let's talk a bit that's kind of what motivates me learning about maps and doing this animation thing and so I'm gonna go through for the rest this talk we're gonna do something risky and maybe we'll all learn something by the end it might be that you should have left after the first talk but we're gonna try doing some live coding of this map that's gonna try to visualize roughly 20,000 libraries well doing some baby steps along the way so what do we need if you've never done any has anyone done map programming before or maps on the Internet much oh wow good a minute you guys okay so I'm just gonna very basically cover some just cover some some basics so things that you need if you're using a slippy map which is what we're really familiar with it just as once you can click and drag and kind of zoom and it loads tiles and stuff like that you can get away without using those if there's something really basic but for the most part you choose a tile provider in this case we're going to use map box it's a little bit more affordable than Google if you end up reaching a scale that requires pain plus it has lots of cool integrations with the software that I wanted to use the kind of basic utilities you might run into and doing map programming these are three of them tako json may be a bit less important than the other ones but goj time is like the language that all geo data um I shouldn't say ology but like of the common form of formatting geo data and it's pretty verbose but it's it's used commonly across the internet top with JSON is a more effective way of or it's more effective it's just more compressed it just doesn't store as much it's more efficiently stores the same data as geo JSON but it's not as supported by different libraries so it's like about eighty percent smaller than geo JSON so if you're ever sending geo JSON across the wire you might consider top with JSON and then expanding on the client and turf KS is kind of like lodash for geo it just gives you a ton of functions for working with geodata it's super useful to know about not going to go through these functions but you get the idea it's like working with latitudes and longitudes and geo JSON it's just a pain in the ass latitude launch doesn't work nicely like normal XY coordinates do so it's handy having these helpers and to give you an idea what a Geo JSON looks like the main things is there's geometries and features so geometry could be like a point or a polygon it's a collection of coordinates which are longitude latitude and that's like a really tricky thing to learn at first because you're always like we always say latitude and longitude right but it's more natural but the reason you can remember it is that think of it as XY longitude is for X and latitude is for Y and so just remember the order is always longitude latitude features are like geometries they just nest them inside but they allow you to add additional properties like maybe the square footage or the name or whatever you want but we're not gonna get into that really this is just like a really the most basic possible geo JSON primer so getting to react when you're using react these are the libraries I decided I wanted to use react map GL is a wrapper around the map box glj s API that lets you do it in declarative react style and also provides a number of help helpful layers and overlays to make built working with maps more easy and Dec GL is also by uber they apparently have a strong need for visualizing data on maps that uses WebGL to like really power big data layers and if you ever go to this website you should it's a beta lots of cool examples there and the example we end up may not look as cool as some of theirs but it'll be helpful I think I put the code up for the end product already is commented on in the meetup as well this link but it's up there if you want to take a look at it and decide whether you want to stick around but here are the here are the steps that we're going to go through we're gonna start from basically nothing we're gonna add a slippy map configure it with map box get some components that can navigate it so we'll have some buttons that we can click to navigate around the map externally we'll use an SVG layer and to try to show libraries in Massachusetts and then try doing some animation react spring has anyone use react spring has a ooh one person wow that's interesting rats bring it how it react motion are like or the other some people okay anyway it's like a very common or maybe it's the most hyped animation library for for react but it's just show some basics of using it then we'll switch to using Dec GL to show all 20,000 ish points eventually we'll try a couple different layers and Dec to yell the Geo JSON layer an arcs layer which is really cool and probably gets a lot of hype just because how it looks so if you want to impress people quickly you can use that which is what I usually want to do so highly recommended and then last thing we'll try doing some animating with a custom version of the arcs layer and react spring it's a lot of stuff so I guess we should start okay and I won't feel bad if y'all just like jeez this you can't yell at me if I'm doing something dumb or if it's too slow so let's first start off by making sure we can see what's going on is that font big enough please tell me that font is big enough well you threat rosette what bigger oh my god can you just move closer okay okay it's fair hey we can we can argue as well it's gonna be good okay so here's what we're starting with look at this sweet it's our math app it's just the emoji so we're starting off this is just react crate react app I deleted serviceworker j/s notably any other changes I made let's see there's like some CSS and here just to put some buttons on the page I have the secret folder that we won't talk about in here I have an environment variable that sets my map box access token this is needed just so you can actually render the tiles what else we got and we have a CSV data file in here that we're gonna this is where all the libraries are coming from which includes their latitude and longitude all right so first thing was okay Godspeed to me okay let's start off with drawing a map so we're gonna need a map component let's just start assume it's going to need a few things we'll make it the full screen so width height equals 100 eh okay feel free to yell okay this is all looking good and that's not going to compile okay map touch is okay so in here let's close that ok width height here we go we're gonna import actually the default from react map GL and we're just gonna render this so what do we get when we do this v equals pretty exciting let's see oh we get that's not very good okay hey we got a map okay I'll see a good start yeah we're doing it we're doing alive okay so well we can't do anything with it so don't clap too much okay we can we can't click we can't drag we can't see anything but it's a map and it fills the screen so it's a start so the thing about maps in react map GL is they they take view states which are these kind of nice bundles of information here's an example one this is a subset of one but they're gonna just predefined some locations they have latitude longitude the zoom level and this cool stuff called pitch and bearing and so what we're going to do is we're going to kind of provide these to say this is where you should start off looking at so I'm just gonna make this a prop that it takes right now and I'll just give it another one I can't remember what the order of writing that so say view state equals view state right on change one of these okay let's just make that equal okay so we don't know what those props are going to do yet but let's go into app and we'll say okay we need view state to be something right and this one's going to be a handle change new state whatever so we're gonna use hooks have how many people use hooks here Oh half the audience are hooks well they're not - they're a little fancy but here we're just gonna go through some basic stuff we're gonna use it for storing state so we're gonna have set view state this is just going to be a react new state and we'll start off with locations dot coolidge and whereas locations coming from all right having the Bourdon look at me we're going myself and we see one more thing which is to be able to have a handler now react map GL is a bit weird maybe not weird but it has a it's callback uses a nested object so we're gonna say we can't just pass the setter directly we're gonna say okay it's gonna save you state see it's nested step for you state to state okay so it's just this all we've done is wired in our initial view which is at Coolidge right and we have a handler that says it should update and if I did that right okay we're looking at Coolidge right so there's Coolidge corner right here in the middle and we can now we can now zoom in and out cool so it's not too bad I mean it's a little bit of boilerplate but the reason why I'm actually gonna use the the view state stored in app as opposed to in map is that I want to have other components be able to change it like I don't want it to be a controlled component I don't want it to be uncontrolled so what I'm gonna do now is like okay well what if I add some buttons that can make you navigate to those locations I had listed before right so why don't we create another div over here I have this is where my sneaky my really shoddy you CSS is going to show up so let's just go over my locations object right and we'll say let's just I don't need it let's just return the button ok because key is going to be key on click well I'll get to that in a second and we'll say okay it's going to be key right so all I've done here is now I got these buttons on the side okay they don't do anything yet but they each represent if we recall one of these objects right one of these view states and what I want to say is like when I click it let's just set the view state to that so we can't use our we can't use our handle change thing but I'm going to get ahead of myself here and I'm going to say let's say handle fly to destination given the destination let's just let's say set view state I can do something here which is a bit strange maybe but I only want to I wanna be able to say like if I only give a latitude and longitude just fly to there so like let's merge the current views with just the changes I want and let's do that as a fly - and so now I can say okay handle fly - and my on click can just be a handle fly to those locations at key right everything looking good so I can come in here now and oh I mentioned earlier there's this cool stuff you can do with map box which is you can adjust the pitch so if you hold the option button you can do this really sweet stuff where you like make it 3d and rotate it around which i think is really cool so these things you can see as I click them they're just jumping to the different they're jumping to the different locations right ok it's not that exciting but this is basic right so now the next thing we want to do I think is make it animate as one would and luckily react map GL makes it pretty easy we can come in here and we can say okay transition duration to seconds okay so I'm just adding transition duration to my fly to handler and it's just adding that into that view state that fancy view state object and it says oh I know to do when you do that so I come over here a little Marty on Coolidge if I click Boston we get a nice fancy 3d kind of angle right that's what you showed a dad and you're like huh you like it and so now we have these things so this is cool it's pretty good but if I go fly from Boston let's say in - actually yeah Boston to New York ooh that wasn't so nice I mean sure we had to load tiles along the way and do some cool stuff you can do with service workers actually to cache the tiles along the way but I've only done that once and I didn't feel comfortable okay so this is kind of a weird animation what it's doing is it's linearly interpolating from one spot to the other and now normally what you see in like well I don't know what normal is I don't know why I think it's normal but you like zoom out and then you zoom into another spot that's kind of the fly - that's really trademarked I guess maybe it is so the way to make you do that there's these fancy things called interpolators and the default one is linear we'll say new fly - interpolator and we'll just say hey we know what that is even if you don't let's just import it react map Geo okay good enough for me so I just added so sorry I'm probably move too quickly there but all I did was add into the handle fly to this other key right it that's it these two lines now now we have some sweet possibly interpolation between these situations so I'm in Boston I'm almost in Boston and now I'm in Boston and I'm gonna fly to New York like we just did but now it's doing the kind of ooh look at that dev I worked four days on that you know like two lines but I had to read a lot okay so we were in academia sort of right so readings cool all right cool so we did it that was like step one oh my god you're like Jesus gonna take a while how y'all doing good good high energy okay oh shoot what's step two okay now we're gonna look do some actual data stuff right let's draw some libraries that's what we're all here for reading and libraries I'm promoting the good things today okay so have you been to local libraries by the way they're super nice I was surprised I just moved to Coolidge Corner real nice okay so we're gonna load some data another hook thing here we need some some state to hold so let's just do set libraries sorry it's all in one component Adam don't get mad okay you start off with an empty array and we're gonna say okay we need an effect so on on Mount this is the same as component did mount let's say because I'm just being lazy maybe you component denied any component update but I'm just saying what it mounts essentially go fetch this data and I'm gonna leverage my background and data vis and say I have I have CSVs help me d3 and so d3 is gonna say okay fine if you make me CSV I kind of hear it always arguing me my my coding habits okay so basically this is just a fetch wrapper okay and it's gonna give I provide some function that's going to say for each row and the CSV like do this raishin instead okay I wanted to just return an object I'm gonna say okay it should have an IDE okay I'm just gonna make the index the ID geez that tooltip is really aggressive States it's going to be D at state and then we're gonna do everyone's favorite way to convert a string to a number with just putting the plus sign in front of it the longitude imagine that the latitude okay so that's it I'm just gonna do this and because you never know if you did anything right in this world we're just gonna log it out okay oh boy on console logging and a live talk okay ooh Oh what do we do is that libraries it's not never used thank you yes lent you're the best so let's actually add something here we're gonna say then libraries let's just I'm just gonna be a little paranoid here I actually don't even know if I need to do this but I'm gonna make sure the libraries that we have have positions d dot position at zero doesn't equal null and deed a position that one doesn't even know okay cool it's too bad prettier has the line late so long and then I'm gonna say then set libraries okay so I just wasn't actually saving it two states are here I'm fetching okay it's all boring everyone knows how to fetch stuff but we're saving into State now okay we have 26,000 libraries if we expand one of these things okay cool there they are they just they're very simple right they're just objects with a little latitude longitude the state and the ID okay boring I know let's move on so what I want to do next is cool I'm gonna pass these into my map component and say okay now you care about libraries did you know okay now I care about libraries what's doing what should we do with the library oh my gosh okay so let's let's liberate ourselves I said we gonna start with SVG so I'm gonna say libraries masked is going to be react out use memo oh man we're going ham on the hooks but this is just saying don't compute this more than you have to this one we're gonna say yeah state just Massachusetts libraries and only we compute this if library strangers okay that's what that says so okay we have libraries in Massachusetts we want to draw something now let's do ever get into using some of the cool parts okay you're like you should have started with the cool parts okay so SVG overlay what we're gonna do is use this thing called an SVG overlay which is really nice has anyone ever written SVG code before it's kind of like the Dom like you know you throw some tags out there it's basically the same grant draw a circle and a G tag is basically a div it's a group I'm gonna create a new function I'm gonna create a new component in the same file and it's gonna take in a couple properties let's call libraries and radius okay and let's have it just return this one thing SVG overlay redraw equals redraw and I'm gonna save you ooh let's redraw a good point okay so a redraw I'm able do cost okay redraw is equal to this is now react map GL thing which is saying oh this is react about GL wants redraw provides a very handy function of hunk reflection sorry called project and so remember that all these things are latitudes and longitudes right and we need to show them on 2d and we're dragging this map around and what that latitude longitude in maps you can change depending on a whole ton of things and so that's just called map projection and so we need to convert our latitudes and longitudes into XY positions so the easy way to do that is just say well first let's just we're returning this is our redress so this is gonna go inside of an SVG component and we'll say okay for each of the libraries what do we want to do let's just say a circle key is going to be live dot ID CX is going to be oh this is where I need to do some fancy stuff okay right it's just talking to you all about projecting when I wasn't gonna do it XC y is given B Y and R is gonna be radius okay nothing too nerve-racking you know if you never wrote SVG so here we can do something lib position so this is taking that latitude longitude tuple and it's gonna very helpful tool tip thank you it's going to convert it from she's launched two to X&Y for us to then render a circle CXC why is the center of the circle center of the index position in the Y position and it's gonna draw it in theory on the screen so this is our simple overlay that's now drawing SPG with map aware coordinates it's not too complicated if we come into here now we have to say how do I use it well the way react map GL works is you just make it a child so I'm just gonna say okay SPG if you overlay example and we have libraries is equal to libraries mass thank you and radius is equal to 115 okay wow I haven't looked at the screen in the while anything's gonna work okay okay hey pretty cool pretty cool we got we got circles for days let's click Massachusetts let's zoom out oh my god it's Massachusetts hey they even put a library on what does that Martha's been a man tuck it does anyone know no one knows okay anyway doesn't matter go in there in a few months right okay so here's our here's I think it works pretty good you know I just I got to say my favorite color when I'm doing these things that just keeps me happy I got to just add a little color to this I like to use tomato I don't know why I don't know who named these things I would like to know who named these things to be honest but like anyway it's very pleasant color so now we know we're really doing it okay so we got the redrawn data on a map it's drawing we can click and move we can even go 3d like do this weird thing it's sweet right that project function looks so innocent but hey it's doing some work so we're gonna do some cool to this now excuse my language go excited okay so what we want to do is let's see if we can just toggle this on and off so like one of the cool parts of having the map as a separate component is like we can control it externally right so let's go back into our big app mega component make it bigger and let's just make another state staple thing it goes for reactor use state 15 okay and let's do handle toggle radius great and we'll just say this is going to be a set radius if radius is greater than zero make it zero otherwise I don't know some random number I how about that how about that so this is just some random toggle that'll either turn our circles off or draw them with a bigger radius right now we have to make radius a prop to our map and we need some button that's going to call that handler right now this is just standard react handle toggle radius okay cool we call it radius right so we have a button we have some state it just toggles things on and off and now it's being passed as a prop to make our map care about that we had some radius over here okay that's all cool and I just said radius was 15 let's change that to a problem okay all right livin the dream so let's see doesn't work we have a new radius button hey let's hit it okay so now we're redrawing our circles right you're like do those lame-o's you to spend time doing that but it's a setup so let's go and introduce some animation and I want to show you like this is all just kind of basic you can just with any react component right so far there's nothing like scary and map like in here so we're gonna do something scary and bring in react spring God rest our soul I think that's how I import it and this is just to make it animate you could think of so a linear interpolation like you're going from 0 to 1 over like 2 seconds like it's going to slowly move between those values every 16 milliseconds telling it to redraw spring physics are like all the rage right now get into it I guess but they're like hey instead of setting a duration just be like the spring it has this much resistance anyway it looks cool so they're probably right so we'll say from this is the syntax for this so I guess a from let's say radius is 0 so it kind of like comes in the first time but not that we'll see it but you can be helpful and let's go to whatever the current radius value is now this thing takes as a child since we using the render props API here because I don't the hooks thing I don't know it's not for me I don't like hooks no I do that's fine don't quote upon finance record it Oh God we're hiring ok so here we go what am i hitting the wrong button it's okay I don't need that one okay so we're in here spring props okay basically what this does is inside there there's like the interpolated radius value and so we can just use that one instead of this one okay who knows how the hell it works I kind of know but it doesn't matter let's come out here now so we're out here what happens if I click this oh now you're talking now we just spend the rest of talk clicking this button and I know it would be cooler but it could be cooler I mean it would be cool it is cool but it could be cooler so I have my goody bag right and I'm all about that so let's import this thing I call it go from GU and I'm just gonna I don't know why don't we spend a little goo around this thing so goo is this like super trendy effect from three years ago which is where I live and so now if we fall out to Massachusetts we got this goo effect right and we're like Deb check it out we're like a virus we're like infiltrating Massachusetts and he's getting hyped but he doesn't know why so that's cool right anyway goo is like interesting if you have are curious to do it just like Google goo SVG and like click the first link that comes up and then read it or just go to those spot that you know it is and copy and paste right so like anyway it's just this thing if I filter okay copy and paste cool or just look at my repo because it's already there right hey salt so okay we did it we did we did some cool stuff right how y'all doing should we continue okay let's continue should I continue you know I was bedridden this weekend with a cold that's why I'm doing the live coding cousin have time to piss lies again oh hey trashcan oh my god yeah that's a good point now that's we're gonna get to deck two y'all we're gonna get you wanna see how this performs right now even with just 26,000 library so this was there's like 900 libraries in Massachusetts and so I was like I'm gonna save y'all from this and I was like let's just do the Massachusetts one right but now I'm like okay just draw them all you can do it do I should probably plug in right I'm gonna run out of battery okay we did it it's still going it's like come on I can do it all right I click the USA button by the way all right there it goes there it goes so of course they do have the GU effect on which increases the performance penalty but you know not so good in SVG right and that's only 26,000 points it's like I can't even use this I can't I can't impress Deb with that which is my main goal in life so let's go and move on to deck GL great segue it's like you set me up okay so let's let's listen let's get rid of this guy oh man goodbye it's like give him saying goodbye to your child as it goes to college okay so all right we got all these things now I'm like oh you want to draw a whole bunch of these points right so why don't we move into deck GL deck DL so cool man when you see the stuff you're like wow I know it was kind of like this evil place well Wow their date of his team was legit until the head of data has moved on to map box like a few weeks ago but he's a super nice guy so mat box is still cool okay so import deck DL from geez I sure hope this is right yeah we're doing it okay deck GL so what do we do now so deck GL is also similarly can be applied there's like three different ways you can initialize deck GL you don't have to do it in react you can do enough it's like very flexible which is makes the documentation very long but this is one way that works for integrating both the react map GL will overlays like the SVG and HTML or canvas and the deck GL stuff so I do it this way it's very simple in this case like we put the same stuff and it takes this fancy thing called layers that's it we're gonna say okay cons layers it's just an empty array so all we did was we added in this line and it's not gonna do anything so it's not like some magic box this just can be like your map is sweet now no so but I just showed you it still works right okay cool nothing's broken now what we want to do first thing I said I do I think was draw a point of all the libraries so let's do that so this the way deck GL works is it has these a bunch of layers that it comes with and it's open source you can always take the layers and modify them to do whatever you want or it supports custom layers as well and it's pretty cool when you get it to that level we won't get too deep into that today thank God right it's getting late okay this one this one okay so all we do is say okay here's an ID for it I think it needs one really don't know data is going to be libraries and what we do need to get radius things are gonna get weird here let's say we had a we had a prop that has our radius right so let's just call that so radius in this case now we're getting the details a bit different you would have noticed when we're doing the SVG overlay like the circles didn't change size right they didn't change size as you zoomed in and out it just stayed the same with Dec GL layers your sizes are encoded in meters so they will change as you zoom in and out which can be desirable or not and so what I'm gonna say is let's take our radius and multiply it by 500 because I looked at it earlier and it worked and we're gonna say you know what don't let them get to fill my entire screen let's max them out at 15 pixels and let's say their fill color should be because you know tomato such a good color and you memorize the RGB let's say it's that okay so we added Dec to y'all now Wow loaded all those libraries that fast hey that looks like tomato man nailed it I just try to memorize it before coming onstage okay so now if we come out to USA wow it's doing it sweet look how easy that was oh cool oh where did it go fly back okay and it can change stuff well I mean well navigating right so I'm like telling to do a whole bunch of stuff all the time well it's pretty good it's pretty good right that was pretty pretty straightforward so now it's like well but now it's hidden in WebGL and what if I wanted to do something would be circles they're like yo we got you we got you don't you worry so I say just pickable true I just want to be able to click it okay so let's say okay pickable true fine I don't the hell that does but I'll take it and I know this has some gnarly deck GL style thing in here and I'm just gonna say object is what I want I'm gonna say console dot log object right uh whatever that'll work okay so now we're here in theory I can click one of these things hey it says like oh you click this library right cool and if I come over here and I click this one pit Pennsylvania Pennsylvania nailing it okay so hey it's clickable but you're like I can't even tell what your mousing over Kimi I want some nice CSS transition you know whatever like well I can get you it's pretty far all the way with just this fancy ah you gotta be happy whenever any prop has a prefix Auto it's like damn thank you it's like christmas came early when that happens and so like here now i'm just hovering and it's like ah we got you hover colors look at that nothing one line at one little prop one little boolean and now we got this kind of interaction so that can get you pretty far to be honest right like and you can do anything you want on those clicks right you can even modify the map so that's pretty cool that's pretty cool you can even change those command of props this thing takes is a you know it's gonna fill my two screen three screens but uh cool so that's a scatter plot layer now I'm like that's cool that's cool now let's switch let's switch oh we're not done yet oh no we're not done yet we're not animating oh my god that's the thing we had sweet animations with the SVG we're not gonna get the goo sorry I mean it's possible but I'm not gonna write that shader so what we're gonna do is we're gonna add in animation I probably thinking oh how's it going to do this it's gonna be a pain in the ass and I got news it's not it's not okay those guys at deck GL uber man that's where they're putting all their money I guess but should be the poor drivers but hey DataViz okay transitions gonna say get radius okay one one thousand this is a put in a duration I'm saying if radius changes let's just put a transition one one second okay huh he'll sort of oh I might do something dumb still well this is ibly the first failure of oh you know I've been doing some hot reload so I don't know if that's going to be causing some issue but there you go oh that's because they have the min pixels and it's five hundred times whatever circle radius in meters are the max pixels so actually that circle was gigantic and just being drawn so anyway at the full zoomed out level you can see there some kinks to be worked out when you're using this kind of sizing approach but there it is and you're like ah okay but the spring what about the spring physics what about the spring physics they allow you to get a little bit more complicated here you can say duration should be 1,000 and easing should be easy back can you just do it for me no okay oh it's cuz its ease back out lips okay he's out back it's like an Australian easing okay yes hey someone use a typo do you okay okay so now we're using this easing function from d3 okay I turn this off and what you should see is it gets a little it gets a little bounce on the way on it gets a little too big and then it shrinks right Wow it's like a rolls-royce I don't know why I said that cool okay so we got animation back we got easing reactor ation and we have click interaction all that and it's just read the docs that'll take you the time it took to you know figure this out or just look at this example but it's not it's pretty straight it's pretty not that much code to do all that and to get it performing right you just kind of did all you just did this and you're living the dream making maps with the pilot points and this thing this thing you're like what else can I do and you're like why is he showing me this dumb thing me I shouldn't show you this but you come look at the examples they have on their website and they're like oh you want to see more points you want to see more points and they're like oh cool the scatter plot layer that they draw by the way looks like this which is like a ton of points right and it's pretty good so hey is it no hey basically is though right every person each dot represents 10 people nailed it every family's about 10 people big right okay okay so we're doing good we're almost done we're almost through the night I wanted to show some cool stuff before we go because the Ark's like really get a lot of buzz maybe I'm just one who gives them buzz because when I sell them for the first time I was like damn that's that's cool before we do that I've mentioned all this stuff about turf Jas so I'm gonna show you geo JSON just because I felt like I should do JSON layer and this can take just a few seconds but things get a little faster from this this way a line string turf / helpers okay so what we're gonna do is gonna say like what if we could draw a line connecting because I'm like okay cool dad we got all the libraries but I need to show them connected like we're a network right we're connecting and I'm like well maybe some simple way of doing let's just draw a little line between them there's so many you probably can't tell looks like a network so what I want to first do is say okay let's say library line okay and I'm going to use memo on this again because it's probably computationally intensive [Music] and we're gonna say okay just going to call this fancy turf function and hope it works was it line string then we say libraries that map D basically just takes an array of latitudes and longitudes okay so a lot of these turf things are convenient because they like you give it latitude and longitude and it gives you some gigantic geo JSON object it's not that big but I'll show you what it shows okay so here oh boy maybe if it worked all right so oh there's an issue here so it's more temperamental than some of the other than some of the other flowers at length this otherwise okay the turf stuff is like oh this was an empty array I'm gonna just break so cuz yeah who cares so anyway this is what the Geo JSON looks like it's just like this geometry stuff that turf built for great thank you turf and now it does not do anything but it's just that that JSON object you could copy and paste that into this website geo JSON that IO and you would just it would just draw it or you can say okay let's add a layer let's add a quick layer and just take a look and say new geo JSON layer ID geo JSON there ok data is going to be library line we're gonna say like get width it's gonna be to let me say I get oh boy I'm gonna remember the color how do I do color I'm never getting dicey huh it might be line color let's try that I'm not gonna have to refer to my thing maybe we can go look at the docs okay that'd be the cool way to do it right when you're actually programming and you're like what are the docs a Geo JSON layer get line color ok now that line oh that's the one that's why I didn't okay oops let's just do that so close so close okay so here we are oh and let's look at us eh okay so now we've made this super sketchy map of America which like hey and you're like look it's got some freaking lines going away the hell out there and I was like oh I'm learning so much but I'm Canadian by the way you know I was like Oh what the hell is going on and I guess we got some territories over here that got libraries that are my data said and I'm like I'm gonna remove those dead oh I'm sorry don't piss the mike cardinal rule okay so anyway we have we had this thing so now we just draw in the Geo JSON and you jus just sound like really cool because you can get shapefiles and Giudices on datasets online for like here's the shape of my state here's the shape of my County here's the shape of my city and you can just draw them especially however you want here I'm just gonna make this a little more transparent so it's not a pain in the ass and I'm gonna switch to app and I'm going to switch from looking at coolest looking at USA so we don't have to keep switching back and forth okay so now we had this and I'm like okay the finale is the arcs right we got to get to the arcs feel like I don't know what you're talking about arcs but you're gonna like them I hope or you're gonna be like I should have left I was baking on either I'm gonna like them so that's kind of at least I'll get something out of it I could have done it at home though okay so library links oh let's start off by let's import this stuff thank you vs code and let's create this this thing so so I want to create a fake Network right because I'm not going to create a real Network well I am trying to do as my full-time job but for this talk I'm gonna create this network called react or library links I'm going to use another use memo because it's going to be computationally expensive and we're gonna say okay well it's one simple way we can make a fake looking Network long and I just take some fancy d3 functions again they're not that fancy chuckle this thing just randomizes in array and pairs this thing takes an array and creates a new array where there's two poles of one in index 1 and 2 index 2 and 3 index 3 & 4 and it just creates pairs of adjacent elements in the array and so I'm just gonna say similar as I did the line through each one I'm gonna say ok let's just let's just put a line between adjacent things in our shuffled array so I'm gonna say returned pairs shuffle libraries slice I don't want to actually modify the original array so I sliced to be safe I'll take just the let's say I don't know first 100 of these and return that ok do I dare does this just work on his own do I need to add more stuff I normally add more stuff can't read property 0 oh boy here we go this will be feared but let's just continue on and pretend nothing happened oh I don't need okay so sketch source this one ok d we're say so basically a decent no it's drawing a link between two things in arc between two locations and so I'm gonna say since my my links are just a tuple where there's two libraries in the in an array I'm just gonna say the source is the first item and the target is the second item position and let's give them some colors let's say this one can be green I mean lime green and just so it looks cool let's do why not I mean do we want to say get with get with two or three yeah let's try that ah how you like me now now we're cooking with gas okay so we have these sweet arcs yeah look at them and you're like you know I like fat arcs actually let's make them big bigger is better okay yeah boy or you could be like actually Peter why do we only do 100 we're using WebGL Deb you're gonna love this like put them all in here here so yeah pretty good right I'm like there's our network boy pretty pretty good pretty good so so those are the arcs they're cool I wanna do one final thing which is animate them because like that's when things get to the full complexity here and then we're done you really stuck it out but let's do that quick real quick so what I first want is some kind of way to see if the arcs are on or off so that I can say turn when I turn them on let's let's animate we'll do the same thing we've done a million times here which is do our incantation of using state ok arcs enabled said arcs enabled yeah you stayed true cross handle toggle arcs let's just do arcs and then you will want rx enabled okay we did it we did it we're so close to being done I'm gonna go pet my dog okay okay so now we have arc so we didn't pass that it and that's one more thing we just do right so Marcus enabled is equal to arcsin abled okay cool so this prop is coming in we have this new button right it's gonna turn things on and off doesn't do anything yet let's go back down let's go back to n2 100 for now and I actually you know let's go to four okay and we'll just say just to four just it just make sure we did it right oh there you go boy the days when we didn't have linting like those are the dark days what a friggin brilliant thing that was okay so now we have this button rights to turn them on and off and for our final act let's make them animate now it turns out these components are pretty complicated these layers and they use their own shaders inside the code to render them and you can go and basically download the code for the whole arts layer and be like yo I'm going to edit this and I'm just gonna modify that shader who knows how to program shaders just me a little guy this guy has a boss over here okay yeah so so uh it's complicated but it's not that bad we're gonna look at what they did someone else you gonna think about the Internet someone else probably already did it so you're just like hey like I want to animate arcs Dec GL I never heard of duct tape before coming to this talk but like this guy has this sweet issue where he solved it you know and so you're like oh thanks bro I don't know where it is under anyways on here somewhere oh there is this one this guy so he posts the source code he's like here's how you do it and I'm like I love the Internet thank you so much you've done so much bad but so much good so what we're gonna do is we're gonna switch to using this thing called the are crushing layer which is literally just a code that this guy wrote oh you're not gonna give me that yeah there you go and so I had this locally here my goodies folder you can see just a modification with some weird uber deck GL luma GL stuff that unless you inject code into a shader without rewriting the whole thing but it basically just says depending on far you are through your shader based on this fancy Co F variable like faded in faded it so we're gonna switch to that and the nice thing is the great programmer on the internet unnamed man I should learn maybe not a man an unknown person let's just say 0.25 okay I just wish to using our crushingly ran out of this co f as a as a prop on here and I'm gonna switch back to my map and we see all these partially drawn arcs right so now we got to figure out is how do we animate a number from 0 to 1 okay well we've done that we've done that sort of we use react spring for that so let's just bring in react spring again okay and I'm gonna do it here I don't know if this is a good idea but I'm going to do it art co f I'm just going to call it that I think I say if arcs are enabled there's gonna be a little bit weirdness here arcs are enabled I'm gonna call it one so it's like totally completely drawing the arcs and if they're not enabled then it's gonna be this really weird the small number I can't use zero because in this guy's code he said he only added stuff if it's greater than zero so it just draws a whole arc if it's zero so whatever I could modify his code to work with zero but whatever this number is gonna be really small okay spring we've done spring before we know how this works maybe we forgot but we get spring crops right it's going to return this and we're gonna say oh wait we can't just do that because we need it in our layers duck GTL actually supports doing the layers as react children as well but they're kind of like yeah not worth it slower so you know they're they're more into they know more than I do so I'll just say okay I'll just follow your lead and I'm gonna make this thing use my spring props art co f and then I'm gonna say okay actually because this doesn't go all the way to zero I'm gonna be like okay if it's too small like let's just turn it off so spring crops dot art co F greater than one e negative six then then like stop drawing it okay maybe I can say 1e9 okay so in theory oh my god did we do it if I click the arcs button hey oh we got friggin arcs drawing we're living the dream someone called Devon he's probably at home okay so there you go so like you know with a bit of sleuthing around you try combining a whole bunch of different libraries I know it was a crazy amount of stuff but when you look at the total number of lines of code for this whole example right we're looking at 100 something in this file and 60 in this file and then the helpers that I just gotten on the internet right and we can do all kinds of cool stuff right we can rent we can animate in we can do all the stuff while flying around by the way it's like pretty perform and it doesn't it doesn't stop and even the animation like if we go to our 100 thing right we can say don't actually cut it off there's only 25,000 but I can be up here and I could be like yo animate those and it's like okay I'll do it good old computer man it always does it ever talk with a button same thing so so there you go okay that's it oh my god we made at 8:30 holy cow it's gonna do that that's it so that was my thank you slide was actually in the middle of the talk so let's go back there but yeah thank you all for sitting through that and listening [Applause]

Channel: Boston React

Views: 11,515

Keywords: render maps with react, use maps with react, react map, react gl maps, react webgl, data visualization, dataviz, data viz, map performance

Id: kHi83pSAFig

Length: 52min 1sec (3121 seconds)

Published: Tue Nov 19 2019