AI VIETNAM
Warm-up Course
Dynamic Animation with PPT Using
Python Plotly
Vinh Dinh Nguyen- PhD in Computer Science
1
AI VIETNAM
Warm-up Course
Step 1: Draw Chart Using Plotly
Iris Dataset
Result
Code
Create an animated bubble chart and save it as an HTML file
2
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
Step 2: Upload HTML file to GitHub
[Link] your .html figure to a server like GitHub to get a sharing link. Note that OneDrive, Google Drive, and Dropbox no longer support
rendering .html files.
[Link] at [Link]
[Link] on "Repositories" and then the "New" icon to create a new public repository (note that this is visible to all, and this method won't work
with private repositories).
[Link] your repository, go to the "Code" tab and select "Add file" to upload your figure(s).
[Link] uploaded, click on the file and then select "Raw" to view the source code.
[Link] the URL from [Link] to [Link] and hit enter. And just like that, your HTML file is viewable!
3
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
Step 2: Upload HTML file to Github
[Link] your .html figure to a server like GitHub to get a sharing link. Note that OneDrive, Google Drive, and Dropbox no longer support
rendering .html files.
[Link] at [Link]
[Link] on "Repositories" and then the "New" icon to create a new public repository (note that this is visible to all, and this method won't work
with private repositories).
[Link] your repository, go to the "Code" tab and select "Add file" to upload your figure(s).
[Link] uploaded, click on the file and then select "Raw" to view the source code.
[Link] the URL from [Link] to [Link] and hit enter. And just like that, your HTML file is viewable!
4
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
Step 3: Insert the Figure into PowerPoint
Open PowerPoint, click on "Insert," select "Add-in," then "Get Add-ins," and install the free "Web Viewer" add-in. Note that you may need
admin permission for a uni-licensed PowerPoint.
5
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
Step 3: Insert the Figure into PowerPoint
Once installed, go to "Insert," "My Add-in," and select "Web Viewer."
6
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
Step 3: Insert the Figure into PowerPoint
[Link] PowerPoint, select the slide with the "Web Viewer" add-in and enter the link to your figure in the https:// box (remove the https://
prefix).
[Link] on the "Preview" button at the bottom right, and your animated figure should display.
7
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
Step 3: Insert the Figure into PowerPoint
[Link] PowerPoint, select the slide with the "Web Viewer" add-in and enter the link to your figure in the https:// box (remove the https://
prefix).
[Link] on the "Preview" button at the bottom right, and your animated figure should display.
8
Vinh Dinh Nguyen- PhD in Computer Science
AI VIETNAM
Warm-up Course
9
Vinh Dinh Nguyen- PhD in Computer Science