100%

Fork of New template

✓ Published1🌍 Public

Last edited Feb 22, 2025

Created on Feb 22, 2025

This example shows an interactive truck built from SVG shapes: a red body, blue cabin, white window, yellow headlight, and two black wheels. Clicking the truck triggers a two-second animation that translates it to the right, and the wheels rotate 720 degrees around their centers. The code uses D3.js v7 to select the SVG container, append shape elements, and animate the truck’s movement and wheel spinning with a transition and `attrTween`.

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:

Click the truck to make it move forward.

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

🛠️ How to Run:

Open index.html in a browser. 2. Click the truck to see the animation!

🎨 Components:

Truck Body* (red rectangle)
Cabin (blue rectangle)
Windows (white rectangle)
Headlights (yellow circle)
Wheels (black circles that rotate)

Enjoy! 🚚✨

MIT Licensed

Similar vizzes

Loading thumbnail…

truck for kids

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.

Vvenigallajaanu@gmail.com

86% match

Loading thumbnail…

ice4

A clickable SVG truck demonstrates D3.js event handling and transitions. The truck consists of rectangles, circles, and a group element, with wheels that spin using `transition.attrTween` and `d3.interpolateString` when clicked. The entire vehicle moves via a `transition` on its `transform` attribute, while the body, cabin, windows, headlight, and wheels are drawn with basic SVG shapes and static fill colors.

Vvenigallajaanu@gmail.com

79% match

Loading thumbnail…

Fork of Fork of Bird's Landscape - D3.js

This interactive SVG landscape depicts a dynamic outdoor scene with a gradient sky, sun, land, trees, birds, dogs, flowers, stars, and a moving truck. Built with native SVG and JavaScript, the visualization uses animated elements such as `animateTransform` for bird wing flaps, `animate` for sky color transitions, and CSS keyframes for a sun track. Procedurally generated and placed elements, including flies with `animateMotion`, populate the scene, while a red truck moves across a road via manual animation.

AAsrar Al Qassem

73% match

Loading thumbnail…

Fork of base

This example demonstrates a simple interactive SVG scene with three colored circles and a clickable rectangle. The visualization uses D3 v5 to append circles to a central group, with the red circle responding to mouseover and mouseout events. Clicking the rectangle triggers a transition chain that moves the red circle through two sequential 2-second animations using `transition.attr`. The code imports D3 functions directly via ES6 modules, and also imports a custom message from a local module, which is rendered in the page. The scene is rendered as static SVG elements with no external data source.

BBomkerss

72% match

Loading thumbnail…

Wagon

This example demonstrates a simple animated wagon built from SVG shapes, combining red rectangular body segments with rotating circular wheels. The wheels are created using HTML div elements styled with CSS, where each wheel contains six line spans that rotate at 60-degree intervals to form spokes. The SVG rendering includes repeated rect elements for the wagon bed, while CSS animations drive the wheel rotation continuously. The piece serves as a hands-on exercise in combining SVG primitives with CSS animations and transforms to create a playful, moving illustration.

SSam Hege

71% match

Loading thumbnail…

Fork of Fork of Fork of Bird's Landscape - D3.js

This example presents an animated SVG landscape featuring a bird, trees, dogs, stars, and flowers, all rendered programmatically. The scene includes a day-night cycle simulated through animated gradients, a moving truck, and flying birds with flapping wings. Built with D3.js v3 and vanilla JavaScript, the code dynamically creates SVG elements using `document.createElementNS`, applies CSS animations, and uses SMIL animations like `animateTransform` and `animateMotion` for movement. The sky and sun gradients are defined with SVG `radialGradient` and `linearGradient` elements, animating over a 24-second loop.

Nnagasai.mandalapu@gmail.com

71% match

Loading thumbnail…

Fork of Fork of Fork of Bird's Landscape - D3.js

This playful D3.js (v3) SVG scene depicts a whimsical landscape filled with randomly placed trees, flowers, stars, sheep, dogs, and flies, all generated from reusable functions. A red truck animates across the scene, while birds, clouds, and a rotating sun add motion. The composition is a "fork of a fork" of earlier landscape examples, remixing SVG structuring techniques for grouping and referencing elements.

SSai Hemanth Babu Sunkari

71% match

Loading thumbnail…

Fork of D3 Starter

A minimal demonstration of SVG primitives builds a stylized landscape with an animated sky gradient and a drifting sun. Two overlapping paths create layered hills in the foreground, while a radial gradient for the sky and linear gradients for the land transition between aliceblue, steelblue, and midnightblue. The D3 v7 `select` function appends a static text label, and inline SVG `<animate>` elements drive the color and position changes over a 10-second loop, showing how raw SVG and D3 can be combined for simple animated visuals.

DDouChinn

70% match