How to make a bar graph in Figma

hi in today's video we're going to make a bar graph in figma using generator and using some uh data CSV data that I downloaded off the internet I'll provide the link in the description to this video This is Country population uh from 1970 to 2022 and so what I'd like to do is to make a bar graph uh for each country well we'll do it for just one country but we'll be able to switch it and also maybe respect the distance considering that here you have steps of 10 uh for so 70 80 90 2 10 and then 15 2022 so the Rhythm breaks I'm going to copy this data and paste it into a text node um resize it I would like to take these columns uh let me just parse the CSV which gives me 15 rows and 235 columns so it's a table then I would like to select from list and I'm going to select row zero and I'm going to say that these are my uh column names and then I will say list so I can see them and here they are uh name Etc so I need from index to index 2 then what I'm going to do is I'm going to add a sublist node because actually I'd like to remove this row that contains uh the column names so this works just like substring and JavaScript uh if the end is not uh specified then it goes to the end of the list and then I just increase the index to start uh to one the start index and so now instead of 235 row uh rows I have 20 34 and so now from this I will select from list uh and I will add a list so I can see what comes out and now index zero is the first country there's no more names uh so China India United Etc so the next thing I need to do is to create for each country I mean for each year so i' I've selected the country now I need to take these years from column 9 to column 2 and plot them each with a rectangle and a text shape so the rectangle represents the value and the text shape is the year so let's do this first of all we are going to make a loop for these years I mean we could do seven years separately in the graph but I think the loop will be tidier so we will let's just start with a shape let's get a rectangle and let's say that it will be 50 wide I'm going to give it a color this is fine for now and to keep things neat I'm going to move it out of the way because it just keeps things less Tangled so this is my value I guess it's going to grow more uh maybe I'll make it like 30 and then the other thing I need is a text shape for the gear so let's say 1,000 is the year so I can't see uh the year because I actually the well because it's right here but also because the height is going down instead of up in computers the Y is inversed so I need to make it uh minus 100 so that it goes up uh then I can at least for now plug this color into the text and just adjust the y a little bit to bring it down here also what I can do is I can can take the width of this text and connect it to the width I mean the width of the rectangle and connect it to the width of the text uh and then if I say align X Center it'll align itself to the center uh the only thing is I think this is too too big uh also I want to make it just regular uh and now it fits but I'm in any case going to change the size to something like 10 uh and maybe make it semi bold there we go and then I can move it up a little bit all right so this is one uh year the next thing I need to do is to Loop this here so let me combine these or I'll group them so now you see that they're part of a group in the object uh and then I will move this group and then I will repeat that some number of times right now it's five times now to move each one of them separately I'm going to use a sequence which I get over here and I plug it into the exposition of the move node uh I increase the add value to change the step that's way too much like this so now I have five years in a row but I need more so let's go back to the data so I need to start uh at nine and end at two for this I can use a range for start I will say nine for end I will say two actually so this should be under here because it's the same stage so to say but after this what I would like is another select from list because now I'm selecting the cell and I will select cells from 9 to two and so I can plug this in here directly uh then the selected cell which is the value I can plug into the text node for the year there we go but I'm selecting something incorrect and then oh that's the population right ah so in this case I actually need to use this uh row with the titles so actually instead of selecting this what I need to select from is from here and so now I have the year it's not the correct year because we haven't connected this to the repeat node there you go so now it goes from this to this but it's not the correct number of times the correct number of times will be 9 min-2 and we can actually be fancy and do this with math so we'll set this operation to minus and we will do 9 - 2 which is 7 and then this will become the result so I plug this into the count so this is getting a little bit uh complicated so what we will do is try to untangle it a little bit this is the loop and this is the range of indices and then this is the count so I'm going to do it like this there we go now this sequence is what's giving the X to each column I'll do that a little bit later first I'd like to set the height of the values which I can do by actually selecting from here now because this is where I take the country and so once I've taken the country then I do another select from list uh and I go to I I use the same range because I'm I need the same uh column just not the title but the value this time here I get a text value so I need to convert that to a number so text to number and once I have that number I can then plug that into the height of the rectangle once again the numbers go down because it's they're positive so at least I need to insert a math node uh so here I actually need to divide uh uh but divide not by minus one but let's say minus 10,000 there we go so this is for some country let's give it a name so we're going to add a another text shape so let's bring this down to the same repeat cuz they're at the same stage then I will give it I guess the same default color for [Music] now uh I will say country uh let me set the x to Center I'm just going to manually set where it is we could calculate it but this will be faster for the tutorial I'm going to set it to bold and just increase the font size whoa so something like this and now I can take the name of the country which comes from index one so I'll just take one of these manually set index x one and plug it into the text China so now if I go to this select node which selects the country I'm actually going to highlight it as let's say orange and I can run through the countries and get the population growth uh for all of them actually because most countries are not China and India I think we need to divide byus 5,000 - 3,000 - 4,000 all right there we go so that's like for most countries and then here we have United States India whoa wow you really get a sense of the difference and China wow all right now the one thing I forgot to do was to try spreading them by uh distance according to year cuz these are not equal jumps so let's do that now to do that we need to first get the years as number here I'm selecting the text for the year so this is where I'm also going to have a convert uh text to number node so I will plug that into here and I will so uh this is where I get the year so actually what I need to do is have a text to number node plug that also into the new node and then use this number uh to position position the text uh now or I mean the whole column so I'm just going to move this over here at this point I think I can remove the sequence uh so but what I need to do is add a math node I will subtract from this value 1,970 and then I will use that as the value so I think this is not going to work well because the value is going to be too small it's just going to be like tens or 20s of pixels yeah um but what we can do is insert another math node here and just multiply that value by something so let me multiply by two three there we go um but they're a little bit too wide so I think it'll make sense to make the columns narrow not 30 but let's say 10 still tooo wide think I'm going to make the columns even narrower for that to make sense there we go but then the year actually you know what that looks kind of cool let that be the year why not so I'm going to move it down to here again yeah that's pretty cool and let's move it down so that the whole year is visible I mean that's not bad at least it's interesting so now if we uh activate both of these together and actually let's just combine them so then we only need to activate this one last node then we have the country as well well now this bold font looks a little strange so I think I'm going to make it medium that's better move it this way a little bit and down and maybe a bit bigger so there's the new stylish bar graph and so if we run through the countries now we should get a better sense of yeah that makes more sense [Music] so I think you will agree that this did not take that much work but the advantage is that if you now need to redo this kind of work at some point all you need to do is just replace the data and you have it running in the free version to keep this safe you just keep the figma file safe uh in the paid version you can save it to a text file now if generator is useful to you you like what I'm doing and you want to support my work the best way to do that is by buying a generator subscription it's monthly uh you can do that by clicking anything with a pro label in the UI of the plugin when it's running thanks for watching

Channel: Brainshift

Views: 263

Keywords: Figma, Generator, nodes, lists, tables, loops, figma tutorial, figma design, node based, product:figma_design, bar graph

Id: XmvL7BjGv2M

Length: 15min 38sec (938 seconds)

Published: Wed Feb 28 2024