Get it Right in Black & White Episode 13 - Closing the Series

hello hello testing how are you hello koran how are you i'm good thanks how are you good and welcome eric how's it going hello can you hear me yep great yeah i think i'll just wait for a few more folks to join right so this is going to be i read that this is going to be the last episode of the series it will well it was an amazing journey oh great thank you yeah i'm happy to hear it and i'm i'm going to do something like this again in the future but i think this is a good time to stop this series and the reasoning is i really want to focus on developing vishub itself develop it into something greater than what it is and then do another course like this using you know new very nice you know a better a better working system great then well that's a great goal to have and and i really love bishop you know so great that you will keep working on it excellent oh i'm so happy to hear that likewise i i just love it it's really accelerated learning um and you know one of the things i'm hoping is you know find out how how can we support bizhub you know moving into the future right i i just i i didn't realize you'd have done a kickstarter and then i read the kickstarter and so i have a better sense of the vision now and so i'd love to actually talk to you a little a little more offline about it if that's great let's do that yeah let's plan on i actually have some ideas so really oh that's great yeah let's plan on that i mean it's viz hub has been my passion project since 2018 and um i've rewritten it twice and i'm i'm embarking on rewriting it again okay because i went in the other day to try to redeploy and like upgrade the dependencies and it's like it was just so heavy feeling you know a code base that i've been working on for two years and so i really want to like do a deep dive and like make vidshop as good as it could possibly be and uh focus on things like you know hot reloading of the code is is what i've really been intrigued by and also having some state associated with the visuals so the if you want to tweak something you don't have to change the code but you'd have like a knob or a dial that you could just touch and tweak and see the feedback instantaneously so i was just very um inspired to start working on the next the next iteration of vishub that's that's what i'm going to do but but this has been a really great experience this series because it's developed this little following which i think is it's amazing it's it's a golden little um group of folks and and i just want to say i really appreciate all of you who have participated it's been really fun and i've it's been really great to see you all learn and grow and do new things that you've never done before so thanks for that no thank you for all your being so kind to to share your knowledge you know it's my pleasure yeah and it's it's you know it's proved it sort of proved the one of the original vision goals of of this hub and my teaching to to reach a wider audience of folks who might not otherwise be able to learn this stuff you know may not have access to you know a university so and it worked it's it's working i mean i've i've seen people from all sorts of different countries um if i look at the google analytics of his hub it's not just the us it's global the audience is global particularly in like developing countries which which i'm so thrilled by i just that's what i'm happy to see yeah i'm for example i'm from chile and you know last year i it was really a struggle or maybe 2019 it was really a struggle to find here uh a curse on d3 a like a leap course and well in the internet there's a lot of tutorials uh but but i you know the the ones that you produce are are the ones that really made me understand the tree and this one that was synchronous it was really also i i've learned a lot thanks to this oh great great i'm happy to hear that yeah yeah i remember being on and seeing someone from new zealand i think was on yeah so we had new zealand india us exactly it folks from india i think kostov you're located in india right yeah yeah i'm from india quite a diverse set that we have here i'm curious where do you live in india uh so i live near delhi ah nice up north you know i lived um i lived outside of nagpur for four and a half years oh well i didn't know that and actually i developed vizag when i was living in india i was riding my scooter my honda activa to my little rented office and uh coding viz vis-hub all day nice yeah i also like would be definitely interested in like you know seeing this grow and i found it really nice that feature that you just write your code and you automatically see the changes you don't have to press any button or build right right exactly activity yep and and that's that's one of the things that i love about this vis-hub 2 but the way that it works right now is that every time you make a change it tote it re-runs the entire page and i want to move away from that i want to share with you all brett victor inventing on principle this talk was hugely hugely inspiring to me so in this case the the value because he's got this idea that yeah check this out he's got this we are not seeing the anything oh i'm sorry i have to share my screen in this in this system too i forgot to do that it's live on youtube but not in the google meet but now you should be able to see it okay yeah this is the thing i just want to play this because it really resonates with me but working in the code working in a text editor blindly without an immediate connection to this thing which is what i'm actually trying to make so i feel this goes against this principle i have that creators need an immediate connection they're making so i try to come up with a coding environment that i thought might be more in line with this principle i have so what i have here is i've got this picture on the side and the code on this side and this this part draws the sky and this draws the mountains this draws the tree and when i make any change the code the picture changes immediately that's what i want to have so the code and the picture are always in sync who did this just change things in the code oh brett victor yeah i've seen things change in the picture but check this out he's about to do the craziest thing and now that we have this immediate connection between the code and the picture we can start thinking about ways of changing the code other than typing so for example this number here is the length of the branches if i want to control that number i just point my mouse to it hold down the control key and i can dial it up and down that's what i want oh wow i can see what it looks like for big bridges or small branches and i can kind of converge on what feels right to me artistically and this works really well with some of the stuff in the past it's amazing so this video by ve it's from 2012 this video by brett he's a visionary yes and what strikes me about this is it the way this environment this little environment that he custom built for just this one talk it it seems to not reload the entire page it just reruns the code in the page without having to reload the entire html and so i think you know this is the direction i want to take viz hub i want to make it so that you can author your code and and updates to the code should take on the order of milliseconds to execute without having to re run re-run the entire html and then from there i want to add like the ability to extract different variables into like little widgets on the side like in the editor of this hub there should be a visual editor with colors and numbers and strings and as you change those it should update instantly so yeah i just wanted to share some some context for why i'm why i'm ending this this series right now so yeah that's it have you been in contact with him on how he's done that no okay i mean he's he's a towering figure i mean brett victor he's yeah so i don't know if he's the kind of person i could just get in touch with you know he's like this this like celebrity figure yeah you know i worked at apple for years and years i think he developed a lot of the the early ui for like the ipads and stuff but hey that's not a bad idea maybe i should just send them an email yeah do it worth a try i guess and yeah someone asked how to support viz hub yeah the best way to support it right now is just to sign up for the the paid plan which is four dollars a month there's current there are currently not that many customers and it's not making money it's not even paying for the servers but um and this is another direction i'm going to take it i want to add more features that people would be willing to pay for so if anybody has ideas i mean i have a lot of ideas like pay for storage pay for collaborator seats pay for um white label embedding where you could embed a viz onto a website without the viz hub logo in it um custom domains for visits i mean imagine if you could create something at this hub and create it set up a domain name to point to that and so this could be your website hosting provider so i've got a lot of ideas if anybody else has more ideas let me know and i'd also i also want to make it the best tool out there for professors and teachers to use for teaching web any any courses to do with web technology so what's the best way to get to get in touch with you oh just just email me okay at gmail yeah current.kelleher gmail.com all right yep yeah and i'm on twitter so you know after i end this series i'll still be active on twitter i i will definitely announce um so it's yeah curran what is it current keller on twitter this is where i'll announce um any new developments or activities um okay and i i am thinking of doing like a a beta program where where i invite people to test out the the new version of vis hub that i'm developing and so if anybody would be interested in that let me know um i don't have any any onboarding form set up or anything like that you know but let me know i'd be happy to great yeah i'll keep you in mind all right so let's let's dig into this i i want to just wrap up the series by reviewing all the last uh the work that everyone's done for the last assignment and responding to whatever questions that come up i don't have any prepared material that i'm going to go through today so it's really just more of an informal discussion sort of a thing so let's see oh kostov is here with us um kostov you want to walk us through what um what you've what you've done yeah sure so like i took a copy of the scatter plot templates template that we prepared last thing and plugged in a data set which comes from this tidy tuesday project which also runs on twitter so this is run by the r for data science online learning community and they release like new data data sets every week and this was a data set that i hadn't explored before and just wanted to try out like explore it a bit further and thought like using d3 and the uh and all the things that you have learned over the past past weeks to create this was it shows the i think the median income median household income over time and varies by uh the different communities so as you can see that there's a significant difference between like whites and blacks and hispanics so this sort of brings out the income inequality which is still prevalent wow this is amazing and what where is this localized is it for the us or globally or yeah so this is just in the u.s so it's the entire us yes yes wow i think the original data comes from the u.s census right oh great urban institute that's a great group great great work good stuff i have a question for current about this beast yeah it's okay sure um is there a way because i really love the idea but but i think that maybe if the labels of the years are exactly a correspond exactly to the to the point it could be more easy to to read is there a way for the x axis the scale x axis come on process that or or do that let's take a look yeah i think that would be a very nice addition but before we dig into that i just want to say that this is exactly the kind of work that i was hoping for where it actually looks at a an issue in the world and i just want to take a second and i will i will get into that that question but i just want to take a second and think about what it means that white people in the u.s are earning it looks like on the order of you know 160k up and down whereas black people in the u.s are earning on the order of less than 40 000 a year i mean that's profound that's that's a profound piece of information also i was also surprised when i looked at sad to revisit the raw data just to confirm like i hadn't read it incorrectly or right like is that correct like oh my gosh that's what i was wondering there's such income inequality like this is the median what's the metric yeah this this is the median median household earnings adjusted for inflation i think yeah it's adjusted for inflation what is shocking to me as well that that that this difference is not improving in telling right it's not improving at all it's it's you know it seems to almost have been getting worse and if you if you if you inspect the median of the white group again you would see that they have increased in time right rising up compared to the other ethnic minorities and this big gap this big gap here must have been the 2008 um financial yeah financial crisis recession whatever they call it so that seems to have impacted everyone but it is it is shocking and like disturbing like why is it that white people earn so much more than black people i think that's that's ridiculous and just i you know thank you costa for selecting this particular data set and servicing this particular issue i think it's a very important thing to look at and can i say as well you brought last time you brought an important point that animation needs to serve a purpose and it's nice seeing it's not it's not very nice but it's it's very telling seeing those points drop when you say yes yeah yes i agree it's a very great use of animation yep and i would be curious to to do a similar analysis for different countries across the world and see if the gap is so high in other countries as well or if it's something that's unique to the us i don't know i haven't looked at the data but that would be an interesting analysis or maybe have this broken down in males and females as well right that would be another good analysis yes for sure for sure and then once you do that the possibilities of different ways of visualizing that increase dramatically because you can show multiple things at once and yeah that's one thing i wanted to get to with this course of like the variety of visualization types but we didn't we just essentially worked on scatter plots but i think that's okay because because you can build things that are interactive and scatter plots actually cover a huge range of data and so the first first thing you can do with any data set is is make a scatter plot so yeah amazing work costume now um who asked that question about aligning i did great great let's dig into that because i agree i agree this this apparently uses the built-in axis of you know from d3 which is not the same as the data points and so makes you wonder you know for a given dot what year is that right and i agree that that's a that's a good that's a good issue that i want to see fixed i'm just scrolling through to see what is actually going on here's the x-axis so if we just comment out that oh i forgot the dot call line if we just comment that out it renders without the axis which is fine although i kind of like i kind of want to keep the visual elements of the axis um so i'm just thinking how could we do this we could do some other rendering logic where we we render these tick tick marks ourselves or we may be able to configure d3 axis with a set number of points i believe we can do that let me just consult the d3 documentation yeah i think so ticks so yeah the nature of the tix method is not just one format see this is the format that we're using like 10. and then oh put something in the chat oh which chat google me nice so i'll copy it from the chat and take a look this is i'm pasting from the chat see.tx6 i still don't think this will do what we need because what i'm thinking is we may be able to pass an array of specific values into ticks that's what i'm trying to figure out see this this one here you it this passes in an array two ticks which leads me to believe that i think we can pass in an array of of dates so let's just try it instead of passing in ticks 10 what if i pass in an array that has just a single date where it's like uh the year 2000 does that show up no if i get rid of the formatter no do i i'm pretty sure there's a way to specify oh look here it is sorry to set the tick values explicitly use axis.take values yeah yeah yeah this is what we need this is what we need all right let's try that so i'll just undo to where it was before and then what if we say dot tick values and here we pass in a new date year 2000 boom that works see right it says 2000. and so now what we need to do to implement your idea is to just isolate the unique dates that appear in the data which should be relatively straightforward let me see what is the structure of the data well we already have x value which is perfect and i think this is the function that we need right here data.map a function that just returns all the x values all the dates or for that matter for that matter we can um um wait a minute wait a minute i was just thinking could we use x scale domain no we can't because that's the extent of it which we don't want so i'll just try this if i copy that down into the place where we put new date that does the trick awesome that was exciting that's impressive great beautiful yeah this is exactly what you were describing and i think it is a very nice improvement to the viz because now you know exactly what year each of these are and it's kind of surprising which years they selected i mean it doesn't seem to make any sense there's not really any pattern to it is there i mean i think it's every three years since 1999 every three years yeah with one missing brand in 1986 86 it was there was some missing data so i removed that but i think it's every three years interesting i wonder why they chose every three years well i guess that's the census every three years interesting oh i see there's a message in the chat from people's feelings you want to describe that oh yeah this is i was working on a similar thing i don't know if this is directly pertinent but just in case you wanted to look at it nice it's the same as the earlier approach you looked at what is the approach because it's a scatter plot and it references a cell this is from observable hq so tornado years is an array but this this i mean this will create an axis that just has the ticks that are defined by the like default tick generator setup so i don't think it actually addresses the issue that we were having oh sorry where because yeah with the issue that we wanted to do is is make it so that it's not just like every year or every 10 years or every five years but it's actually just the ticks from the years that are present in the data um but yeah thank you thanks for that can you have as well default labels default labels how do you mean so i was i was experimenting with something and i failed completely um say for example you have a a categorical variable you wanna you wanna show but one way of showing that is assigning uh numerical values for those say zero and one and by and by adding a jitter you allow the points not to position themselves over each other but then i got stuck with the actual label on the axis because then they display zeros and ones and and i want them to display back those categorical strings is this something in this hub that we could look at i've i felt completely to put it in this home oh it's not there okay it's not it's not i apologize it's just an idea in my head i see but you tried it you tried something i for for the exercise i wanted to represent data from the titanic and i wanted to show those uh say different uh deck levels but i want to show them as numerical values with a little bit of random jitter so the points don't position but i wanted to add the labels in and i kept turning in my head and i felt completely i didn't know where to to start from really that is basis of my question like a label over each point of the scatter plot uh like the current scatter plot we have but instead of saying 2005 you you you want to say say for example the financial collapse here you you may want to label that financial collapse instead of 2008. so i think what you're describing it's a lot like species right where you have discrete values and you want to map them to some x y like this yes so suppose in your data set those species were represented by three different numbers one two and three right but when you want to display the access label you want that they you want that access to display the actual species strings oh oh i see what you're saying well in that case you could do a data pre-processing step where before you pass the data into the visualization code you can just replace those numbers with the strings in the data but then i would lose that bit of jitter i would have on those values so okay i i encounter the same challenge and you know and i was able to i don't know if that's the correct approach but i was able to add jitter to a scale point even though it was a discrete variable um it it's it a current if you want to to show my example it's in in in the in the forum and i think it address i i believe it addresses this this issue oh great is it in here in this thread yes that's the one oh this one ah let's take a look very so if you put the the continent in the y axis and the date inscribed in the x axis there's a little bit of jitter big and that way it's not like a like in the in the setosa example in the in the flower example it's not like on the same exactly like exact line this is brilliant exactly exactly so how did you do it uh look the the y scale i believe i i added so much random there at some point so it's not in it's not in the scale definition it could be in the is it in the y value accessor perhaps i don't know i i you know i i look for examples yeah it took me a time a while to figure out you know i uh yeah i borrow it from somewhere so i don't remember exactly where i put it so it's not there it must be it must be in the rendering yes wow let me just search for a random there it is yeah it's right in the rendering logic see that makes a that makes perfect sense and that's how i would have done it as well yeah i see now i see yeah so right before you render it to the point add the jitter which is just a random number times 10. however math.random you have to understand it varies between 0 and 1. and so this code here will jitter the points only in one specific direction meaning it's it's going it's going to be the original x or greater so it's going to be someplace between the original x and the original x plus 10. normally jitter would um would move it in both directions and the way that you can do that oh it's i have to fork this to edit it and another just another side point i want this hub to show the previous authors too because it looks like i made this but it's not my work so that's one thing i want to address but the way that you could do that is something like -5 so then it would it would be x plus or minus 5 randomly and in general that would be like if you could you could if you wanted a variable for jitter you could make it like that and say random times jitter minus jitter divided by two yeah jitter is an interesting technique just adding adding random variation and this one actually if you were to put a bunch of points and jitter them like this what you would see is a square not a circle because it varies them in x and y in a square i've seen other people do jitter with such that when you generate you would see a circle and so then what you want to do is compute a random angle and a random distance from that angle and do the jitter like that that sounds difficult it's it's not that bad i mean you just need some sine and cosine it's easier to just create a function for for this right yeah actually that's not a bad idea yeah because there's duplicated logic which is unfortunate so we can call this jitter magnitude and we can make a function it's just a number and then we just do the jittering of that number and so that way we can say d is jitter of d dot x and then jitter of d dot y that would be one way to um uh you defining jitter for the jitter it's a recursive i whoops this one i forgot to change the name ah there we go yeah jitter is an interesting technique but um there's another technique that i like which is the force layout and in certain cases the force layout could be better than the jitter and this comes back to this notion that you mentioned here it is yeah so in the original question it was like how do we how do we split up how how do we split the points um jitter is one option but with jitter there's still a high probability that they're going to overlap each other however if you use d3 force with the collision constraint it has a similar effect to jitter but it guarantees that there's not going to be any overlap and this this could be a really nice option as well yes especially because my purpose was to like visualize each else that you were able to visualize each element each retouch element so i think that this solution is more proper to accomplish that goal yeah i think it's it's more accurate in a sense as well i'm trying to find a good example it gives a better sense where points cluster at specific places as opposed to jute yes yes because for example in my in my in my case i i wanted to show how in europe there's a disproportionately amount of heritage elements and and you can't really see that in this version because because as as current says there's a lot of overplotting in in europe right yeah yes if you did the b swarm on this layout or maybe this one that would be a very that if yeah i would suggest to try that to try the force layout the force directed layout with the collision constraint for this exact view without the jitter that way you would see that like with this this really dense area here in europe it would actually spread up and down it would give you a a visual up and down spread so you could really see the the quantity like the density of the points much more clearly than in this view yeah that would be similar to sort of a quasi-dot plot yes yes and and also almost reminiscent of um like a violin plot but yeah this is really nice work so i'm curious did you see any insights from the data in here that surprised you well that's the main insight that i put because i i read that before the 90s there was a like a really disproportionate amount of a cultural and natural heritage sites in europe and there was less of a presence in latin america africa and other parts of the world but but you can't really see see that with these visualizations you know and it was surprising maybe it's because of this visualization doesn't show it but but i didn't really see that that a temp temporal trend with this visualization but but indeed europe has like the the most every touch size sites declare by unesco so that's the main insight you know i see i want to try i guess the other thing i thought that i really loved about this plot just from an artistic standpoint was that how it showed the world map oh yeah indirectly yes yes indeed in the readme section i i said that it's really a map but but i like i don't i haven't learned yet how to make it but but because i use latitude and longitude it really it's it resembles the the geographical points yep totally yeah i i can talk a little bit about about how to actually make it a map but first i kind of want to try tweaking some of the things that we have available to us to tweak to to show more clearly the things that you're describing um one thing is if we pull the opacity way down that helps to show density in europe see that right yes definitely and then if we do it by continent and date i want to try making the radius more so instead of a radius of five let's say a radius of 20. oh see ah this is this is one thing where like the next version of his hub i want to be able to tweak the radius but have it remember which things i selected you know what i mean now maybe that's a little too big let's say 15 but then i want to bring down the opacity even more like .05 now we can see a little more clearly how dis disproportionate the density is in europe and if that's the thing you want to highlight it's it's currently confounded with the colors it's hard to tell based on the colors so just to tease out that one thing if i just make them all black oh whoops that should be date continent now you can see it more clearly see yes definitely right man i'm it's impressive how it gets almost completely black it's a heritage x-ray is there a way you could also filter on the counts and then switch up the color once it hits a threshold so that it pops so you could have a red yeah that's a great idea to do that you yeah and hey if you wanted to show that europe has more like if that's the message with this probably the that's that's the thing to do is to aggregate it by binning it by the years and then maybe applying some smoothing even and then you would have an aggregated view where you could apply a threshold of say if it's more than 100 per year make it red or something so it really pops yeah that could totally work and to do the binning you could leverage d3 histogram i think it might have been renamed to d3 bin or is it banned no it's not banned it's ah it's been this is the one so this this example is a normal distribution of like a thousand points oh sorry i lost it and then what it's doing is it's it's calculating the number of points that fall into each bin each bucket and in this case each bin is like 0.5 or 0.05 or here's 0.4.5 so 0.05 is the the width of the buckets but you could bin by the years and so yeah that's that's one thing i would suggest to try is binning by year and another thing that now that i i'm looking at the other visualization i i think that that it it doesn't reflect the message uh so clearly uh because it i i mean the the main messages is that for example asia that's a continent with a a bigger population than europe has significantly lower heritage sites so their culture is not being like highlighted by unesco as much as europe and and because the population for example it's not being considered in this beast you don't really see that disproportionate a reality you know yes this is so maybe i i i should i should i should have done that data a transformation before to to highlight uh that disparity but those are the kind of things that that i'm thinking now when when i hear about you guys yeah taking the population into account would be quite interesting as well why africa was doing much better in the 60s compared to later years that's a great question i don't know but that's a great question so 1980 there's a lot more heritage sites defined in the 80s and by the way this this number formatting is not right that's something we could fix see in the um see why type what is y type for the so i'm i'm looking at the problem of the number formatting and i'm thinking to myself those should actually be just represented as years without the comma right and this actually is i'm glad you did this because it highlights the fact that we need another type which is which is right i just put it quantitative like date as quantitative not as date exactly oh i'm so happy that that this happened yeah so now we can actually do that next step which is the the complete the completion of this generic scatter plot make it handle quantitative categorical and time or dates what is the type of that i'll just call it time and if it's time we need to have a time format which is how we parse it zan armstrong has this really great time formatting example so the specifier for the time parsing would be if it's just year it would be this one percent y and i'm pretty sure that's what it is in the data if it's showing up like that and so now let's actually do this work of making it work with time so let me get more space for the code we're looking at just x if x type is categorical then do this otherwise this is where i want to introduce another another case where if x type is time then do their switch and case for uh javascript oh yeah we could do that we could do that yeah as we add more of these it's getting a little cumbersome to use this this ternary operator yeah that could work but i feel like this is pretty close i mean we're pretty close to having it just one type it doesn't make sense to create another logic for this yeah but at this juncture i mean it's a good thought and and what i would do is get it working first with the minimal effort and then after we run prettier on that then we make the call like is this ugly enough to merit a refactoring where we use the case switch and then we would we could write it with the k switch and see how it looks and that might turn out to be more more code more complicated so yeah it's a good thought it's a good thought but let's try to get this to work so it would be exactly the same as scale linear except that it would be scale time which we need to import from d3 and now that i think about it we may not need to specify the time formatter if the data is already parsed into dates which i'm not sure if it is let's see where's the data loaded where is the data await oh pars row parser where's that here it is yeah yeah yeah so this is where we can say instead of just parsing the string into a number like this we can use time parse or yeah we need to come up with a parse date function that we can pass in that string and the way we can use d3 time format or no i'm sorry time parse and then we can use that percent y to parse those into dates and we need to import time parse from d3 and let me just see if it's working by logging these out okay they appear to be dates that's good and yeah i think i implemented all the all the logic let's see if it works it does see that awesome this is great yeah this so now we have a truly generic scatter plot that can handle dates as well but we're not quite done yet because um the code is kind of a mess i'm going to run prettier on it yeah i mean it's okay but it is a little cumbersome with with two levels of this um you were asking about the switch statement let me see what time it is oh it's noon yeah let's try the switch statement i always like to look at mdn for examples this is what the switch statement looks like in javascript so let me copy this and try it out okay so if we use a switch statement we're going to have to use let so i'll comment this out for now and let's just see how this plays out if we do use the switch statement let x and then we are switching on x type and if the case is categorical then we say x equals this one here and then if x type is time then we use this one here x equals that break we need to put these break statements otherwise it continues down to the next one and then finally if it's quantitative uh which we're not even explicitly stating here we're assuming that if it's not categorical and if it's not time it's going to be quantitative i think that's fine yeah yeah we could so we can use the default here okay yeah and then to the last case is this one x equals scale linear and i'll try prettier on this this is what we get and let's see if it still works oh there's something [Music] we didn't we didn't assign it back to the x-axis we didn't assign the new x back to the i think we also need to assign that range which we did oh i missed the range i missed the range ah that's what it is good catch so yeah the way that this works is the return value from this expression is you know it's the value of x and then we say dot range so what we can do is just say x dot range like this okay that works yeah great and so now it's up to us to decide which version is more aesthetically pleasing yeah in this case maybe the if and else makes sense but maybe if we increase the number of of options then switch would be better i i guess i don't know yeah i i like the case i i was wondering just from uh i don't know this style um works in javascript but could when type is passed in could that automatically call a function that would render that logic for the x assignment oh yeah known other line other languages where you just so so that you don't have anything there and that each of those would be a function in itself oh yeah i think i think it may be complicated by the fact we have different types of domains depending on those different scales and actually i like the idea of abstracting it out into a function that way we could call the same function for x and y and we can we don't need to put x and y in our in our stuff so we can just have it a function of type and data and value which is going to be the accessor and in this case we can just move this into the function and then instead of instead of x we can call it scale and then we can switch on type and then instead of x value we can use value all these places oh type is not a reserved word here i don't think it is no in javascript i don't believe i don't believe type is a reserved keyword okay and then we can return it at the end and then all we have to do is say x equals compute scale x type data and x value and that still seems to work and then once we've done that we can use it for for y as well so we actually get rid of a bunch of code which is great but the question remains when we implement that function should we use switch or this other thing i mean it doesn't really matter but this is the process that you that you go through and this is what i wanted to also convey in this in this course is like what is the process of writing code you have to make so many decisions evaluate things based on efficiency but also you know aesthetics and you could do the same thing with if else if you know you could go on and on trying different ways and i actually do that when i write code i spend time evaluating all possible ways of doing one thing and then getting them all to work and then looking at the code from a number of angles you know how easy is it to read if i give it to somebody else in the future how easy is it going to be be able to be understood by someone else and also how efficient is it does it create additional new objects that you don't need to does it need to be optimized anyway these are all considerations um yeah so in your switch scale is assigned once yet you still have to declare it as let because it's going to go past one of these cases only and it's going to be assigned once but you still have to declare it as let not const i believe so yes if you have the um well actually let's do some experiments with that if we don't declare it there and we declare it here i'm not sure if that would work i'm not sure what the scoping rules are for for the switch statement but it says it gives us an error that says the identifier has been already declared in the same scope so this approach would not work i see and thank you if you if you use const here that's also not going to work whoops that's also not going to work because well you need to assign a const uh when it's declared but here's here's another approach that could work if you don't define any variables you could just return them like this actually this this simplifies the code quite a bit then we don't need the breaks because when we return it's implicitly breaking out of the whole function however we need to pull out the setting of the range to be outside this function which is again duplicated logic down here we'd have to do it twice so that's sort of a dead end i would rather not do it like that ah so let's see is it still working there seems to be some problem oh i set the range or what happened sorry somehow it got messed up that's odd it was working a second ago is it because we missed the brakes again no yes the brakes are there is it because like the range takes this width thing like but for my scale you would need like margin button yeah that's it oh good catch good catch so in that case maybe we do want to use the return approach and then set the range separately that's what it is that's exactly what it is so the range for the y scale is going to be well let me just see what it was in the one that i forked it from i i accidentally assumed that the range would be the same across each but it's not that's the right range yeah that's right and then now we can just use return but let me keep this around as a reference so this is option three this is option two and i was just thinking to myself if we're going to use a return we may as well just use if statements which might be even more clear to read if type equals categorical then return this kind of a scale and since we return it we don't need to use elf we know we don't need to use else we could just have another if so if it's time then we can return this one and then if it's nothing else then we can fall through to the default of the linear scale so this also works as an alternate way of doing it so yeah it's up to you it's a stylistic choice um i personally kind of like this just because it's only a couple lines one two three four five six however it could be cryptic for others to read if you hand it off to somebody else so maybe maybe this is the best choice or maybe this is good i don't know it's it it's a it's a very subjective choice but yeah this this has been fun really nice work and i like how how all of these i mean this visualization as well as the one that kostov worked on it highlights social inequality issues which i think is a very important topic area to address with data visualization in particular because it really makes clear things that are in the data they're clear in the data if you look at the data in the right way and so yeah i think this is a valid point like why is why are there so many world heritage sites in europe does your is europe really the like center of civilization or is it just you know is this unesco neglecting you know other countries out of some kind of i don't know racist underpinnings i don't have no idea i have no idea about it but but just to start investing these investigating these angles is it's great it's really interesting seeing how removing colors have brought this much clearer right because color itself has a brightness value to it it's called in there's hue saturation and luminance in colors and luminance is the luminance means how how much between white and black it is but if you have hue um it confounds the the brightness i mean yes and i think it's full circle that this is get it right in black and white right and we and we turn the the visualizations into black and white exactly finally exactly yep yeah i'm happy it ended up in black and white turns out black and white is clear it's more clear and it's the same with 3d by the way if you see 3d pie charts 3d scatter plots it's it's the same kind of thing as adding color where you just make it like more flashy but it doesn't really add any value most of the time so yeah as a next step for this i would suggest trying to do the binning and the smoothing and i wanted to show you all this thing that i built fairly recently that that does exactly that it's a stream graph of d3 contributions over time and what it what i did is i took um d commits commit data from git from github on all the various d3 packages and i i've been to them by i think weak and then i applied smoothing and i wanted to show you the effect of of changing the smoothing parameter see if there's no smoothing it looks something like this this is just the raw aggregated values per week and i think if you were to aggregate the data that you have per year you would get something kind of similar to this but with you know with a different layout and you can apply smoothing though to get a more broad picture of of generally when things increased or decreased it's a smoothed out view of it and for this particular analysis the smoothed out view was much more useful than the detailed view you can see clearly okay d3 was developed monolithically from 2011 to 2014 and then it was split into a bunch of packages and then some new packages were created after that the the other thing is it gave you an opportunity to annotate what you just couldn't exactly exactly there's no room for the labels in the version that's not smoothed exactly yeah yeah and even if you hovered over you wouldn't get the insight yeah it's tricky to to hover over each and every one to try to figure out what it is yeah so i forgot what it was originally 15 maybe that's cool so yeah this this one was a lot of fun to make um i had hoped to continue this series and get to making something like this but uh you know in the future i'll do it in the future all right well i think i'm gonna wrap up but um let me see yeah i'm going to wrap up thank you all for joining me for this this ongoing saga of uh get it right in black and white with viz hub as our as our tool and uh yeah i'll see you in the future sometime and yeah feel free to reach out to me if you want to get involved with upcoming versions of his hub maybe be a beta tester and just and let me know if you have any feedback on viz hub in general or the way i'm doing the courses ways that things could be improved um what you've gotten out of it what things that have been frustrating i i want to hear it all um all right so thank you all fantastic thank you so much yeah my pleasure thank you queen thank you i'll be in touch all right great and if you want to support me in the meantime sign up for this measly four dollars a month and it'll go a long way yep done all right thanks everyone thank you ryan take care thank you bye-bye bye bye

Channel: Curran Kelleher

Views: 589

Rating: 5 out of 5

Keywords:

Id: e9A_ukC8YXo

Length: 77min 0sec (4620 seconds)

Published: Sat Jun 26 2021