Skip to main content
SimilarExport ZIP
100%

affine transformations

✓ Published0🌍 Public
EEE2dev
Last edited Apr 2, 2018
Created on Apr 2, 2018

Four small D3.js v5 canvases each demonstrate a single affine transformation applied to a star texture: rotation, translation, scaling, and fading. The code draws the same image repeatedly, using canvas 2D context methods such as `rotate`, `translate`, `scale`, and `globalAlpha`. Each transformation runs on its own interval, with state tracked per canvas to animate bouncing or reversing direction. The example isolates each operation so viewers can compare their visual effects directly.

AI-generated description

This block illustrate basic affine transformations with canvas.

mit Licensed

Similar vizzes

Loading thumbnail…

Scale & translate

A short, looping D3.js v4 animation demonstrates the interplay of SVG transform operations. It starts with four circles, one red at (100,100) and three at the origin, and then sequentially applies `translate` and `scale` transforms via `transition()` calls. The example highlights how `scale()` scales the coordinate system, not just the element, showing that a subsequent `translate` must compensate for the scaling factor to maintain a desired position. The circles use SVG attributes and fill-opacity styling.

PPatrick Wojda
73% match
Loading thumbnail…

star circle spin - canvas

Nine red stars orbit a central point on a 500-pixel Canvas, each tracing a circular path while collectively spinning as a group. Built with D3.js v4, the animation uses custom shape elements to store angular state, updating each star’s position every 5 milliseconds. The stars’ coordinates come from a hardcoded SVG path, scaled and offset dynamically per iteration, creating a smooth, rotating constellation effect.

PPatrick Wojda
71% match
Loading thumbnail…

D3 Transitions

Six colored circles of varying sizes move across a light green canvas, growing from and shrinking to a radius of zero at different speeds. The visualization demonstrates the D3 transition API, using a slow two-second transition to animate the circles' entry and exit by scaling their radius, while a fast 500-millisecond linear ease animates position updates. The sketch initializes six data points with id, x, y, r, and fill attributes, then uses D3's `select`, `transition`, and `easeLinear` functions to orchestrate the dynamic reshaping of the circle group. A video embed links to a YouTube demonstration of the transition effects.

SShad Frigui
69% match
Loading thumbnail…

D3-coding-challenge#4:Render in multiple canvas

Two D3 canvases render distinct visuals side by side: one draws a Daruma face with circles and arcs for eyes, nose, and blush, while the other displays a bar chart from hardcoded sample data. Built with d3.select, d3.scaleLinear, d3.arc, and d3.transition, both SVG canvases animate background color changes over time. The bar chart uses d3.axisBottom for its x-axis and ordinal color scaling for bars.

MMartin MIAO
69% match
Loading thumbnail…

Canvas Animation Using D3.js

This example demonstrates how to apply D3.js’s enter-update-exit pattern and transitions to custom DOM elements, then render their positions and radii onto an HTML5 canvas. A dat.GUI control regenerates randomized circle data, triggering smooth positional and size animations on custom `<c>` nodes. A `MutationObserver` watches attribute changes on a custom element container and redraws the canvas whenever those animated attributes update, bridging the gap between D3’s DOM-centric data joins and canvas-based rendering. The code uses `d3.select`, `transition.attr`, and the Canvas 2D `arc` API.

11Cr18Ni9
69% match
Loading thumbnail…

Trembling triangle #2

An animated triangle on a canvas trembles and morphs as it fills with shifting, warm-colored bands. The rendering uses a D3 v4 timer loop to drive the shape’s jitter, with the triangle’s edges recursively subdivided to create fractal depth. Each frame, the canvas is cleared, and ten offset triangle paths are drawn in sequence with semi-transparent fills, producing a shimmering, layered effect. The code employs `d3.randomNormal`, `d3.scaleLinear`, `d3.interpolateWarm`, and the Canvas 2D API to generate the motion and color.

EEndNight95
69% match
Loading thumbnail…

Transform Interpolation

Two D3 v3 SVG animations demonstrate alternative interpolation of CSS transforms. Left, `d3.interpolateTransform` decomposes transforms canonically, so a transition from "rotate(180)translate(0,-100)" to "rotate(360)translate(0,-100)" animates via a translate-rotate path. Right, a `d3.tween` using `d3.interpolateString` interpolates the raw transform strings, rotating angle only. Each animation cycles with `transition.attrTween` and a recursive `each("end")` handler, with a circle and label centered in each group.

Mmbostock
68% match
Loading thumbnail…

Canvas Animation Using D3.js II

This example demonstrates an interactive canvas visualization using D3.js, where moving the mouse highlights circles that are generated and animated on a canvas. It uses an offscreen canvas with the same dimensions as the main one, rendered ahead of time, so that the code can detect hovered circles via `ctx.getImageData(mouseX, mouseY, 1, 1)`. The interface includes a dat.GUI control to adjust the circle count, which regenerates the data and redraws the canvas, alongside a stats.js monitor for rendering frequency. Clicking a button reveals the offscreen canvas as an image via `toDataURL()`.

11Cr18Ni9
68% match