[Music] hello and welcome to code creative i'm travis tolson all right we're kicking off part three here of the salary survey analysis tool um for those catching up i am not building this one out on servicenow for data protection purposes uh so i'm actually building just a plain old static site javascript html css on a file system uh that i am hosting here locally so at this point i've gotten a fair amount set up i'm using a redux style of store and really it's a poor man's redux i'm not actually using the redux store itself i kind of wrote my own quick version of it and you can see some of that output down here not much to look at right now of course but basically the end goal is to have a list of the different attributes from the salary survey that i can click through visual uh view the variances uh if i were to split the data on those attributes and then be able to display histograms for the different attributes so that i can see how the salary survey responses break down by the different attribute groupings at this point i am up to actually calculating the histogram data so if we look at the application state right now you'll see that i've got a filter which if we step back to earlier you'll see that i can add filters and remove filters by issuing the appropriate action i've got a histogram configuration which allows me to select different properties to display the histogram for um at least i think that now that was the histogram selected property what was the histogram config i don't remember that one now oh that was just me dumping a random variable because i assumed i would need additional configuration for it but i wasn't sure what it was going to be yet so for now it's just test and then we've got the responses which currently is my uh in the data folder here and this is just my dummy data i'll be replacing that with the salary data later so right now we are at the point of building out our histogram selector so that we can actually produce our histogram now i think what i'm going to go with is chart js it is mit licensed so it is it's fairly simple i mean it's uh it's not got all the bells and whistles and uh luster of high charts but it also doesn't have all the different licensing and such it's just mit nice and simple no questions no concerns um now right now what i want to do is i want to actually populate our histogram data uh kevin welcome kevin had to go the default uh video resolution 1080p is much easier to read on cell interesting um yeah i guess i am running 1440 now so i don't i actually hadn't considered how that might impact uh how that might impact um folks viewing i'll have to keep that in mind i may have to like downsample the stream or something i'm not sure i'll have to play around with that one um right now though we're going to look at building out this histogram data which from if i'm looking at chart js this is kind of what i'm going for is just a simple vertical chart that'll allow me to display the histogram uh i will have to have specific hard set bins and the data i believe is just an array um what it doesn't say is the label here let's come up here real quick and let's inspect and let's find your script usually they go off the id there we go all right so the options it's passing data okay so data takes a labels object and you can see january february right here so there's the bins which is just an array and then you've got the datasets which okay so data my first data set okay so we've just the data sets just an array of objects where each object contains a data element with the array of values okay so here's what we need to do first thing i'm going to do is pull up my data responses which really has kind of turned into my configuration uh almost um but i'm going to throw an additional variable down here and we'll call this one bins and for now we're going to keep this one simple let's see 25 30 46 45 let's see our min our min looks like 25 and our max is up around 52 so let's do this our bins array is going to be low high a series of objects for low high we will start at we'll start at ah we'll start at 20 25 and [Music] the oh kevin says the def the video was defaulted to 360 or 480 by default ah gotcha gotcha all right so i'm going to build out these bins real quick and we'll just slap a few of them down and we'll go 25 to 30 30 35 40 45 50 55 60. that should be enough and then we need 25 30 35 40 45 i know this is so exciting to watch 55 travis can count by fives this is fantastic the best part's gonna be when i realized i screwed it up somewhere all right i think that works and then we'll export the bins all right so the bins are just for the histogram each bin is going to be a column and i have to give it uh because histograms have continuous values uh the low and the highs um overlap on the bins so basically what i'm saying is that this first column is going to be a count of in this case the number of records whose hours played is between 20 and 25. uh i'll do a greater than or equal to 20 and a less than 25 that way we've got a nice continuous set of ranges on the bins kevin says he's falling asleep uh sorry i know counting isn't that exciting oops and i didn't want to export that i wanted to export bins okay so now i'm going to jump back over to my selectors now to get my histogram histograms what i said in the last one was that my output my desired output object for the histograms is a parent array of bins and a set of children bins so if i pull up my diagram here basically what i want the ability to do in this analysis app is the ability to uh you know if this was a decision tree representing the response data and i filtered down i filtered my all responses by just out where outlook is rainy and then i wanted to see how that would split how the variance of that split would work then what i have is a histogram of rainy and then a histogram of hot mild and cool which are the options for the temperature so if i filtered down and i selected to show a histogram of temperature then that's what i would see i want to see three histograms one for this one and one for each of the splits and that's going to help us to visualize how the temperature property impacts that data set when it's been filtered to rainy and that way we can step through that hierarchy uh so what i have to do is for each of these uh histogram value sets that i want uh for each chart essentially i have to iterate through the responses and for each response i need to go through each bin and add the response to the correct bin so um this should be fun so let's see the first thing i need to do is for the parent so for the parent we're going to have to oh this is going to get dicey all right i'm going to need an additional function here and it's gonna have to get histogram for filter we'll say uh okay so on this one we're going to pass our data set well we'll call it responses to keep everything consistent and we need the filter now maybe that won't work let's do this we'll handle the filtering at a different level right now i'm just going to create the sub function that actually handles once i've filtered a data set down it's going to handle populating those responses and getting the array and that's all it's going to handle that will remove the complexity of dealing with this whole object and all i'm going to focus on right now is calculating this one array given some known set of responses so for this what i have to do is do a responses dot for each so for each response next i need to do an import and we are pulling this one from uh actually i don't have to add a new one because i can grab it from here and i'm grabbing bins and let's see so for each response i need to iterate the bins okay let's see and we're going to have let's see there's got to be an easier way to do this but we're going to do it this way first and then maybe rethink actually now let's flip this let's flip this we're going to do bins. reduce so what reduce is going to do is or no sorry map i want bins.map so what this is going to do is it's going to iterate through for each bin and it's going to accept the individual bin and it will return the resulting value so basically basically what this is going to do let's say i had 10 20 30 40 as an array just saying and i wanted to map over it uh and i wanted to say where uh in my function i wanted to say return bin plus 10 then what it's going to do is it'll iterate through each of these and replace the vec it'll create a new array replacing each element with the result of this function so in other words it would do 10 plus 10 is 20. 20 plus 10 is 30. 30 plus 10 is 40. and 40 plus 10 is 50 and this would be the resulting array so and that's closer to the actual result that i want because what i want is the count for each bin so i actually want to iterate the bins first then what i want to do is for each bin i want to count so that's going to be a reduce so i'm going to take the responses dot reduce and reduce takes an accumulated value or we'll call it sum and the response or the individual item in the array and so what this is going to do is this is going to be my counting function so if response and i need my target property which i am importing up here so my target property in this case is hours played it's part of my configuration uh that'll become salary later on uh or whatever i have that per whatever i have the salary property uh set to whatever that name is so if the target property of the response is greater than the bin which is this bin uh the bin we're iterating through dot low and response dot or sorry response target property is less than then dot high and that actually needs to be less than or equal to then we're going to return sum plus one else return sum so this is going to give us a basic counter function so basically what this is going to do is it is going to move through each bin and then for and then it will iterate through so first it will hit bin 1. then it's going to go through each response and count every record where the hours played our target property is greater than or equal to low but less than the high and since all of our bins are mutually exclusive each one will only be counted in the appropriate bin um performance wise this is not as efficient as it could be since i know once you know that take this first one as an example it's 25 so i know that's going to be in the second bin i could technically discard that record as soon as i count it and reduce the size of my array and performance would go up but i'm just not all that concerned with that particular aspect of the performance right now this would be good enough and because i've got a nice function definition it accepts an array of responses it will return an array of counts i'm not terribly concerned about the individual performance of the function because i can improve that in the future if i find need to so now that i've got a function that is going to [Music] compute my bins given the responses and actually i'm going to make this one a little bit better because i'm going to say target property is a variable i'm not going to accept it from up here um and we'll do bins responses target property and that'll do okay so what i've done is i've actually decoupled this function from the imports and i'm going to pass those values another way that'll make this function a little more testable if i get into trouble um because basically now i can take this function out of this module completely and i could dump it into here and i could test this individual function without having an import of bins responses or target property i could inject those manually so continuing on all right so the problem here is that the the next problem to solve is that i don't actually know in advance what the children are going to be the parent is going to be an easy one to solve because the parent is just going to be in fact let's go ahead and the parent all the parents going to be is low dash get histogram responses and we're going to pass bins which is coming from our import we're going to pass state dot responses i think oops i'm on the wrong one for that yeah state dot responses actually that's not what that's going to be i'm going to have to correct that one and then target property gets passed in all right let's see what i actually want here is get filtered responses state and that's one of the functions one of the selector functions we built before which is going to take the state filter in the current state and it's going to apply it to the responses object in order to filter that based on my current application filter now that's going to give me parent that one's set children however children's going to be messy um so children in this case what we're looking at is the histogram selected property so in this case in this case it's outlook so we'd be looking at rainy overcast rainy overcast and sunny but if my histogram selected property was temp then the children would be hot mild and cool we're looking at the properties of that selected so to get that what we're going to have to do is so first we're going to have to get what each of those are uh so let's do this var children children children is equal to an object and we're going to do all right so i need to know what all possible combinations of i need to know what all of them are and i don't have that information yet and technically i'm going to need it on all of them and that could that could get messy um so if i look at my responses list and i really can't i really don't want to pre-compute that i don't really want to pre-compute those values or do i because if i were to filter the data set down and there were none i think i'd want to see that so basically what i'm thinking through right now is you know let's say that my filter selected only for these records here the temperatures in that are only cool and mild there's no hot hot has been completely excluded and what i'm thinking through is in terms of this tree what i want to see hot what i want to see hot or what i want to bypass it um and i think the answer there is because i'm not when i calculate two attribute variants it's going to be excluded i may have to revisit this one later for now for now i think i have to go off of the data set that i have um let me think about this one because in a decision tree you want to look at the variance as it changes from the previous node you don't want to look at it from the total data set so yeah i think what i'm going to have to do here is look at just just the ones that are there all right so here's what we'll do and let's see let's do this real quick because i need to explore something let's see let's try object.values now because object.values would get that i have i really don't have a choice other than to iterate the array and find all of the unique um and because it's nested there's not really going to be anything native vanilla javascript i'm sure lodash has something i could use but trying to avoid pulling in libraries right now all right we'll just we'll crunch it we'll crunch it so here's what we're going to do we're going to do filtered responses is equal to get filtered responses that way we only have to do it once then filtered responses dot for each and um let's see filtered responses for each for each one we are going to yeah this is going to be a light bit ugly uh response this is messy so var selected let's see what do i call it over here selective property so we're going to say response state dot histogram selected property let me copy this guy just to make sure i got it right all right so then children selected property value is equal to an array in elegant but it'll do so basically what this is going to do is it's going to go through each response and for each response it's going to add basically this right here the the property and an empty array as the value so now at this point what i can do and granted i could probably do this in this function but if i end up improving this aspect i don't want my i don't want this next part coupled to this previous step and the next part is going to be object.values children for each andrew how's it going man we're actually working on the uh on the histogram for a change how you doing man let's see so for each property value we need to let it state just got back from lunch this time zone different stuff is really weird trying to work out how ldap logins user transforms are triggered that one's a uh ldap logins and user transforms that's done by schedule job isn't it gosh that's been it's been so long since i've done anything with the the ldap integrations filter response all right we're going to have to change this guy up a little bit i want to kill it all right i'm going to have to amend our get filtered responses and the reason is because down here on the histogram i have to apply different filters so um all right so that should work for that but now i have to find where i've done this before so like here i have to now make it state dot filter actually wait a second no i don't no i don't no i don't no i don't because and this is one of the cool things i love doing whenever adding new options so um we'll call this one a filter override and we'll make it an optional parameter and var filter is going to equal filter override or state.filter and that my friends is how we introduce a non-breaking change so now i can eliminate the state call here and i can just use the filter and basically what will happen is in all of these instances where all i've passed state it'll use state dot filter because filter override will be undefined but in these new cases i have down here i can pass a customized filter and still get the results i need um all right so for each of my property values so hot mild cool what i'm going to do is i have to get that value for each of them or rather i have to get the histogram for each of them so basically what we're going to have here is children property value is equal to blowdash get histogram responses we're still passing the same bins all the histograms are going to have the same x-axis and this is what's going to allow us to actually compare the variances more accurately uh if the bins changed from histogram to histogram you wouldn't have an uh an accurate uh comparison for for the visualization um let's see so we're gonna pass the bins the filtered responses is what has to change the target property stays the same for that function but what we have to do is we have to do get filtered responses and that's going to be ugly i don't want to do that let's do this far um i'll just actually use the same one i had before so filtered responses is equal to get filtered responses we'll figure out those parameters in a second because i gotta correct this red squiggly before it drives me up a wall all right now get filtered responses i have to pass the state okay so that's going to stay the same we're still passing state what i need to change is the filter override so i need a new parameter in here and here's what we're going to do filter is equal to object dot assign i'm going to assign a blank object to state dot filter so what this is going to do is object assign is going to assign this guy the same values as our state dot filter which is effectively going to create a clone of state dot filter that way we're not modifying the application state in the process we're creating a clone of it um but what i need to do is then oh wait wait wait wait wait wait i can do a fancy because we're using es6 syntax i can do a property value a dynamic assignment and it is or sorry no no go back um missing something here missing something missing something missing something selected property state dot histogram selected property that's the one i want so my selected property is actually going to be the this guy and i want to filter where it is the property value man this is a mess this function's a mess um okay so basically what we're going to do let's say for example that we're doing this on temperature okay so um going back to my little diagram here let's say that i have already filtered to rainy so my filter in the application state is going to look like this outlook is rainy okay now what this function is going to do is first it will um first of all it's going to calculate the histogram with the current state on it so that's the first thing it's going to do it's just going to calculate it naturally it's not going to do anything fancy with it [Music] next it is going to grab the uh 4r histogram selected property this guy which is currently outlook uh well here let's make pretend that it's temperature right now we'll pretend that the uh selected property is temperature so what it's going to do is it's going to iterate through and it's going to find hot mild and cool so it's going to iterate through each of these and children will get populated with hot mild and cool then it's going to iterate through those values hot mild and cool so when the property is hot it's going to modify my filter to say that temp is hot and then it will recompute the histogram for that child then it'll change to mild and it will recompute the histogram for mild and then it will change to what was the other one uh cool and it will recompute the histogram for cool and it will ultimately make the children object look like this one down here so now the last thing that i have to do in theory is assign parent to that and children to that and instead of assigning the variable we are going to return and now we have to test this hot mess and there is no way this is going to work on the first try that was that function is way too complicated there's no way i got it right on the first go i need to go back to app and what we're going to do is import from our selectors i've got get split variances there already and we're going to do get histograms and so store dot get state and if you remember correctly last time we set up the get split variances so i'm going to run that one too because basically it shouldn't modify anything these are selectors the only thing they do is return a um a sliced view of our state they they derive computed state from the original application state that we have in here so it shouldn't modify the state so i should be able to run these two functions in any order and the results should be the same oh here goes nothing there it is errors filter is not defined and let the debugging begin alright so selectors line 58 um var filter try again reduce of empty array with no initial value oh well that is another tick that's going to hurt is where did i do that reduce this reduce up here needs a default value a so we'll comma or an initial value rather so we're going to initialize that one to zero let's see and it says reduce of empty array with no initial value i don't know who was empty on that one i guess we'll find out let's find out who is empty that's scary all right so let's log these out okay so if i go to my bins one two three four five six seven eight nine i have nine bins jace how's it going man so i got nine bins here i've got nine bins in my parent and if i do a manual ah and i just realized that i actually had a value that was lower i'm gonna add a bin oh wait no no no that one should fall into there okay so let's see if i've calculate this one out that one should go there 1 30 should go less than or equal to 46 should go into this bin 45 should go into this bin uh 52 should go into this spin 23 should go into this spin 43 should go into this bin 35 should go into this bin 38 should go into this bin 46 into this bin 48 into this bin 52 into this bin 44 into this bin and 30 into this bin what's going on mike barr he's not even used anderson he's not even using arrow functions no i don't use arrow functions i my brain has not accepted the syntax yet i have a really hard time reading them and i am a huge proponent of if you can't read it don't write it so um no okay uh one there's only two between 25 and 30 35 i think i miscounted that one into the wrong bin and if they shift those down i don't think those are right nope they're not don't be mean here let's do it this way uh 25 30 so i'm trying to make sure that my bins are actually counting out correctly uh 52 let's see 25 30 46 45 52 23 43 35 38 mike says he's joining for your uh for your commentary too bad you got roped in it's your fault you started talking you can't leave now i should be writing a blog article well i mean if you're writing a blog article i can let you go do that but if you're looking if it's like servicenow related but if i want to like go take a bath and read a book that's no bueno no bueno you're in you're in for the long haul now you know 2 3 4 6 7 8 9 10 11 12 13 14 14. i've got 14 near okay now i need to binge now the good news here is that now i can let xl do the mathy mathy shut your face i don't do matthew matthew jay says blog writing doesn't pay the bills no it doesn't a random world generator for economic stuff i don't i don't know if i like this idea that sounds like lots of mathy mathy count if and how am i supposed to check this if i have to check that first i don't think i thought this one through i didn't range criteria count if less than or equal to that or no greater than or equal to d1 i might actually have this i might actually have it dang it hey good morning druv dang it all right well that's not going to work can't can't even quit microsoft excel properly all right let's do this all right 25 is going to go into that bin 30 is going to go into the next bin up 46. yes yes yes i decided to check my code in javascript by writing code in excel and then i realized i'm worse at excel than i am at javascript and now i have no way of automating my tests um okay i don't like this this is hard honey do the math what math do you want me to do it's actually counting but it's still hard oh my gosh so i have to count where it's so each of these is a bin that's the low end that's the high end and i have to count how many of these are in each of those bins and it's making my brain hurt okay well between those two numbers there's like 125. yeah but it's greater than or equal to there but less than that so it actually goes into that bit and then 30 goes into the next bin up and then 46 goes into that bin this is not hard 45 goes into that bin and then 52 goes into this bin and then 23 [Music] goes in that bin and 43 goes into that bin and then 35 goes into next bin up no wait wouldn't it go into like that then because it's 30 35 and 35 to 40 not in the 40 to 45 you're probably right yeah i like that you can say that whenever you want and then 38 goes into that bin yeah and then 46 goes into that then yes no wrong way oh testing is hard 48 goes into this bin mike is asking why don't i just do it because i'm much better at managing than like 52 goes into this bin 44 goes into this bin 30 goes into this bin yeah okay 1 1 2 2 2 4 2 0 0. hey it is working that was hard to test all your code like that all of it every last bit of it okay andrew says just make it work i get myself into a jam and i'm like honey just make it work shh the baby's [Laughter] sleeping um okay all right so now jace needs to know what you're doing ah um so jace we are trying to build we're counting we're counting all right so basically jace the the goal here is to create a tool where uh here let me pull something up here and i will show you so basically i am going to have a list of um fields in the salary survey or a list of questions in the salary survey um that goes down the side and i'll be able to click these this list of questions uh the stream is only good on desktop on phone it's terrible um who is it that was saying earlier kevin was saying that earlier that it was defaulting to 360 or 480. um yep there he is up he's still hanging out uh he was saying that if you up the resolution it's still pretty good um but [Laughter] man everybody comes for your commentary so down the left-hand side um i'm going to have a list of the fields from the salary survey uh a list of the field names uh the question names basically and i will be able to uh select those and when i select those it will build a series of histograms in the middle section and basically you'll have a large parent histogram and then you will have smaller children histograms the parent is for the uh is for the whole data set and the children is to show the histogram where each question is broken down by its values so um you know i'm using a sample data set right now because i'm not sharing the original uh data set andrew says we aren't all in the middle of the workday you're not paying attention anymore are you yup you're not paying attention you checked out oh my goodness [Laughter] um anyhow so bottom line is that this is going to allow me to quickly click through and filter through the different jace doesn't blame you it's going to allow you to click through allow me to click through and filter through the salary survey data and produce um histograms for that you know and basically this is following what machine learning decision trees build out internally but i'm doing it a little more manually because i actually want to see the process because we're not trying to build a machine learning algorithm that will predict a salary outcome based on input properties we're trying to understand what input properties matter for the output prediction so i'm kind of turning a decision tree inside out for the set for the purposes of a salary survey and the part we're on now is actually building the histograms themselves um so the parent histogram for these bins these low and high bins would output these counts for the parent and the children are outputting junk right now so there's a metaphor in that right in that right there yeah i'm gonna leave that one alone my children are wonderful our children are wonderful [Laughter] decision salary survey tree yeah kind of kevin it's going to be kind of like that so what i wanted to do with the salary survey is i what i didn't want to do rather is i didn't want to just output a bunch of this is how many people answered the salary survey from this country this is how many answered it with this job title what i wanted to do was i wanted to be able to say if you have this certification you're more likely to fall into this bracket as opposed to this bracket you know or maybe maybe certifications don't matter at all and doesn't impact the variance in the output salary distribution at all uh you know i wanted to look at what country you're from does that influence uh and yeah what gender what race uh you know do any of these attributes do basic demographics influence or is it more a product of your work is it more a product of how many hours you put in or what you know or is it a product of what parts of the platform you deal with on a daily basis so in order to answer those questions uh we had to look at something else we couldn't look at just basic pie charts uh so what i moved to was histograms and salary distributions um kevin says i have one certification working on the second one two if you count the pricing certification released some time ago yeah yeah me too don't ask me about the pricing though i'm just i'm just going to tell you to go ask your sales rep [Laughter] and that cert just got revoked for me you have other certs though i do i'm lazy i have the basic one and then i have service portal that's it man if i come out of this survey response and i look at the distributions and it shows that salaries or certifications have little to no influence on salary somebody a service now is gonna get sent down to take me out yes so what you do is you say okay officially i have to tell you the desserts are vital to your salary it is required if you want to be a part of the partner program well technically we're not partners jay says certificates have little to no influences we will find out mathematically mythbusters investigates here's a custom table there's a custom table here's another one oh shoot you owe 10 000 more which really gets in the way of my building cool stuff in portal i know it really breaks my innovative heart survey you'll need a survey he knows what's up let's see so what did i break and why why are the children not working cause they're lazy wow how about because they're not of age to work damn millennials jeez i'm sorry you're just giving this to me it's hilarious all right anti-child labor laws child labor was like a principle of mine um for each i set the value that's good it's got to be my property value object value children property value is going to be junk maybe the real estate it's an array i'm an idiot i need object.keys are you tracking this i am not tracking it in a github repo right now but i will put it in a github repo um i mean right now i wouldn't even count this as being worth putting anywhere but yes it will be it will be made publicly available so everybody can scrutinize my code because i'm not going to lie it is kind of trashy right now i mean i've got actions and responses that are separated separate or that are in joint files but then i have feature based files for histogram and or it's a mess it's all over the place why do you have so many different javascript files because i'm using because i'm using es6 modules which lets you breaks it up a little bit more oh that's fancy right i don't know nothing about those new faces these these import statements these import and export statements are like automatically walked so if you look at my index sheet in your html kind of kind of so if you look at my this is the html that's producing this it's only importing app.js app.js imports all the others oh that's cool so i don't have to do any kind of fancy build process i don't have to do any any craziness i can just let the browser handle it var trashy is equal to true yes jace yes trashy is equal to true we'll put it in here because this is where the configuration goes see if you're gonna put code out there so everybody can like see your process and blah blah this is where i'm like injecting my nerdy chase certified configuration [Laughter] and making variables like references to star wars and stuff like that um let's see i don't even remember where i was now oh wait wait my distributions my distributions so what we have here is the counts now two so what you can see is that if this was done properly i think that one actually slides down sarah what are you writing about chase wants to know i did the first part of a three-part series the first one was just on a basic design for like a little uh panel widget basically cleaning it up and the uh second and third parts the second one's just going to be putting a basic glide record into a widget to call a list of records or what have you and then the third one i'm going to show people how to set up instance options real basic stuff but i get a lot of questions about these like uh just the getting started and honestly i when i first started i didn't know how to do any kind of javascript so one of the best things that travis gave me was just here's the block of code this is how you call records in a glide record query so you know little things like this perfect then i want to dive into the new ux framework and do something in there because that looks cool it works it works it works yay so now what oh no i didn't get that far i was answering jace's question oh good do a fine replace for var and change to let yeah yeah you're you are not wrong there uh andrew what does that do so [Music] not the word variance though that wouldn't work um var space should be left space in most of these scenarios today oh wow that always happens when you join in when it's just me it's like just me as soon as you join in everybody else comes that's why they better not freaking cancel knowledge this year i didn't get to go the past two years and i want to go and meet everybody all right let's see if that didn't break anything perfect still works so let uh to to answer your question oh jace already has it yes let is special and it lets you protect variables from scoping yeah i i thought of like another reference that just ignore me but okay so what do you mean it keeps so basically if i were to um there are certain block statements that leak variables when you do var it'll leak the variable when you do let it locks it down just to that block statement okay is my understanding okay that makes sense you should like let there be light in there don't know why you let me in here when you do this i am not helpful and then i see mike say yep but i'm feeling his vote of confidence jay says he can't do this in comments um let's see so like this is a big one here like for loops okay in this for loop here if i were to change this to var that var i exists at the function declaration level so i would still be able to access i out here when i do let it is isolated to just this four block oh that's neat keep that in mind okay thank you gentlemen so it uh it it takes what var started and takes it to the next logical step and there was light so hopefully that helps hopefully that helps clarify a little bit look you're the you're the reason my sense of humor is like taking a nosedive into punsville okay all right i will let you do the thing y'all have a good night well honestly i think i'm gonna wrap up for the evening because it's just about 10 o'clock and and you've distracted me into oblivion but the good news is that with the histogram data being available at this point because now i'm where'd it go app.js now i'm able to get histograms for the current state i'm able to calculate the split variances for the current state the next step is yeah there's no there's the uh let's see let me make sure i understood the question right it might be on portal on client side sure yeah it's uh es6 you can definitely use client-side one of the things you have to keep in mind is that es6 is limited to certain browsers so like there's a lot of stuff in es6 that is not available on ie anything the but as long as you're using modern browsers edge chrome anything else es6 quite a bit of es6 if not all of it is pretty much available server side on servicenow es6 is not available um which is sad but in theory you could technically uh if you wanted to you could write it outside of servicenow and use babel to compile it i don't know why you'd want to do that because it would make it mushy and ugly in the instance but you could technically do it it is kind of janky but you can do it um but so next time next time i am actually not going to be using d3 i'm gonna use chart js um d3 i don't know if it's still the same way that it was before um but d3 if i remember correctly requires a lot of manual intervention on the visualization aspect whereas chart js i can just use a bar jam a couple arrays in it and away it goes um what do you mean it needs like so if you look at let's go take a look d3 gives you the ability to make any kind of visualization you want like look at all this stuff you all of this is like drawn in d3 it is yeah so if you look here this is this is what d3s looks like and i'm honestly not even sure how to make sense of most of this you know there's a lot of attribute updating this is fancy okay rtfm and travis does not like rtfm so so d3 is a very low level library it may have some stuff already built on top but i'd have to go find it whereas with chart js all i have to do is pass it some arrays there's like a standard javascript object i pass it some arrays and it draws everything for me um so yeah andrew says he's played with d3 and service portal and it's a pain yeah i mean d3 has so much power but you're using a lower level library you're not using a high level language yes more human readable yeah yeah you know d3 there's a lot of lower level manipulation going on in terms of the uh the html svg structures that you're outputting um you know whereas with this what's your control let's put it this way in chart js what you are controlling is a data series you hand it a data series a list of numbers you hand it a list of labels you hand it a list of labels here and it computes the rest with d3 you're passing it you know much lower level objects you can see some of the objects in here like a scale um but if you learn the language you can do more with visualizations on this and somebody was saying it was um vivid charts yeah mike barr was saying vivid charts uses d3 for their stuff honestly when you look under a lot of different charting libraries that are out there a lot of visualization libraries use d3 under the hood and they just build a an easier to consume api on top of d3 so it is it is amazing uh but in my case church as is going to do exactly what i want with a whole lot less code um so i'm going to use it this time around um because all i have to do is pass it my data set and it will out the charts for me you do and i mean i can turn around and take a peek here and you can see some of the rgbas in here for background colors on the different bars border colors on the different bars you know uh it exposes a lot of different options for customizing it um you know but again if you wanted to turn around and overlay a line chart on top of the bar chart chart js might support it but it might not um if you wanted to you know start doing uh some of these map type charts and stuff like that chart.js i don't think has those um i know i'm thinking about the improvements that are coming to crm pro's portal and uh the charts and graphs that we have in that because the out of box widget that calls reports um it's it's a little slow and i you know i'm always looking for a way to improve the ui yeah if you're looking at embedding something in service portal and you're not going outside of basic excel charts something like chart js is probably going to be your best move the the api is much easier to consume it's a simple javascript object and all you pass it is the construction options the same way that you do with any other um instance option on a widget d3 is a whole other beast that opens up a lot of power but with it comes a lot of complexity comes in a rocket can power thirst yeah chart js is a solid one and it uses mit license so you can use it with whatever you need i will be embedding that one next time and when i get to that i will be needing because we're going to be moving to the front end i am going to be using native vanilla web components which will bear vague similarity to ux framework components but ux framework does have some more proprietary stuff on top of it well not proprietary to servicenow but it uses jsx and a few other things i'm not built bringing that stuff into this project i'm just going to use vanilla web components but the ideas are similar um that is very true chase everyone should have kids they are the greatest joy in the world but they're also terrorists you realize this as soon as they're born and they start using sleep deprivation to break you man i broke years ago i'll have to say that he goes down at 8 8 30 and he doesn't get up till late 8 30. it's nice but when he's awake oh my god i exp i explained my second child as hooking new york city up to a car battery and i'm the car battery he got an extroverted version of himself ray rama [Music] did i miss anything else while i was going through the d3 stuff okay so yeah so next time we're going to start actually building ui i have all the basic data calculations which honestly is kind of weird because i didn't expect to do it in three sessions that went a lot faster than i expected which is great you were in good company i was everybody loves travis my life could be a sitcom um i'm not sure that it's not well maybe it is all right so next time we will dive into the components and actually building out the ui piece i'm thinking that's going to take another two sessions of work maybe three well it depends on if sarah sarah participates we just need travis's mom criticize oh trust me trust me my mom is not going to criticize sarah's cooking that is not going to happen i love my mom but cooking is not her forte my father my father on the other hand oh he gives me crap every time i try to come damn there's no pleasing him but he's a great cook so my father refers to himself as masterchef and me as junior master chef so that's that's a whole can we could get it we could spend the next hour talking about your father that man is an entertainer through and through i have no idea why i'm streaming and he's not [Laughter] but he's a panthers fan so you know he's not perfect that's right they lost this week all right guys thanks for joining in had a blast hanging out with you guys this evening and building this out um like i said next time we'll dig into the ui and um i'm hoping to wrap up this tool this week so that i can begin the analysis portion and actually digging through the salary survey data so that i can produce all of the published documents you know before next year while it's still hopefully relevant will leave us alone and you can get it done well yeah as long as bees aren't trying to kill me and hurricanes aren't trying to take the roof off and the black plague isn't trying to wipe everybody out and fires aren't burning down in australia and out western united states and man see y'all have a good night that's a good idea oh jay says uh next time i should talk about how we made slash hosted the survey sounds good yeah i will definitely have to do one on that one it's sitting right over here but yeah we'll definitely do that uh take care guys thanks a lot and have a good night hope to see you next time