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

Get the project file through our Gumroad Store. This project file contains the setup shown in the tutorial and the CSV with authentic Workbench data from Social Blade. The After Effects project was built in AE CC 2019 and it requires it due to using the newer JavaScript engine.

If you're buying project files, consider becoming a Patron. At the $5/mo. tier, you get access to project files as they come out and some tutorials also come with additional BTS content showing more of the builds.

Get the project on Gumroad

Become a Patron

If you'd like to help support Workbench, check out our Patreon page. Thank you for even considering clicking this link to support what we're doing. We appreciate it. Patrons get all sorts of benefits, from additional files to early product releases depending upon the tier.

Check out our Patreon Today