Table to Path

From its conception, Autograph was designed to be able to graphically represent numerical data. It offers several tools for this purpose, including the Table to PathGenerator.

As its name suggests, this Generator relies on a Table. Before using this Generator, it's recommended to first read the Connect to External Data chapter.

Animating the final render with a PNG in the background

Setting Up the Generator and Connecting to a Table

After downloading [this file], we'll proceed with the following steps:

• Create a new ShapesGenerator
• Add a new Table to PathGenerator using the "+" button to the right of the Path Group.
• Add a StrokeStyle to Path by clicking on the "+" button next to Shapes.
• Import the Trading_Cards.csv file that was just downloaded into the Project Panel.
• Select the Table to PathGenerator in the Selection Overview to display its properties.

The CSV file is a simple two-column table that represents the number of trading cards sold over a 10-year period.

The first Table parameter can be connected to the table visible in the Project Panel in one of two ways:

• Dragging and dropping the table onto the connection slot
• Clicking on the connection slot, which will list all existing tables in the left-hand column

Connecting Columns to Axes

When referring to the Table contents, it may be tempting to:

• Connect the X column to the Year column
• Connect the Y column to the Cards (in Millions) column

If we were to do this in a Full HD(1920x1080) composition, no Path would be visible.

By deactivating format clipping, helps to understand why:

The first path point will be based on coordinates defined by the two columns (2014.0,12.0) and so on for the others. This generated curve is outside of the composition.

You can add Transform Modifiers to Path to bring it back inside, but there is a simpler method.

Automatically Drawing a Curve Based on Only One Column

Mapping both X Column and Y Column to the table columns is generally used to draw a curve generated by an external tool and produces a CSV file, such as the shortest path between two points on a map.

In the Trading Cards example, the column representing years is not very useful since the difference between each value is one unit each time.

So, we can only use the second column, Cards (in Millions), and set Autograph to place these points defining the curve with consistant spacing.

To do this, simply switch X Column to Use Defaults Axis mode.

The following parameters are used to size the curve according to different needs:

• Default Axis Start Value: will define the coordinate of the first point on the Default Axis (here, used by the X Column parameter)
• Default Axis End Value: will do the same for the last point drawn

Once the curve width has been defined, you can use the other parameters:

• X Offset and _Y Offset_: will offset the whole Path
• X Multipler and Y Multplier: will multiply point coordinates

Tangent Smoothing Per Point

There is one last parameter that defines how the tangents of each point will be generated. As soon as a table is connected to the Generator, the Mode Column parameter will default to Default Value (LineTo) mode.

This mode means that a straight line will be drawn between each point. But you can also specify a column, in which each cell will contain a precise keyword defining the smoothing at each point. If you click on this parameter, you'll see that this mode is followed by all of the table column names.

Here's the list of keywords each cell can contain:

• LineTo: draws a straight segment between each point, considering the whole as a single Path.
• MoveTo: also draws straight segments, but creates a new Path for each point; useful when the Start/End Mode parameter of the Stroke style is set to Separated Paths to draw all sub-paths independently.
• ControlPointTo: creates a unique Bézier Path using the previous and subsequent points (when they exist) to smooth the curve.