Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

truck for kids

Public visualization

Viewing a saved revision (read-only)

d05e4e31fbd7401a9eb8bf68e4d80ee5

truck for kids

0 stars0🌍 Public
Vvenigallajaanu@gmail.com
Last edited Feb 24, 2025
Created on Feb 22, 2025

Built with D3.js v7, this example draws a cartoon truck as an SVG composition of rectangles and circles, including a red body, blue cabin, white window, yellow backlight, and two black wheels. Clicking the truck triggers a two-second `transition` that translates the entire group horizontally across the canvas, while the wheels rotate 720 degrees via `transition.attrTween` and `d3.interpolateString`. The wheels spin independently during the movement, and repeated clicks restart the animation, making the truck advance slowly across the gray-bordered SVG stage. It demonstrates reusable transition chaining on grouped SVG elements.

AI-generated description

D3.js Animated Truck

This project creates a simple truck using D3.js. The truck moves when clicked, and the wheels rotate.

🚀 Features:

C-lick the truck to make it move forward.

  • Wheels spin while the truck moves.
  • Built using D3.js and SVG elements.

🛠️ How to Run:

O pn index.html in a browser. 2. Cli ck the truck to see the animation!

🎨 Components:

    Tr- - \ Body* (red rectangle)

  • gf hfsCabin** (bl*\e recta ngle)
  • Windows (white rectangle)
  • Headlights (yellow circle)
  • Wheels (black circles that rotate)

Enjoy! 🚚✨