Data-Driven Expressions for After Effects 2019
Data-driven expressions are a powerful way to easily make infographics templates from spreadsheets in After Effects and export for use in Premiere Pro! I recently worked with Adobe Stock to create data-driven templates available to download *for free* here!
In a previous post I cover some of the basics for creating a .csv file and how to use it in After Effects 2019. Today I’d like to share expressions for working with data; some of them utilize the new Javascript expressions engine in After Effects 2019. Hopefully these will spark your imagination to see what’s possible with data-driven animations!
Click the button below to download the sample After Effects CC 2019 file and sample .csv file-
DOWNLOAD
*All expressions are applied to the Source Text property on a Text layer*
1. Sum Total of Numbers Data in a Column
This expression gives you the sum total of all numbers entered in a column
View the code on Gist.
2. Display All Column Data with Line Break
View the code on Gist.
3. Display All Column Data with Spaces
View the code on Gist.
4. Color Hex Expression
View the code on Gist.
5. Display Data Based on Row Number
View the code on Gist.
6. Display Last Value in a Column
View the code on Gist.
7. Line Break Control
It’s not possible to format text in the spreadsheet however the expression below will give you control over the number of characters to display before a line break without breaking up words. I modified this wonderful expression below from this blog post- http://www.arturobracero.com/2018/05/05/how-to-import-json-files-in-after-effects-cc-2018-to-display-twitter-data/
View the code on Gist.
8. Display Column Data Based on Time
The expression below is great for showing how data changes over time! I modified this expression from this video tutorial- https://www.youtube.com/watch?v=NnSvnK4qNA8 and added a slider control to easily change the time increments for each data set.
View the code on Gist.
9. Display Largest or Smallest Number in a Column
Display largest number in a column
View the code on Gist.
Display smallest number in a column
View the code on Gist.
10. Display the Number of Times an Item appears in a Column (text string)
For example, if the word ‘cars’ appears 10 times in a spreadsheet column the expression will return the number 10. First, it’s important to create a text layer with the Item (cars) for the expression.
View the code on Gist.
11. Sort Numbers Ascending and Descending in a Column
Sort Descending:
View the code on Gist.
Sort Ascending:
View the code on Gist.
12. Sort Number Data Descending with Corresponding Row Text Data
Ok… this one is weird but stay with me here…
This expression looks at a column of numbers, sorts them from largest to smallest, then maps the index or order in which they appear. The ‘map’ part then points to a different column, in this example ‘Text Data’ and sorts the names based on the index of the first number sort.
For example, if you have a spreadsheet with scores and team names this expression will reorder the scores from largest to smallest then reorder and list the corresponding team names as they appear in the spreadsheet- sorted from largest to smallest score.
View the code on Gist.
3 Responses
Marissa
Hi Matthew,
I hope you come across this comment as I can’t directly reply to comments in Shopify :(
change the second line of that code to this:
for(i=0;i<=thisComp.layer(“Data-Driven-Sample.csv”)(“Data”)(“Number of Rows”)-1;i++)
thanks!
Marissa
Matthew
Hi Marissa, great find! This is exactly what I was looking for…in fact I started out creating a project based on the video you linked to in #8, but figured there had to be a way to do it with the original CSV files which would be simpler for what I’m doing.
Was kind of curious though, I’m getting an error trying to implement it even with your CSV file and the original code within my project. Switching to my data and changing names was giving me an error so switched to using your CSV file and the original code without any luck either in spite of the fact that the same thing works in the example project.
Error: Error: property or method named ‘Number Data 10’ in Class ’ Group’ is missing or does not exist. It may have been renamed, moved, deleted, or the name may have been mistyped
Kind of wondering if I need to have something named group somewhere now that I’m thinking about it but not sure. Pretty good with python and JavaScript and see what’s happening here but never played with aftereffects much before now. Premiere didn’t support anything like this.
Mike Greenberg
Wow, really useful. I found it while looking for a way to easily populate lower thirds (still struggling to bind the spreadsheet data and populate different comps, it only seems to load the first line) but will put these to use!
Leave a comment
Comments will be approved before showing up.
Also in FluxVFX
Data-Driven Motion Graphics Templates in After Effects 2019
Creating infographic animations is easier than ever with Adobe’s new csv spreadsheet enabled data-driven motion graphics templates feature in After Effects 2019. You can create and update infographics (and really any text-based animation) from a spreadsheet in both After Effects and Premiere Pro 2019. The free data-driven motion graphics templates can be downloaded here and even more are currently in the works!
It was very exciting to get a first look at this feature and learned A TON along the way. Check out this post where I share expressions for working with data that utilizes the new Javascript expressions engine in After Effects 2019. Hopefully these will spark your imagination to see what’s possible with data-driven animations!
Marissa Joyner
Author