Coding Challenge #109: Visualizing 500,000 Subscribers

whoo-hoo hello I'm making a video coding challenge today to celebrate some large amount of subscribers which is kind of insane and then right after this I'm going to go to the barber shop so please I beware I've really let this go here I'm gonna deal with it all right what am I gonna do today I'm going to celebrate the subscribers the viewers of the coding train with a visualization and I'm going to use a library that I've been meaning to use for quite a while called mapa is it was a google Summer of Code project last summer 2017 with the processing foundation created by Cristobal Valenzuela so there if you go to the mapa j/s org website there's a ton of tutorials introduction to web maps a history of different projections so there's so much interesting good stuff here I also if you scroll down here I'd really recommend taking a look at Mimi Onew OHA's everything is spatial data and digital mapping work so I love to get into all this but I'm just gonna try to do something really basic I have on my computer if I could find it why didn't I get organized before I started this YouTube here we go I have some CSV files these CSV files I downloaded through the creator studio so I logged in with my account in the creative studio I went to the analytics and there's an export to CSV so presumably there is some way for me to get this data with the YouTube API and I would encourage you hopefully I'm hoping people will make stuff either with their own YouTube channels or I think it's okay for me to publish this data there's no user information in it so I will check but I'll probably I'll I will also publish this data as well people want to revisit and interesting ways for me or not for me for you but anyway whatever the point is this is not going very well why have you subscribed to this channel tutorial things for you to watch out there what I was what I was going to show you is I have all of subscribers by country and I have also all of I have watch time alibi country this is the watch time in minutes apparently people have watched a candy I can't even read that that number it's 41 million 100 in the US some 41 million minutes that's really it's really hurt I mean wasn't just one person I hope it's gonna this is a mapping visualization tutorial isn't it okay let's go okay so how what am I gonna do here well first so I'm going to come back to mapa the github for mapa is here by the way that all these URLs will be in the video's description if you're still watching or if you just left and I'm reading the description however watching some other machine learning tutorial but I'm gonna I'm gonna use this I'm basically gonna follow this tutorial by Chris called simple map a map ax is an interface to other mapping API is like Google Maps map box leaflet and maybe I'm missing MapQuest wow that quest still exists that's amazing I'm staying over here look MapQuest so I'm gonna use leaflet just because from you don't need an API key for leaflet so it makes it a little easier for me to just roll on in and make this project but I encourage you to try this with Google Maps or map boxed yourself ok bye well let's get started here so the first thing I don't want to do actually is nothing to do with mapping I want to say function preload because I want to load in all the data so I want to say to celebrate I'm going to use Const Const is a way of declaring a variable that you're not allowed to that you're saying I'm never going to reassign this variable to a new value there's some nuance to that but that's the basic idea so I'm gonna pretty really a means to protect myself here so I'm gonna say Const subscriber subscriber data then in preload I'm gonna say I can't spell subscriber subscriber data equals load table whew now load table is a function inside of p5 as part of the p5.js library that is specially suited for loading csv data tabular data some other videos where i use that and describe that in more detail so I want to just let's start with subscribers underscore geo subscribers underscore geo dot CSV then I just want to in set up and say console.log subscriber data so let's first make sure I can actually load the CSV in the first place and I'm gonna go over here hit refresh this thing initializer in constellation oh okay I can't use Const here this is such a failure you already so I can't use Const why because this is being reassigning it I didn't assign it up there that somebody's let something other day I'll find it perfect because I'm gonna use kaan somewhere else in this you'll see it's constants vary hard to say alright so now we're loading hmm it's still loading it really is not going very well I don't think it's taking all this time to load I think that I have a mistake load table subscribers giotto let me just see here what version I'm in the recent version of p5 there there was at some point an issue with using load table in preload I thought that had been ironed out by now let me make a let me just make let's do a little test here well this by the way this videos gonna have lots of extra stuff in it I'm just letting this go no editing no editing I'm gonna make a test dot CSV file so you know it's like an hour or 500 minutes that would be appropriate alright so abc123 so I'm just gonna make a test this how I like to debug things I'm gonna make a test CSV file just try loading that oh I saw something there for a second look it's like they're pre load setup hmm hold on what is going on what craziness see here subscriber data it's there huh alright I had to edit this there there was no way around editing it there I did however I think I have a path to move forward and I've learned something new inside the developer tools I usually just look at this console thing there is this tab called Network and what we can see here look at this the test dot CSV file is just pending pending pending it's never loading oh it finally loaded it took uh I can't I want to be able to see it took 26 seconds 26 seconds to load that file that file test dot CSV is exactly 12 bytes meaning that's like two seconds per bytes this is very byte very unreasonable so I don't know what's going on but I I don't I don't want to blame anybody nobody's fault things just work if they work sometimes but I'm getting some weird behavior with this Python server that I'm using and actually if I change and use I have a node server HTTP - server also available on my computer so I'm going to run that be a terminal HTTP - server and then I'm going to go back over here oh wait no I have to go to a different yes different port and look at this three milliseconds test CSV so now we can go back we're getting somewhere we're getting somewhere I can go back to subscribers underscore geo dot CSV there we go okay now we've got that file I'm gonna go back to the console I'm gonna look at subscriber data and I can see there we go I've got an array with a 237 rows that means there's 237 oh there's fifty three columns there's lots of extra data in there other and there's 237 rows now one thing is all the cop none of the columns have a name so one of the things I want to do is p5 if I give it this nice little second argument and say header I think that says the first row in the CSV file is the header and we can see that if I click on here you can see these are all the headers that are actually there in that first row so now let me go back and refresh I'm gonna look at the subscriber data again go look at here we can see ah there it is so country name country ID and subscribers and then there's other all sorts of other columns transactions and ad revenue and all sorts of stuff so I'm probably going to clean up this data when I publish this just to have only the first three columns country name country ID and subscribers that's all that I'm gonna use for this example so now what's next I need a way of iterating over every single one of those so let's just look at how I might do that I don't know how but I'll figure it out for let I equals 0 I is less than subscriber data dot I don't know total columns let's look at the API p5.js org let's look at the reference I'm gonna look for p5 table and I guess if I go here to p5 table we're gonna see add row remove row get rogue find row finebros match row i'm looking for total huh Oh columns rows looking for Rose it's just in a field subscriber data dot rows I plus plus then I'm going to say the row is subscriber data get row I and let me just look at the rows go back here let's look at I haven't done this in a while line 10 Oh Rose is an array of all the Rose that's even more convenient so let Rho it's not a number I thought it was a total of subscriber data dot Rho I can use a four of loop and now I can just look at each row one at a time there we go that's each row one at a time then I can say console.log row get column what were the columns again country let's look country oh it's sort of like atom just knows it's what a country ID and let's do this mm get column is not oh maybe it's just get yes there we go yet it's just get and I get the country ID now I want to get a console log row get what was it called subscribers okay awesome there we go so I now have a country ID followed by subscribers country ID followed by subscribers okay we're getting somewhere should probably find the minimum and the maximum and normalized things but we'll worry about that later okay now now let's go back to the mapping tutorial what's been like two hours since I started this so I'm gonna go back to this simple map example and first of all I need to include a reference to this map map a library in my HTML file so I'm gonna just copy paste this here and I'm gonna go to index dot HTML and one of these days I'll learn how all this fancy new module stuff works but there's no way I like to do it right now I'm gonna reference that library let's go back to the tutorial whoo welcome to reading through a tutorial and copying the code over to your code code but thank you to this excellent documentation for the map library so I want to create a look at this there we go Const let's create a new map instance so I want to make a new pulling from the leaflet API just to be clear leaflet is this a jaw open source JavaScript library for mobile friendly interactive maps so again you can use leaflet directly by just going right there looking at how the code works napa provides a layer on top of that also because it you can pick other things besides leaflet as well as it integrates nicely with p5 and probably other JavaScript libraries alright so now let's just refresh let's make sure things are still working things are said well there's an error at the top there because it's mime type is X not executable what did I do wrong here hmm we have a little bit of an issue okay I'm back it turns out that there's just a little bug with this CDN link and so I'm going to use a different CDN link which is this one and it's working check the map web page for whatever the currently working version of this is by the time this video gets published hopefully it'll it'll probably be fixed ok mapa is now loaded excellent ok so now we can go back and we can go to this tutorial once again I was on this simple map tutorial and we can see here what's the next step I want to create now there's different kinds of Maps I can create there's what I'm and the world is broader than just this but I'm gonna talk about 2 right now there's a static map and a tile map a static map is a map that's just give me the map it's the image of the map I'm gonna draw it I'm never gonna change a tile map is one that I want to move around zoom in and out of and the reason why it's called a tile map is because the way that the mapping API is generally load it is they'll over there's a bunch of different tiles because you don't wanna get one big image all at once you get a bunch of different images and they get tiled so I want to create a tile map and this gives that the arguments here is like well what do I want where do I want the map to be centered around and what zoom level do I want to be so let's try map my map equals map a tile tile map so I want to say I'm going to go back to here and I'm gonna say I'm gonna say let train map and I'm gonna say a train map equals mapa tile map and let's just give it a latitude longitude of zero zero and a zoom level of four that was what's in the tutorial and let's see if we see that at all I'm gonna go here and so now one thing is I've let me let me mixing let me get rid of the canvas all right so I probably missing a step here I know that I have to overlay the canvas but let's see I don't see the map yet do I need to overlay the canvas or yes I guess if I don't overlay the canvas the map doesn't show up perhaps creator of map Allah is in the chat right here so I might here in a second what I'm saying that's wrong so I'm going to so I need a reference to the canvas I'm gonna say canvas and I'm gonna say canvas equals create canvas and then I want to say to which do I say which the the map a map I want to say the training map I want the canvas to sit on top of it overlay yeah I do so confirm breaking news I do have to overlay I'm not gonna see the map unless I overlay the canvas on top of it okay so these are the steps here I want a canvas that I can draw on I want a tile map and then I want my canvas to sit on top of it so now if we go here whoops train map overlay is not a function okay what I'm doing a terrible job here let me go to the tutorial my map dot overlay canvas did I take overlay with a capital L yes I did overlay is one word people lowercase L okay here we go unload setup sketch mmm what did I get wrong now so much for my no editing Oh is there was another edit there unfortunately whatever reason whatever I'm doing is throwing giving me an error I discovered if I revert back to one version earlier of the map a library then the error goes away so I can refresh oops I have to hit save and then I can refresh aha now okay so first of all if you're watching this video hopefully the source code is hopefully going to by the time you're watching this be using the most recent version of map but maybe I'll have to figure that out but for now I'm going to keep going now interestingly enough it says you are not using any tiles for your map try with so one of the things is I have to specify a particular set of tiles that I want to load and I would have just read further down in the tutorial it would show me that actually one way to do that is to put all of those things like I was saying I want the center to be zero zero and the zoom level to be four now I need to also give it a style all those can go into a JavaScript object so I'm just gonna copy pasted this from here this is a YouTube video where I am copy pasting code from a tutorial and like making lots of mistakes still somehow anyway and then I'm going to put this here and then I'm going to put instead of putting the arguments directly in the function I'm just gonna write the variable named options we are now going to refresh again and now I look at this there is my map so one thing I really want to do is I want to give myself more space to work with so let's try like 800 by 600 and I think I want to zoom out by default a lot more so what I know I think a lower number would be zooming out yeah that's maybe too much 1.5 all right that'll do to start okay so this is what how I want it to load initially and again maybe zero zero isn't the best middle point and there's all sorts of other things I could do but know we've got the map there now I just want to do something I just want to say ellipse 100-150 let's just see what happens if I draw and I'm gonna do a nice purplish color which is my favorite color do look at this there's that ellipse now that ellipse is staying where it is so they're at a minimum what I have right now is the ability to draw over the map and I can do all of the map interactions and my p5 canvases right there now I have to be careful if I were to put this background here I don't see that map anymore and what I really should be doing is using the clear function the clear function is like putting a background that's fully transparent so this now you can see I don't know if you could notice this before without the clear function there was some funny anti-aliasing going on because I was drawing the circle actually on top of itself multiple times okay but the point is what I want to do is let's say I have a circle that's on the map over here if i zoom in I want that circle to stay where it is and grow with the map okay so how do we do that let's go back to the tutorial and I'm not gonna worry about lat/long but oh yeah no no I do want to worry about that so this is the key here lap map lat/long to pixel so the idea here is that I have a latitude and longitude and I want to find the pixel location of that no matter where the map is so let's let's just take this no matter what the zoom is let's take this and copy it into our code and I should now see it refresh oops I got an error again lat oh my map I called a train map so we can see there is now a circle here hopefully on top of the country of Nigeria looks right to me and I can zoom in and we can see that circle is continuing to move as I move the map around now here's the thing so I happen to find that from the example thankfully I just got a message in the chat for the next thing was about to look for which is a data set that has the lat longitude value for every single country so I'm just gonna I think I could probably google for it canonical countries CSV lat/long something like that would probably yes this is what I'm looking for I'm looking for the countries dot CSV data set and this now has a country every country with a latitude and longitude associated with it so how do i download this okay if somebody can figure out for me you can figure out how you download this file sure I could copy paste it I can't buy anywhere on this page of how to download this file and Nora in the chat seems to be telling me so I'm moving on I got a nice suggestion there is this github gist and I can just click over here to raw and this is now every single country code with the lat/long I'm going to assume that this is correct I'm going to copy paste this into a new file I'm gonna call this country's dot CSV and I'm gonna paste it in here so now I have oh not CSV it's JSON excuse me countries JSON and so good so now I have all the countries and they're lat/long by a and JSON so now I need to go back to my code and I am going to say let me have another variable called countries and I'm gonna say countries equals load JSON and countries dot JSON so now I want to just make sure that that came in okay console dot log countries well I'm gonna be going away for a couple weeks after I record this video let me get back everything's gonna make sense and work again in my tutorials I'm not going to make all these mistakes and never get anything that okay so there we go so now I can see excellent so I have one-half beautiful the object I can actually look up by the country code great I can look up by the country code which is exactly what I want so now let us let me take this loop I'm gonna go over here kind of it I think that in a moment I am going to now get the country ID now I think something a little bit funny is going on here where if I look here the country IDs are in capital letters and in my countries JSON file they're a lowercase letter so I'm gonna need to be conscientious about that so I want to say let country equal Rho get country ID and I'm gonna say I'm think I could just say to lower case is that a JavaScript function in Java there's definitely a string function that sends thing to lowercase so I think that's right then I can get the lat/long is is what I want to look at the countries by country and so now that's going to give me that array with lat/long and then the latitude is the lat/long index 0 and the longitude is the lat/long index 1 and now I'm gonna say I want to say the pixels pixel coordinate is train map and now I not hard-coding it I'm getting it from that so now I say getting it from that C JSON file lat/long and then now well let's draw an ellipse at and I'm just going to call this pics at pics X pix dot Y 2020 so now I should see a circle at every single country where there is at least one person who subscribes to the channel and here we go what did I get wrong here cannot read you know interestingly enough this is live this is like this very generic error that's coming up no matter what if I do something wrong sketches yes line 41 what have I done wrong let me look let's look at these first console dot log country let's take a look to make sure my countries are actually correct those look right those look like reasonable country codes let's say no loop by the way because right now I just want to do it once okay so those look like the country codes now let's see so this is countries countries dot ad is that and so I should be saying a console.log lat/long let's look at that okay oh there's some that are undefined so first whatever reason I have some countries in my dataset that I don't have a lat long for so I that's why I got that error message so I just need to be careful about that and I need to say only if lat/long exists like there's some that are undefined then I should be able to pull the lat longitude out and draw a circle and let me get rid of no loop now let me say fill 255 0 200 let me put my semicolon there oh yes so look at this look at all of you beautiful people all over the world who are subscribed to this channel from all these different countries this is amazing oh and I got this horrible thing going on where I'm console logging got to get rid of that you do not want a console log from within a loop within a loop a zillion things that'll really mess stuff up let's go find Australia Australia look at this let's can we find a country with nobody I'm not sure the country that I need to so we've really got the center of everything this is great ok so now we're getting somewhere I can see everything there and now what I want to do is actually size the circles according to the total number of subscribers okay hmm all right here's the thing I want to talk you through something that's a really important little crucial detail here and I want to dive in for you but this may be what I could do is just turn the camera I'm working on this tensorflow J s color classifier and I didn't want to race my notes for it so now I think I have some extra space over here so sorry for being completely like a crazy person not like whatever I'm gonna diagram this for you here so here's the thing I am drawing circles in p5 with the ellipse function can you see that I think you can the ellipse function so let's say this is a circle with a diet with a diameter of 10 and this is a circle with a diameter of 5 okay circle with a diameter of 10 circle the diameter 5 let's say this is a country with 10 subscribers and this is the country with 5 subscribers have I visualized this accurately no the answer is no why think about this for a second if I were to do this this is a bar chart 5 and this is 10 you know this is accurate this is twice the size of this is this twice the size of this well the radius here is 5 oh I make these like 8 and for the point let me make these 8 in for just just please please please please allow me to make them 8 and 4 so the radius is 4 and the radius here is 2 right so what is the area of this pi r-squared 16 pi the area of this PI R squared 4 PI this is actually four times the size as this so I need to be conscientious about this what I actually want to do is take the total number of subscribers and apply the square root to it so that when I when when it's being visualized into a circle it will actually be representative the area of that circle will represent the total number of subscribers okay well you go we can come back over here now all right so here we go this is where I am let me see what was the zoom level when I open it up great so now what I want to do is I should be able to right here say let subscriber like let's say like sub count equal Roget and I already forgot what's in the CSV file if I quickly look at it here it is just the word subscribers subscribers and I'm going to say let diameter equal the square root of the sub count and I definitely should do some sort of napping but I'm not going to worry about that right now and then I'm just going to then put diameter here and I'm gonna give this some alpha because I have a feeling I'm gonna have some really big circles and now I'm going to refresh there we go look at this we have now visualize the subscribers and we can see here this makes sense like there is a lot of subscribers in India and we can look at we can look at Africa we can see that South Africa and Kenya and Nigeria if we look up here in Europe we can kind of see here that Deutschland Germany and England over here we can see the different countries France so this is actually and this should be accurate I could write the number there's so much I could do here visualization wise this really isn't like a tutorial in the end about you know the visualization I'm really just try to get the mechanics of it to work and one thing I might want to do I mean that the circles are just sweet why are they oh they should be sized according to the zoom level Oh weird umm I just realized something the circles are not resizing according to according to the zoom level so how do I do that there's got to be a way in the map a library let's look at let's look at the API so if I go under leaflet we can see look this is actually changing right we can see this example the circles are changing and let's see how that's done math dot zoom so map dot zoom so this is a way that I can use the zoom level of the map to change the size of the circles so one way I could do that is by saying something like diameter divided divided by train map dot zoom is it just dot zoom oh it's a function dot zoom so let's see what happens there where do I go now oops where was I come back did I lose it no I'm over here okay so now oh no I think I need to multiply it by zoom all right if you think about it the zoom level right I come back to my crazy little place over here if you can bear with me for a second if I have a circle like this a higher zoom number is me zooming in so I don't want to divide by the zoom level I want to multiply by the zoom level because the size of the circle is going to be what it is at zoom level one if i zoom in by two that circle should grow twice the size so I don't know why I didn't really need to walk over there but mentally I needed to take a break okay mentally I just needed to take a break here so I uh so what I need to do is say times zoom and then now look at this it's everything's way too big so now I need to figure out an effective way to to lower everything so one thing I could do is I could find that I probably should just like pre-process the data in setup right there's no reason for me to like do all this parsing over and over again so let me pre-process the data in setup and I'm going to create my own array so I'm gonna say I'm gonna say data is an array then I'm going to go to setup I'm gonna paste in that loop I'm gonna get the country and then here I'm gonna get the pixel Oh I don't want the pixel location I just want the lat/long and the sub count so then I'm going to say what am I gonna say here I'm gonna say data dot push I'm just gonna make an object now guess what what's that thing called in the new what's that thing called a new JavaScript where you I want to make an object and what I want to do is I want to say lat lat long long long sub count sub count this is how I this is how I always have written my code I want to create an object with these properties and the properties have the same name of the variables you don't have to do that anymore JavaScript new fancy JavaScript yes something or other allows me to just do this lat/long sub-account and by definition it's going to assume that if I generate an object this way that I want the property name to be the same name I want the property name to be the same name as as the actual variable name itself apparently it is known as enhanced object literals so this is an I want to create an object literal and I want to create it in an enhanced fashion so now that I have this now that I've done this now I'm gonna do a little thing here I'm gonna say max subs equals zero and min subs equals a hundred infinity now I know I know I did I am using enhanced object literals and I know there's a higher-order function sort of fancy way that I could just do this instantly but I'm just going to since I already have this loop anyway I'm just gonna say if sub count is greater than what was it max subs then max subs equals sub count I just want to find what was the largest number of subscribers and I also want to find out what was the minimum number of subscribers so now that I have the minimum and the maximum if I come down here and I can now I can just say for country let country of data and oh oh I want the country ID I need that Oh No look at that I don't I guess I don't need the country idea anymore okay I mean I want to save the country ID so now I just want to say I don't need this if any more I don't need this lat/long all the parsing has to be done I just want to say now I just want to say country dot lat country that long and then I don't need to the sub count is right country dot sub count and I want to say that and this should be a constant so should be I'm gonna say the square root of mmm boy I'm having a lot of extra square roots here let me let me actually add let me do this let square let me do square squirt square root I'm gonna I'm gonna just put the diameter in here square I'm gonna calculate it up here just once and I'm gonna add this in here and then you know what I'm gonna do let's just do all this up here I'm gonna just do this parsing up here too then I'm gonna go through it again one more time yeah yeah I know I could use a higher order function expect many pull requests and comments about that and I'm gonna say and now I'm gonna say let country of data and I'm gonna say country dot diameter equals map the country's diameter between the switch goes between the square root right right right right right I don't want to put the diameter in here I'm going to add I'm going to add a new probe there's no reason I'm going to add this property here and map I'm going to say min diameter is the square root of the men's subscribers and the max let's just say mindy and the max d is the square root of the maximum number of subscribers and now i'm going to map the countries the square root of the country's subscribers which has a range between mindy and max D and I'm going to map that between 10 and 100 and that's the country's diameter so I wanted I want to process I want to just sort of like normalize the data within some range add the diameter property and then right down here I don't need to do any calculations I'm just gonna say pics X pics y country dot diameter and you know with the ellipse function by the way you don't need to do the width and height if they're equal and then I'm gonna say train map dot zoom okay I think we might have gotten somewhere here I don't need this anymore and now here we go let's refresh Oh max slope is not defined okay where do I call max subs max subs hmm we're all all of you where are all of you subscribers Oh did everybody unsubscribe all of a sudden because of how long it's taking me to do this and what a mess this video is okay oh not yep nope okay let's do console.log data let's take a look at this let's see what's in that object okay the object is an array with lat/long sub count ooh diameter equals not a number so I messed something up there so let's see oh this has to be outside of here why is that in there oh so this is something I want to do right before I do this mapping I don't know why I had that in there well you've still should have worked let's console.log min subs and max subs see does that getting a real zero and 98 that doesn't seem right more than I have more so max subs is zero min subs is infinity if sub count is greater than max subs hmm that seems weird oh yeah my sizes are probably way too small but hold on those seem like strange numbers to me zero and 98 I have more than 9 subscribers oh they must their strings they're not numbers look at this if they're strings in alphabetical order 9 8 is greater than 9 79 I was not being careful the value that I'm getting out of the table is not a number I need to convert it to a number it's by default and I think probably I might have been he'll say something like get number in with the p5 API or I'm not sure let's see get number is that part of p5 no but I could say get and then convert it write a CSV everything is by default text and these should probably I don't know why these sort of work somehow oh because it came in as an array and somehow oh no because I I'm pulling it I'm that's coming from the JSON file and they are numbers in the JSON file the CSV it was only text so now there we go that's the maximum number of subscribers that makes sense I can get rid of this I have I should see right there we go so now if i zoom in the sizes aren't changing right the size no but I want it to I'm learning a lot from doing this video it turns out and this shouldn't have been a surprise to me I have encountered this before I think that it's not a linear relationship when i zoom from 1 to 2 or 2 to 4 I'm not just doubling the size in fact so multiplying by the zoom isn't really getting me a consistent size circle as I'm moving and zooming around so what I really actually want to do is not multiply by the zoom value and I think it's going to be a little easier to see if I say constant zoom equals so just put it in a variable train map zoom and what I want to do is the scale the scale I'm just gonna say SC L because there's a function in p5 called scale is 2 to the zoom power now this I don't know if this is a hundred percent exactly right but so I'd have to maybe do some research on this and maybe someone in the comments can give me some help here if I'm if I'm getting this right but let me just put this in now scale now now the problem is now I'm multiplying by a very large number so this is kind of looks a little bit out of control so let me go back to my values up here where I was doing this mapping and I'm actually gonna have I'm gonna map between 2 and 10 so the minimum number of subscreen one pixel and 10 pixels so now if i refresh here we can move around and we can see like look at this you can see here if i zoom in on Brazil you can sort of see look look at the size of this circle right and then we keep zooming in it's kind of staying the same size relative to the country so this is the effect that I wanted and again me been off by a slight amount and now I could potentially say like okay well actually I'm happy to go I mean all the way up to 50 50 and we can kind of see here maybe this helps a little bit but now everything's kind of on top of everything else so I liked it maybe let me go back to 20 you know anyway so the point is this isn't necessarily the best way to visualize this data maybe what I actually want to do is visualize something about the number of subscribers per like relative to the population or maybe what I actually want to do is get the sort of geo JSON data which is like outline of all the countries to fill them in but I at least have done this and guess what just as a quick little extra thing to add to the end of this video and by the way look at all these subscribers down here in the Virgin Islands is that where I'm looking at I take the wrong plates that's kind of amazing to me I'm gonna swap out my CSV file let's quickly look at the watch time file the watch time also has country ID and watch time in minutes now the nice thing is the nice thing is I already built in all this stuff to kind of normalize the data between the minimum and maximum I could also look at views maybe I should look at views watch time probably makes more sense so I could really briefly right here change this out and I probably should have just called this I'm going to call this instead of subscriber data I'm gonna just do a find and replace subscriber data with like YouTube data replace all and I'm now going to swap this out and say watch time Gio I'm gonna comment this out and the only thing I need to change is I also want to get here now instead of subscribers I want what was it called again a watch underscore time underscore minutes watch underscore time underscore minutes also by the way had one in sub count I should change also which was views let me just change this everywhere it's a sub count let me just change this to count just to be more generic about it and let's make sure the okay and so where it where am I here sorry views let's see if this works with views there we go so now we're looking at this map based on views and now let's look at watch time and I can go to switch it out just by commenting it to watch time then it's kind of look the same be interesting to see what's the relative difference these are like watch time per subscriber that's something I could visualize here I'm sure that many of you watching this could come up with a much more stylish or perhaps more effective way of communicating this so here's the thing I will publish does these data files along with the source code for this particular video I would love to see you maybe we can have some rainbow train themed visualizations and try it with other try it with other mapping api's try thinking about it in different ways how can you communicate this data better than I have and I hope you will share that with me so thanks for tolerating this video which is very very long where I struggle with a lot of aspects but to me this is a really exciting that I can have a tiled map that I can zoom in and out of and interactively move around as well as draw on top so by the way these can all be animations this is the other thing like so I've done nothing visually or interesting here really or I'm not animating anything and that's the other thing you should really think about right so just to like quickly make that if I say like frame count module is 255 and you know the the scale the size the is the scale is also times you know sine of frame count times 0.01 or something right I'm just gonna add some weird stuff to animate it right you could see that these are now hold on let me have that animate a little faster 0.1 you can see that they're blinking right and that blinking is going to stay consistent as I move around the map and the color is changing so this is the other thing you can do you can animate this stuff so what can you do with this data what can you do with your own data what can you do with maps that look like this with other Maps think about the projection that you're using research about different mapping projections in different ways of showing maps and make something share with me in the comments share with me at Schiffman on twitter and also look for the link in the video's description to the coding trade comp a where you can submit a contribution to link out to one of your contributions as well okay thanks for watching this video thanks for subscribing I mean maybe you didn't subscribe which is fine you don't have to subscribe but for those of you also subscribe thank you thank you for watching thank you for everything it's an honor and a privilege for me to get to make these video tutorials and have and reach people all over the world and let's just have a look one more time at all of you all over the world there you are all of you all over the world thank you [Music] you

Channel: The Coding Train

Views: 172,760

Keywords: programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, class, challenge, codingtrain, code challenge, mappa, mappa.js, map viz, map visualization, map visualization js, map visualization javascript, 500k subscribers, 500k subs, 500000 subs, 500000 subscribers, youtube analytics, youtube analytics api, javascript (programming language), es6 arrow, es6 arrow functions, json tutorial, p5 js

Id: Ae73YY_GAU8

Length: 51min 6sec (3066 seconds)

Published: Mon Jul 09 2018