CSV Data Driven with Ease Ease

[Editor5FCF]

Hello.

I have a CSV in AE that has 5 columns, each with 11 rows of data written as a percentage.

I have 5 shape layers (bar graphs) in my comp.

Can you please help me create an expression that controls the height (using the y scale %) of my shape layers according to the percentage in the row?

The tricky bit I’m finding is I need it to pause on each row for 1 second, then easy ease into the next row, pause etc…

So when I play it back, the 5 bars are going up and down depending on the percentage in that given year.

It would be good if it was possible to control the duration of the pause, and easy ease transition between each data point.

I started with this, but I’m running into all sorts of errors.

x = 100;
y = footage("Test2.csv").dataValue([0,timeToFrames(time,.5)+1]);
[x,y]

Thank you for any guidence! 

[ShiveringCactus]

Can you post an example of your CSV - it'll be easier than recreating from scratch to test the code out.

[Editor5FCF]

Thank you for replying. I've attached the data csv.

Let me know if you think it's possible.

Thanks again.

[Dan Ebberts · Accepted solution]

Your data file has a problem in that it doesn't have a heading for the first column. Once I fixed that, this seems to work:

myCol = 1;
hold = 1;
numRows = 11;
t = Math.min(Math.floor(time/hold),numRows-1);
tNext = Math.min(t+1,numRows-1);
pct = time%hold;
curDat = parseFloat(footage("Data.csv").dataValue([myCol,t]));
nextDat = parseFloat(footage("Data.csv").dataValue([myCol,tNext]));
y = ease(pct,0,hold,curDat,nextDat);
[value[0],y]

Each shape layer would have different number in the first line (which you might be able to determined from the name of the shape layer), and the second line defines the pause time between values.

[ShiveringCactus]

Oh man, I've been struggling to get this working since @Editor5FCF posted.  All the while thinking there must be a better way and here you come along @Dan Ebberts 

One tip I can add is that if you use a single line (two points) and widen the stroke, then you can use a Trim Paths on the shape layer and add a variation of Dan's expression to the end value.  This keeps the bar at the bottom of the screen, instead of it growing from the middle.

myCol = 1;
hold = 1;
numRows = 11;
t = Math.min(Math.floor(time/hold),numRows-1);
tNext = Math.min(t+1,numRows-1);
pct = time%hold;
curDat = parseFloat(footage("Data1.csv").dataValue([myCol,t]));
nextDat = parseFloat(footage("Data1.csv").dataValue([myCol,tNext]));
y = ease(pct,0,hold,curDat,nextDat);
y*100

[Editor5FCF]

Thank you Dan & ShiveringCactus for replying. 

This is fantastic, and exactly what I was hoping for - although I've notice the hold doesn't pause on the data points, but rather slow the whole animation down?

Is it possible to have...

Hold - which pauses X number of frames on each data point.

Transition - which dictaes how long the transition (the easy ease) takes between two data points?

Thanks again.

[Dan Ebberts]

More like this maybe:

myCol = 1;
hold = .25;
trans = .75;
numRows = 11;
t = Math.min(Math.floor(time/(hold+trans)),numRows-1);
tNext = Math.min(t+1,numRows-1);
pct = time%(hold+trans);
curDat = parseFloat(footage("Data.csv").dataValue([myCol,t]));
nextDat = parseFloat(footage("Data.csv").dataValue([myCol,tNext]));
y = ease(pct,hold,hold+trans,curDat,nextDat);
[value[0],y]

[Editor5FCF]

Thank you Dan. 

That does it - working perfeclty and thank you for replying on a weekend.

Side question, is it possible to control the ease to make it smoother or how it determines the curve? I assume it has to do with the second last line, but I'd be interested to know if a script like 'ease and wizz' can be inserted in there?

[Dan Ebberts]

I think Ease and Wizz works with keyframes, so that wouldn't work, but you could certaily replace ease() with your own custom ease function.