IMT 561 Final Project

Here is a template to work on your final project.

Your mission is to create an interactive article using P5.js.

Sections

Note that each section in index.html corresponds to a section in the scrolling article. You can add or remove sections as needed.

No visualization

You don't need to have a visualization for every section. Some sections may simply be text.

Narrative

These sections will tell a story. You can use them to explain the visualization, provide context, or share insights.

Be creative

Surprise your readers with interesting interactions, animations, or data visualizations.

Same visualization multiple sections

Some visualizations may be relevant to multiple sections. You can reuse the same visualization across different sections to reinforce key points. Or build on the previous visualization to just add on.

Examples

There is two examples in this code. One is a grid of circles that changes color based on the section index. The other is a scatter plot and bar chart that shows random data points. You can modify or replace these examples with your own visualizations. Make sure you read both source files to understand how they work.

Best of Luck in the Project!

You are now ready to start building your interactive article. Good luck!

Full-text section

Add data-layout="full-text" to a section to hide the visualization and give the text the full width of the screen. Use this for introductions, transitions, or any moment where the data should step aside and the writing takes center stage.

This is a good place for a pull quote, a key finding stated plainly, or a paragraph that needs room to breathe without competing with a chart.

Full-visualization section

Add data-layout="full-viz" to a section to expand the visualization to the full screen width. The text column disappears and the sketch fills the space. Use this for a dramatic reveal, a dense chart that needs every pixel, or a cinematic moment in your story.

About the Authors

Author One

Brief bio or affiliation. Describe your background, research interests, or role in this project.

Author Two

Brief bio or affiliation. Describe your background, research interests, or role in this project.