Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Jjesramyep1263
Last edited Apr 13, 2020
Created on Apr 13, 2020
Forked from Cars Report

A single blue rectangle animates its width and height over five seconds using a custom tween that interpolates numeric values, while its fill color transitions from blue to red to green in sequence over four seconds. The example demonstrates JavaScript modules for car data handling and report generation, though the visualization itself relies on D3 v4 selections, transitions, and interpolate functions to drive SVG attribute changes.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

Fifty circles, one per vertical position, traverse the SVG horizontally in a looping animation. Using d3.scalePoint for y-coordinates and d3.scaleLinear with HSL interpolation for fill colors, each circle transitions across the width, then snaps back and restarts via d3.active and nested transitions. The page initially displays “Loading…” before an unrelated JavaScript module (getCars, generateReport) asynchronously populates a message element with a filtered car report, though that data does not affect the visualized motion.

Jjesramyep1263
82% match
Loading thumbnail…

Untitled

A grid of 4,002 small square divs cycles through a continuous color animation, shifting from light gray to steel blue, then to orange, and back to light gray. The page uses D3 v4 with `d3.interpolateRgb` for color transitions and `d3.active` to manage chained, repeating transitions with random delays. The example demonstrates modular JavaScript with ES6 imports, including a promise-based `getCars` function and data filtering from a JSON array, though the grid itself relies solely on D3's selection and transition methods.

Jjesramyep1263
81% match
Loading thumbnail…

Untitled

This example demonstrates a simple animation where a black square container transitions its background color to red over one second. The visualization uses the D3.js library's `d3.select` function to target the HTML element and applies a `transition().duration(1000).style("background-color", "red")` chain. The code also includes an unexecuted fragment that reads population data from a CSV file using `d3.csv` and scales values by a factor of 1000 before rendering rectangles to an SVG. The animation highlights D3's ability to smoothly interpolate CSS style changes.

LLeon Palafox
77% match
Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263
77% match
Loading thumbnail…

Untitled

A red circle sits at the center of a full-window SVG canvas. When the mouse enters the circle, a green circle and a black circle appear on top of it, and the red circle transitions its radius to 100 with a 750ms duration. On mouse leave, the circle returns to a radius of 40 and its red fill over 500ms. The example uses D3 v7 to append SVG elements and the `transition` API for animation, while `d3.interpolateRound` is called to compute a rounded interpolation value.

Ssukumardunn
77% match
Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

AAveryBurke
76% match
Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

AAveryBurke
76% match
Loading thumbnail…

Untitled

A grid of 3D bars rises from a flat plane, each bar labeled with its height value on top. The visualization uses d3-3d to project cube geometries into SVG paths, with interactive drag rotation that updates the perspective in real time. D3 v4 handles the data binding, transitions, and text tweening, while color comes from the categorical scheme. A button triggers a full data refresh with animated transitions.

Aavnreddy95
76% match