Try an Example
To try an example, select 'Chart Type' and a panel will appear with chart type options. Once you locate the animation icon under the 'FINANCE'column, you can check out an example before adding your own data by clicking the little graph icon that will show what a sample chart looks like after adding data and playing with the style. You'll also see what labels and style attributes were selected for this specific chart, as well as the end result.
You can also use the data featured in this tutorial by clicking on 'Open This Data in Plotly' on the left-hand side. It'll open in your workspace.
Add Your Data to Plotly
Head to Plotly’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.
For this tutorial, we'll use the gapminder dataset which can be found here. Simply, copy the URL from Github. Now, returning to the workspace select 'IMPORT' and then 'By URL'. Here, you just paste the URL from Github.
Create Your Chart
Now that we have the data added to the grid, we can select our chart type. Select GRAPH on the left-hand side, then 'Create'. Click 'Chart Type', then choose 'Animation' in the 'FINANCE' column.
Use the X and Y dropdowns to define X and Y variables for the chart. For this example, select the ‘gdpPerCap’ to display life expectancy data on the x axis and select ‘lifeExp’ to display population data on the Y axis. Next, select a column to animate by. For this example, selecting ‘year’ from the ‘Animate By’ dropdown will create and animation that displays how the relationship between life expectancy and GDP Per Captia has varied over time. To further the visualization, you can size points relative to data and display additional information on hover. For this example, select ‘population’ to size points based off of the population of each country. In addition, select ‘country’ in the ‘Hover Text’ dropdown to display the name of the country for each point on hover.
You may have more than one trace that you want to show in your animation. For example, in this tutorial we have multiple continents that can added. Thus, we want to filter the trace by continent. In order to achieve this we add a filter by selecting ‘Filter’ under ‘Create’ and click the ‘+ Filter’ button
Select ‘continent’ from the dropdown to filter through the continent data
First set up the filter for the ‘Asia’ trace by selecting Asia from the ‘Traces To Filter’ dropdown. Next, make sure that the ‘Operator’ dropdown is set to Matching values and the ‘Include’ option is also selected (these are the default selections), use the dropdown under Include to select ‘Asia’
First set up the filter for the ‘Asia’ trace by selecting Asia from the ‘Traces To Filter’ dropdown
Repeat this procedure (multiple times) from the beginning to set up an additional trace and filter for each continent.
Style a Chart
whilst we haven't in this example, you can style markers by changing their colors. For more, tutorials on styling your charts checkout the Style & Layout section on the main page.
For this dataset, it may be beneficial to apply a logarithmic scale to the x-axis. In the ‘Axes’ style tab, open the ‘Range’ container and select ‘X’ to apply changes to the x axis.
Save and Share
Your chart is now done! Click SAVE on the left-hand side.
After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.