Code an interactive visualization
Use block coding (like Scratch) to create an interactive visualization that responds to clicks or sliders, exploring patterns and telling a simple data story.
Step-by-step guide to code an interactive visualization with block coding
How to Make AI-Powered Interactive Dashboard | Bricks Tutorial
Step 1
Open your block-coding platform and start a brand new project so you have a fresh workspace.
Step 2
Add or draw a simple rectangle sprite and rename it Bar to use for each data bar.
Step 3
Make a list called Data and type in at least six numbers that tell your story like 3 7 5 9 2 6.
Step 4
Create a variable named Index to keep track of which data item you are drawing.
Step 5
Create a variable named Scale and set it to 10 to start so each data number becomes a visible bar height.
Step 6
Add a script that runs when the green flag is clicked that deletes any old clones and sets Index to 1.
Step 7
In that same green-flag script add a loop that repeats for each item in Data and creates a clone for each item.
Step 8
On the Bar sprite add a "when I start as a clone" script that sets the bar size to (item Index of Data) times Scale.
Step 9
In the clone script set the clone's x position using Index so bars line up next to each other and set y to sit on the bottom of the stage.
Step 10
In the clone script add a block to show the clone so each bar becomes visible.
Step 11
In the clone script add a block to change Index by 1 so the next clone uses the next data item.
Step 12
Add two small button sprites and name them Left and Right to act like slider buttons for changing scale.
Step 13
Add a script to the Right button that when clicked changes Scale by 1 and a script to the Left button that when clicked changes Scale by -1 so you can explore patterns by zooming the bars.
Step 14
Share your finished interactive visualization and the data story you created on DIY.org
Final steps
You're almost there! Complete all the steps, bring your creation to life, post it, and conquer the challenge!
Help!?
What can we use if we don't have the exact rectangle sprite or can't access the same block-coding platform?
If you don't have a rectangle sprite or access to Scratch, draw or import a simple rectangle and rename it Bar, or use another block-coding site such as MakeCode or Tynker and recreate the Data list, Index and Scale variables, clones, and Left/Right buttons following the same steps.
My bars aren't appearing correctly or all look the same — what should I check?
If bars don't appear or overlap, check that the green-flag script deletes old clones and sets Index to 1 before cloning, that each clone runs a script which sets its size to (item Index of Data) times Scale, shows the clone, sets its x and y positions, and then changes Index by 1.
How can I adapt this activity for younger children or make it more challenging for older kids?
For younger kids, use a shorter Data list, a larger starting Scale, a pre-made Bar sprite, and simple Left/Right buttons; for older kids, increase the Data length, let Scale change with keyboard input, add axes or value labels, and experiment with different cloning layouts.
What are simple ways to extend or personalize the interactive visualization?
Personalize the project by adding per-clone color coding based on item Index of Data, showing each bar's number with a text sprite or 'say' block, animating bars when Scale changes, or adding larger increment buttons before sharing your data story on DIY.org.
Watch videos on how to code an interactive visualization with block coding
Interactive Games and Activities Created in Canva for Students and Teachers in the Classroom
4 Videos
Interactive Games and Activities Created in Canva for Students and Teachers in the Classroom
How to use Claude Data Analysis? 💥 Interactive Visualization with Claude Sonnet 💥
How to Create an Clickable Interactive Presentation using Hyperlinks in Canva
Step by step guide to making an interactive map with no code
Facts about block-based coding and data visualization
🌟 Block coding boosts creativity and problem-solving by letting kids focus on logic instead of tricky typing or syntax.
🛠️ Blockly is an open-source library that helps developers add block-based coding editors to websites and apps.
📊 Interactive visualizations let viewers explore data by clicking or sliding — often revealing patterns hidden in static charts.
📚 People remember stories about data much better than raw numbers, so a simple data story makes your point stick.
🧩 Scratch was created at the MIT Media Lab so kids can learn programming by snapping colorful blocks like puzzle pieces.
How do I create an interactive visualization using block coding that responds to clicks or sliders?
What materials and software do I need to make a block-coding interactive visualization with my child?
What ages is block coding interactive visualization suitable for?
What are the benefits of kids making interactive visualizations with block coding?
One subscription, many ways to play and learn.
Only $6.99 after trial. No credit card required