CC Fest · Coding Camp Tools Notion Notes CC Fest on GitHub
Session 4 · Data Mapping

Data Mapper

Paste a small dataset and choose what the values control. The same numbers can become height, size, color, opacity, position, rotation, or motion — and each mapping tells a different story.

arrays data visualization map() labels + values visual storytelling
Open it Start with the canvas before the code. Change it Move one control or value at a time. Predict it Name what you expect before you run it. Remix it Turn the pattern toward your own sketch. Teach it Ask what changed and why.
Data Visualization Canvas
The values are stored in arrays, then mapped to a visual property.
items
5
range
3–9
visual
bars
mapping
height

Try this

Show the same data three ways: height, color, and size. Which one makes the pattern easiest to see?

Notice this

The numbers do not explain themselves. Your visual mapping decides what the viewer notices first.

Remix this

Make a data self-portrait using values from your day, week, classroom, neighborhood, or environment.

Starter Code Preview