Create a line graph from a CSV file in After Effects
Фильм және анимация
Use a CSV data file to create a line graph in After Effects. I'm continuing my series of data-driven animation tutorials with something that pretty much every animator has been asked to do before... a line graph. But this time, from DATA! In this tutorial I'll show you how to create a line based on a pre-made data set using expressions, specifically a "for loop".
The final graphs shown at the end of this video can be seen as part of these stories from The Washington Post:
1) www.washingtonpost.com/world/...
2) www.washingtonpost.com/video/...
Пікірлер: 47
my god this is a crazy amount of work for a simple line chart
This is by far the best tutorial I've come across for working with CSV data. There are some minor changes I would make to certain parts of the expression to make it more flexible to work with within a larger comp (mostly to allow room for additional elements of the graph that may need to be in the same comp), but those are easy enough to tweak, and I'm really glad that you kept it simple. Great work!
@maxpartain
Ай бұрын
Would you be willing to share those changes you use? That would help me in this.
This is brilliant! It would be great if you did a course, or series of videos, on expressions. You're really good!
Worked like a dream, thank you. You have a great teaching style, straight to it so thanks for that.
Amazing tutorial, had to do a little digging around the edges but I certainly wouldn't have had a graph like this without watching your video.... Now to annotate :)
Tried really hard to follow this. Appreciate you posting but there were several moments you used the pick whip to attach to things off screen. This made it much harder to follow than necessary (since this is difficult video to follow for someone with little programming experience). On the positive side, your tone is really clear and easy to listen to.
@nathanthomasvideography
2 жыл бұрын
Did you figure out what she pick whipped? I'm stuck
Clear and insightful. Even I can nail it (at second try). Thank you very much, life saver. Go Girl! 👏
WOW! That was AMAZING!
Great tutorial! Help a lot! Appreciate!
Great Stuff.
thank you so much
Thank you so much, super helpful video! Will you be able to make one in the future about how you created the x-axis and y-axis to expand out the graph?
this is absolut gorgeous, can you indicate some youtube video about the "for loop"? Or mayby you might do this teaching video about that!
This rules, thank you.
Thanks for the great tutorial, what is the trick for including negative values amongst the positive ones from the CSV? Currently they just flat line at zero.
This is amazing and so helpful, but wondering if there is a way to add an object/shape (circle) to follow the path as it grows?
@godaron104
2 жыл бұрын
Thank you for your question! It was such a good one I made another video to answer it... kzread.info/dash/bejne/mqaW0cqqf5qoetY.html
This was so good!! are you still making tutorials??
@godaron104
2 жыл бұрын
Whenever I can! Full time job and life stuff keeps me from doing this kind of thing as much as I'd like but your encouragement is super appreciated thank you!
@Fads
2 жыл бұрын
@@godaron104 totally relatable... let me know if there's anywhere other than KZread where I can see your work too!
This is a great, no nonsense tutorial! Thanks for sharing. Is there any script I can add to change the minimum starting Y value? For example if my data ranges from 9,000 - 10,000 the line will appear relatively straight if the starting point is 0. In that scenario I would want the Y axis to range from 9k - 10k to pronounce the variances between data points. Any hints would be greatly appreciated.
@godaron104
2 жыл бұрын
First duplicate the slider and name it minYvalue. Add a variable to your for() statement for that minYvalue and replace the 0 in the statement with your variable. Like this: for(var i = 0; i data = thisComp.layer("test csv.csv"); dailyCases = data.footage("test csv.csv").dataValue([1,i]); minYvalue = effect("minYvalue")("Slider"); lineHeight = linear(dailyCases, minYvalue, maxYvalue, content("Shape 1").content("Stroke 1").strokeWidth / 2, thisComp.height) * -1; arrayOfPoints[i] = [startingPointX, lineHeight]; startingPointX += spacingForPoints; } Set that slider at whatever minimum value you want. In your example, set the min value at 9000 and max at 10000
Hi ! Thx so much for this tutorial, I have a some struggle AE is lagging so much when consulting the CSV, any idea to avoid that ? I am on M1 Max
Thanks for doing this tutorial. Any chance you could post the expression?
@felix9717
2 жыл бұрын
Here's mine. You've got to change "yourdocument.csv" to whatever your CSV file is called and check whether you're adressing the right column with "dataValue". Hope this helps. var NumberOfPoints = thisComp.layer("Controller").effect("Number of Points")("Slider"); var MaxYValue = thisComp.layer("Controller").effect("Max Y Value")("Slider"); var StartingPointX = 0; var SpacingForPoints = thisComp.width / (NumberOfPoints-1); var ArrayOfPoints = []; for(var i = 0; i var NewInfections = thisComp.layer("yourdocument.csv").footage("yourdocument.csv").dataValue([1,i]); var LineHeight = linear(NewInfections, 0, MaxYValue, 0, thisComp.height) * -1; var DataArray = [StartingPointX, LineHeight] ArrayOfPoints.push(DataArray); StartingPointX += SpacingForPoints } createPath(ArrayOfPoints, [], [], false)
Thank you so much! This was really helpful. I do have a question though, I have some negative values in my data and it's not showing up, is there a way I can fix that?
@RelearnMath
3 жыл бұрын
Yes, the linear() function takes in 5 arguments, argument 2 is the minimum value, so linear(1,2,3,4,5) if you modify argument 2 to the lowest negative value you expect it will plot it.
Thanks for this awesome tutorial! Everything looks right with no errors, the only issue is it draws the line path, but there's no stroke! I have 870 data point BTW. Thoughts?
@bear6827
Жыл бұрын
Hey, struggled there too. Make sure your the Stroke layer is below your Path layer
@will.mcgregor
Жыл бұрын
@@bear6827 Had the same issue but your suggestion worked! Thank you!
How to create line chart using updating csv
Is there any way to debug this? Can I output variable values real time?
@godaron104
2 жыл бұрын
That's a very interesting question and gives me some food for thought! I'll try to play around with this and see if I come up with something... if you see a tutorial that already does this give a shout. Also sorry for the late reply, life intervenes.
@RelearnMath
2 жыл бұрын
@@godaron104 no problem! I understand the difficulties of having a full time career and part time KZread career. Thanks!
Thanks for sharing. I followed the steps, but for some reason the path is generated (purple line is showing), but the stroke does not want to show up. I added the stroke first and then I added the path. Do i need to connect the stroke with the path somehow?
@Shiffo
Жыл бұрын
Figured it out! I needed to place my Stroke below my Path layer. My Path was below the Stroke layer.
@jlagerholm
9 ай бұрын
@@Shiffo had this problem too. That fixed it. Thanks.
@MotivationNation-cp4rv
9 ай бұрын
you are a god send! I was having this problem for so long
@maxpartain
Ай бұрын
@@MotivationNation-cp4rv Same. Fantastic solve.
Can you post the files please
SyntaxError: Unexpected token '
@Shiffo
Жыл бұрын
Think you forgot the semicolon ";".
@johnnygibbs8181
Жыл бұрын
@@Shiffo Hero.