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

  • @lazzer17
    @lazzer17Ай бұрын

    my god this is a crazy amount of work for a simple line chart

  • @TheTimtastic
    @TheTimtastic2 ай бұрын

    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

    @maxpartain

    Ай бұрын

    Would you be willing to share those changes you use? That would help me in this.

  • @madknac2978
    @madknac29782 жыл бұрын

    This is brilliant! It would be great if you did a course, or series of videos, on expressions. You're really good!

  • @davidjaques5714
    @davidjaques57142 жыл бұрын

    Worked like a dream, thank you. You have a great teaching style, straight to it so thanks for that.

  • @fxto-patronum3202
    @fxto-patronum32023 жыл бұрын

    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 :)

  • @VJ4rawr2
    @VJ4rawr23 жыл бұрын

    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

    @nathanthomasvideography

    2 жыл бұрын

    Did you figure out what she pick whipped? I'm stuck

  • @koldoidigoras
    @koldoidigoras8 ай бұрын

    Clear and insightful. Even I can nail it (at second try). Thank you very much, life saver. Go Girl! 👏

  • @LearningToLiveNow
    @LearningToLiveNow2 жыл бұрын

    WOW! That was AMAZING!

  • @jen11iver53
    @jen11iver533 жыл бұрын

    Great tutorial! Help a lot! Appreciate!

  • @obentophaut8693
    @obentophaut86932 жыл бұрын

    Great Stuff.

  • @musiccreatorYuyakeMonster
    @musiccreatorYuyakeMonster3 жыл бұрын

    thank you so much

  • @crisd_
    @crisd_ Жыл бұрын

    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?

  • @gugaestrada
    @gugaestrada2 жыл бұрын

    this is absolut gorgeous, can you indicate some youtube video about the "for loop"? Or mayby you might do this teaching video about that!

  • @rrrickwallace
    @rrrickwallace6 ай бұрын

    This rules, thank you.

  • @garethrowson
    @garethrowson2 жыл бұрын

    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.

  • @denisevargas6113
    @denisevargas61133 жыл бұрын

    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

    @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

  • @Fads
    @Fads2 жыл бұрын

    This was so good!! are you still making tutorials??

  • @godaron104

    @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

    @Fads

    2 жыл бұрын

    @@godaron104 totally relatable... let me know if there's anywhere other than KZread where I can see your work too!

  • @mindcheck2010
    @mindcheck20102 жыл бұрын

    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

    @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

  • @antonin7985
    @antonin79856 ай бұрын

    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

  • @Grantwalls
    @Grantwalls3 жыл бұрын

    Thanks for doing this tutorial. Any chance you could post the expression?

  • @felix9717

    @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)

  • @marilynmejia2002
    @marilynmejia20023 жыл бұрын

    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

    @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.

  • @MohammedAli-jl8hd
    @MohammedAli-jl8hd2 жыл бұрын

    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

    @bear6827

    Жыл бұрын

    Hey, struggled there too. Make sure your the Stroke layer is below your Path layer

  • @will.mcgregor

    @will.mcgregor

    Жыл бұрын

    @@bear6827 Had the same issue but your suggestion worked! Thank you!

  • @zaheerbeg4810
    @zaheerbeg48102 жыл бұрын

    How to create line chart using updating csv

  • @RelearnMath
    @RelearnMath3 жыл бұрын

    Is there any way to debug this? Can I output variable values real time?

  • @godaron104

    @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

    @RelearnMath

    2 жыл бұрын

    @@godaron104 no problem! I understand the difficulties of having a full time career and part time KZread career. Thanks!

  • @Shiffo
    @Shiffo Жыл бұрын

    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

    @Shiffo

    Жыл бұрын

    Figured it out! I needed to place my Stroke below my Path layer. My Path was below the Stroke layer.

  • @jlagerholm

    @jlagerholm

    9 ай бұрын

    @@Shiffo had this problem too. That fixed it. Thanks.

  • @MotivationNation-cp4rv

    @MotivationNation-cp4rv

    9 ай бұрын

    you are a god send! I was having this problem for so long

  • @maxpartain

    @maxpartain

    Ай бұрын

    @@MotivationNation-cp4rv Same. Fantastic solve.

  • @abdulkreemalsultan134
    @abdulkreemalsultan134 Жыл бұрын

    Can you post the files please

  • @johnnygibbs8181
    @johnnygibbs81812 жыл бұрын

    SyntaxError: Unexpected token '

  • @Shiffo

    @Shiffo

    Жыл бұрын

    Think you forgot the semicolon ";".

  • @johnnygibbs8181

    @johnnygibbs8181

    Жыл бұрын

    @@Shiffo Hero.

Келесі