Skip to main content
SimilarExport ZIP
100%

ice4

✓ Published0🌍 Public
Vvenigallajaanu@gmail.com
Last edited Feb 22, 2025
Created on Feb 22, 2025

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

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
84% match
Loading thumbnail…

Fork of New template

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`.

Vvenigallajaanu@gmail.com
79% match
Loading thumbnail…

ice4

A smiling yellow face with black outlined eyes and rectangular eyebrows is drawn using D3.js v5 in an SVG. The animation shows the eyebrows moving up and down by chaining two `transition.attr` calls on a group element. The code uses `d3.select`, `d3.arc` for the mouth, and SVG primitives like `circle` and `rect`. Rendering is SVG-based with timed transitions.

Ssuchitra2602
71% match
Loading thumbnail…

ICE-5 Campus Food Trucks

This D3.js example displays a summary of a campus food truck dataset loaded from a remote CSV file. The page shows the row and column count, along with an approximate file size of 1 KB, in a styled summary area adjacent to a simple illustrative SVG containing a labeled rectangle. The project uses the `d3.csv` method to asynchronously fetch and parse the data, then directly updates the HTML `innerHTML` property to present the calculated findings. Static SVG elements are defined directly in the HTML markup, while styling is handled through internal CSS rules.

Jjanisha30gowda@gmail.com
70% match
Loading thumbnail…

Click Transition

Clicking the SVG triggers a transition that removes some circles and recolors the rest. Eight circles initially render in a vertical line; a click updates the data to four circles, causing the removed circles to slide rightward before disappearing while the remaining circles turn blue. Built with D3 v4, the example uses a reusable `d3.transition` with a linear ease, `.exit()` for removal, and `.attr('cx', 600)` to animate the exit path. The `d3.selectAll` and `.data()` binding drive the update, with delays staggered via `function(d, i)` callbacks.

CCoreyBurkhart
70% match
Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel
69% match
Loading thumbnail…

Ice 4 final viz

This example uses D3 version 7 to draw a static cartoon face in an SVG element. The code builds a red circle as the head, adds two eyes and rectangular eyebrows, and creates an open mouth using the `d3.arc()` path generator. All shapes are positioned manually with SVG coordinates and grouped using `g` elements. The visualization demonstrates basic SVG drawing primitives and path construction without interactive behavior or data binding.

NNikhilMakkena
68% match
Loading thumbnail…

ICE-5 DV

This example uses D3.js to render a smiley face and animate its eyebrows through a sequence of `transition().duration()` calls. The face is drawn with SVG shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned via a central `g` element. It also fetches a CSV file of laptop purchase data and displays dataset metadata, including size, row count, and column count, in a pre element.

Ssiddu7147
68% match