D3 + React In Depth | React Hooks

[Music] [Music] hello everyone so whenever we talk about data visualization we instantly think of d3.js am i right it is just such a groundbreaking javascript library that made visualizing data possible on a web browser and in fact a lot of the pre-configured charting tools that we see right now are actually built upon the d3 logic if you're just starting out you know try to learn what is data visualization and you want to know how to develop charts and plots i highly recommend that you check out d3 because once you understand the logic behind d3 you can easily understand any other retarding tools out there i guarantee you now from my personal experience looking back now when i first knew about d3 and i first start to study how that works i just it was like reading a puzzle it did not make any sense to me at first and i did not have a computer science background so it was even harder i just wanted to do something graphical with data and so these three kind of came natural to me i had to like spend hours trying to understand every piece of it and when i finally got it i was like i felt sexy and because web development has been modulized than ever i had to throw in some complexity here configure react and d3 to show you guys something more practical and i certainly hope you like this one obviously you don't have to start out using react if you don't know how to do it in fact the logic behind d3 does not get changed much with react in the picture you can just do a basic thing and try to repeat the steps in javascript html css if you prefer less complexity okay now thing has been rambled on for like five minutes straight we better get started no i lied before we get started here is the heads up there are so many details can go into a chart uh the the axes the tooltips the choices and labels but today's focus is going to be on how to work with d3 and react i'm just going to use a very basic d3 line part to help explain it all hopefully first of all make sure that you have your react app running and d3 installed if you don't know how to do that follow the steps on the screen and also check out the description box down below i have all the basic steps listed out there as well then we will need to set up the component structure and define where the chart [Music] goes [Music] [Music] because now this is a functional component we need to render the graph and use effect but before we do that we need to set up the divs and svg first and assign a class or an id to it so that we can select later [Music] okay now we created the hook as well as the html now we need to work on the data and the visualization part of it first of all we fetch the data through an api endpoint i'm using a data set containing all the film permit records in new york city [Music] to make it easier i'm making a subset of the data particularly i'm going to extract all the shooting permits because as you see here there are multiple types of permits but it seems like shooting permit is the most common so let's just you know get those [Music] looking at all the timestamps here i can create a time series out of it so first is to get all the unique dates and only keep the year day and month [Music] loop through the array and count all the entries with the same date [Music] [Music] great we now have all the dates and the number of permits entered on that day let's move on to the graph itself in particular we need to draw the x-axis the y-axis and the line first we set up the margin width and height to make sure the size of all the elements are determined by the size of the div [Music] next we need to call the ref define above here and set up the size for our svg and a pen group where all the other elements fall under [Music] change the background color so i know the svg is there [Music] perfect next is to scale everything by data and for that we need a x scale function and a y scale function here we are essentially asking that i have the data points what are the corresponding positions in pixel so we need to input aka domain the x values in our data set here we have dates and the output aka range is the width of the div that is our x scale function [Music] now call the x axis the same logic applies to the y scale function except that we need to figure out the maximum value in all of our y values and in this case counts [Music] call the y-axis [Music] now the most exciting part or not is lying and for that we need to create a path add the data and add some style as attributes [Music] then draw the line the x values should be the dates and y values are the counts [Music] and of course we hit a bump and that is because the dates are not being correctly formatted so let's call the d3 time parts to reformat the dates and the input should follow the same structure as our data where the dates are linked by hyphens let's parse the date here where we regroup the data oh now we can see the line this yellow really hurts my eyes okay i have to change that much better you see the line is there but not the axes and that is because we need to again adjust the width and height so that they actually show up on the svg not outside of the box and you know sometimes way outside of the box is bad [Music] to add a title or any text you can append text and again you need to define the position as in a pair of x and y values [Music] and of course don't forget to add the text itself okay the position is a little bit off let me try readjust that no it still bugs me i just have to fix this um okay let's see how about a few more pixels oh my god this actually works all right tada and now to summarize first of all you need to know the width height and margin of the svg so that all the elements are positioned relative to them secondly you need to know the range of your data so you can scale everything proportionally number three you need to know which value sets x and which sets y number four each element should be on its own group or shape you need to properly obtain the right element and number five make sure that you properly assign attributes or styles for example sometimes you need to use fill and sometimes you need stroke so there you go this is your g3 chart you can find the link to the code in the description box down below i hope this is going to be helpful for you thumbs up if you like this one or you can support me on patreon as well the link is also in the description box i will see you in the next one bye

Channel: Lively Lab

Views: 6,285

Rating: 4.9157896 out of 5

Keywords:

Id: AhD-oziq53w

Length: 17min 32sec (1052 seconds)

Published: Tue Apr 06 2021