Tutorial 184: CSV-Based Graphs

Joe Clay | Jul 12, 2019

This week, we're exploring using a CSV file to generate graphs in After Effects. Building a CSV allows for a lot of interesting things, one of which is the ability to use data to drive animation. In our case, a cool side effect of using a CSV is that you can change the data outside of After Effects and it can automatically change your animation.

Data driven animation also makes it really easy to version things. Basically, if you can put something into a spreadsheet, you can use it in After Effects. Graphs and data aren't the only things you can use CSVs for. You can even use them to offer different translations for a script so you can switch your project over to output another language with minimal effort. Perhaps we'll take a look at that exact use case in the future.

If you need any additional information on how to use CSVs in After Effects, check out Sergei's excellent introductory lesson over at Ukramedia—Tip 071: How to Create & Use a CSV File in After Effects.

And as always, make sure to experiment.

Expression Code

Before adding these expressions, be sure to add three sliders to a layer named Controller. One should be named Start Row, one should be End Row, and the final should be Tangent Radius

This generates the months from a CSV file that has dates in the format YYYY-MM. Apply this to a text layer's Source Text property.

start = thisComp.layer("Controller").effect("Start Row")("Slider");
end = thisComp.layer("Controller").effect("End Row")("Slider");
str = '';
options = {
    month: 'short',
    year: '2-digit'
};

for(i = start; i < end; i++) {
    d = new Date(footage("WBsubs.csv").dataValue([0,i]) + '-1');
    str += d.toLocaleDateString('en-US', options) + "\t\t";
}
str;

This generates the line graph itself. Apply it to a path inside of a shape layer.

start = thisComp.layer("Controller").effect("Start Row")("Slider");
end = thisComp.layer("Controller").effect("End Row")("Slider");
tanR = thisComp.layer("Controller").effect("Tangent Radius")("Slider");
x = 296 - 960;
y = 766 - 540;
pts = new Array();
inTan = new Array();
outTan = new Array();

for(i = start; i < end; i++) {
    ptX = x + ((i-start) * 147.7);
    ptY = y - (linear(footage("WBsubs.csv").dataValue([1,i]), 0, 3000, 0, 452));
    pts.push([ptX,ptY]);
    inTan.push([-tanR, 0]);
    outTan.push([tanR, 0]);
}
createPath(pts,inTan,outTan,false);

Grab the Project Files

The best way to get our project files is to become a patron on Patreon. For $5 a month, you get access to all of the tutorial project files we've made available as well as other monthly projects, rigs, R&D, elements, early product previews, and BTS content not available anywhere else! You can also purchase just this project file on our Gumroad Store if you would rather do that.

Get access to all of our project files on Patreon or Get this single project file on Gumroad

Workbench tools are used by designers at hundreds of amazing companies