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!
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.
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 :)
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.
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?
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!
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 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.
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 < numberOfPoints; i++) {
data = thisComp.layer("test csv.csv"); dailyCases = data.footage("test csv.csv").dataValue([1,i]);
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?
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?
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?
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 < NumberOfPoints; 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)
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!
Would you be willing to share those changes you use? That would help me in this.
my god this is a crazy amount of work for a simple line chart
This is brilliant! It would be great if you did a course, or series of videos, on expressions. You're really good!
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.
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! 👏
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 :)
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?
Thank you for your question! It was such a good one I made another video to answer it... ruclips.net/video/hrbohqO7BJs/видео.html
Great tutorial! Help a lot! Appreciate!
WOW! That was AMAZING!
Is there any way to debug this? Can I output variable values real time?
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.
@@godaron104 no problem! I understand the difficulties of having a full time career and part time RUclips career. Thanks!
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
This rules, thank you.
thank you so much
Great Stuff.
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 was so good!! are you still making tutorials??
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!
@@godaron104 totally relatable... let me know if there's anywhere other than RUclips where I can see your work too!
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 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.
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 < numberOfPoints; 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
this is absolut gorgeous, can you indicate some youtube video about the "for loop"? Or mayby you might do this teaching video about that!
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?
Figured it out! I needed to place my Stroke below my Path layer.
My Path was below the Stroke layer.
@@Shiffo had this problem too. That fixed it. Thanks.
you are a god send! I was having this problem for so long
@@MotivationNation-cp4rv Same. Fantastic solve.
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?
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.
How to create line chart using updating csv
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?
Hey, struggled there too. Make sure your the Stroke layer is below your Path layer
@@bear6827 Had the same issue but your suggestion worked! Thank you!
Thanks for doing this tutorial. Any chance you could post the expression?
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 < NumberOfPoints; 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)
Can you post the files please
SyntaxError: Unexpected token '
Think you forgot the semicolon ";".
@@Shiffo Hero.