Reading Time: 4 minutes

Summary

A beginner-friendly toolkit for creating visual art from personal data.
This toolkit guides learners to transform simple numerical data—such as daily mood scores, steps, or weather—into visually expressive artworks using p5.js. Students first collect and plan their dataset, then map values to visual features like size, color, and position. They create a basic animated artwork, experiment with color and motion, and finally reflect on the story or patterns their data conveys. Optional extensions include connecting data points, adding sliders for interaction, or visualizing multiple datasets. This step-by-step workflow encourages creativity, critical thinking, and an understanding of data as a medium for personal expression.

Data Art Classroom Toolkit

Data is everywhere—our emotions, daily routines, habits, environment, and choices all involve data. In this toolkit, you will learn how to transform simple numbers from your life into visually expressive artworks using p5.js. No prior coding experience is required—you only need curiosity and some personal data.

奇幻、女孩、表情符号。免费使用。

First, here are the key things you need to know.

Focus

Use p5.js to map everyday numerical data (e.g., mood scores, daily steps, weather temperature) into shapes, colors, motion, and composition — creating your own data art.

Learning Objectives

By completing this toolkit, you will be able to:

Understand how data can function as creative material.

Convert numerical values into visual elements (size, color, position, movement).

Use p5.js to create a simple animated data artwork.

Experiment with color mapping and subtle animation effects.

Reflect on the stories, patterns, or emotions your data expresses.

SYG_Anime

Open Learning Resource

pp5.js Web Editor（free online coding）
Open licenses（CC0 / CC BY）
Introductory p5.js tutorials and visualization examples

Okay, let’s begin using the toolkit!

When modifying numbers and colors, imagine each data point as a tiny story from your life.

What does size or position communicate?

How do different color choices change mood or rhythm?

Even if it looks chaotic at first, pay attention to how your data forms a visual pattern.

Look for patterns: peaks, repetition, or surprises.

shape

Step-by-step Guide

Step 1 — Collect Your Data (3 minutes)

Decide what you want to express (mood, daily time use, steps, key indicators).

Choose 7 data points (short, clear, and personally relevant).

For example: 7 mood scores [5,4,3,4,5,4,6]
or weekly steps [3000,7000,4500,9000,10000,4200,8000].

Format the data into an array for coding, or sketch it on paper.
Short and meaningful datasets can be quickly mapped to visualization elements and instantly show results.

Step 2 — Get the Template (3 minutes)

Visit the GitHub repository:
https://github.com/wananyoram-a11y/data-art-toolkit

Paste the code into the p5.js Web Editor.

GitHub repository

https://editor.p5js.org/

Step 3 — Replace the Data (1 minute)

Copy the base version code into the editor.
This is the simplest version; you can see that it consists of simple circles, and all data is represented using circles.

Modify the array in the data code with your own numbers.

Example:

This template adds subtle random dynamic effects to each data point.
Observe how the values change and generate a lively image.

change data

Step 4 — Add Labels (2 minutes)

Modify the title or description inside thetext()。

change the text

Step 5 — Build and Iterate (5 minutes)

After completing the basic code modifications and creating your foundation data artwork, you may want to try deeper modifications.
Below are the parts students can modify.
If you lack programming experience or encounter difficulties, you can choose the modification methods I provided.
Specific details have been posted in my GitHub repository along with the base version.

data array – replace with personal data (e.g., steps, temperature, mood, screen time)
fill() – adjust color mapping or use random colors
ellipse() – change to rect(), triangle(), etc.
Title – update to your own theme
Footer description – explain your data