test

100%

✓ Published0🌍 Public

Last edited Feb 4, 2020

Created on Feb 3, 2020

This example demonstrates a static SVG rectangle that animates its width in response to a button click. The visualization uses D3.js to select the HTML body element, create an SVG container, and draw a rectangle. When the button triggers the `trigger()` function, the rectangle transitions its `width` attribute from 50 to 400 over a duration of 2000 milliseconds with a 100-millisecond delay, before being removed from the scene. The page relies on inline JavaScript and D3’s selection and transition APIs.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Create an animated rectangle with D3

This example demonstrates how D3 transitions can animate the properties of an SVG rectangle. An initially short, 100-pixel-wide rectangle grows in height from zero to 400 pixels over two seconds after a one-second delay, while its fill color changes from steelblue to a warm orange in a second transition. The code uses D3 v5’s `d3.select` to append an SVG element, `selection.append('rect')` to create the shape, and chained `transition()` calls with `.delay()` and `.duration()` methods. The rectangle is rendered directly in the browser via SVG, with all styling and timing defined imperatively in JavaScript.

NNita

76% match

Loading thumbnail…

test

A full-width red rectangle sits against a plain white background, its thick black stroke defining the shape. The example showcases a simple CSS and SVG interaction, where the rectangle transitions to green on hover. Written as a minimal HTML page, it uses inline CSS for styling and transitions, while JavaScript is included but not yet utilized. The SVG element is drawn directly in the markup, offering a straightforward demonstration of static vector graphics and hover feedback.

88ingo8ongo

74% match

Loading thumbnail…

D3 Sketch Test

This example demonstrates the simplest form of animation in D3: a single white circle moving horizontally back and forth across a 960x480 SVG canvas. The circle transitions from x-coordinate 40 to 900 and back, with each leg lasting 3000 milliseconds. The code uses `d3.select`, `append`, `attr`, and chained `transition` calls with `duration`, where the `on("end")` event listener handles looping. It renders via SVG within a React application, though the animation itself operates independently of React’s rendering cycle.

NNita

74% match

Loading thumbnail…

test

This example displays a single red rectangle on an SVG canvas. The rectangle is defined with inline attributes and CSS styles that apply a border and fill color. Interactive behavior is included: hovering over the shape triggers a CSS transition, gradually changing its fill to green and expanding its stroke width over three seconds. The code uses plain HTML, CSS, and SVG, with no external libraries. The rendering relies on the SVG `rect` element and CSS `:hover` and `transition` properties.

Ssirenajbpearl@gmail.com

73% match

Loading thumbnail…

Test1

This example animates twenty pairs of rectangles moving diagonally across an SVG canvas, with each rectangle shifting horizontally and vertically before transitioning to a red fill. The visualization demonstrates chained D3 transitions, where the initial position attributes are set without animation, then followed by two sequential transition stages. The data is generated programmatically in JavaScript using a loop to create an array of x-coordinates. The code uses D3 v5’s selection, data binding, and `.transition().duration()` API, rendering elements as SVG rectangles within a 900×500 viewport.

NNita

73% match

Loading thumbnail…

React Starter

This React Starter example demonstrates how to resize an SVG element by adjusting a wrapper div's dimensions through button clicks. The application uses React's `useState` and `useRef` hooks alongside D3's `select` to read and update CSS width values dynamically. A `d3.select` call retrieves the element's current width, which increments or decrements by 50 pixels with each button press. The rendered SVG fills the container with a light gray background, showing a minimal integration of React state management with D3 utilities for DOM manipulation and styling.

Ggjonor

72% match

Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

CCosmosDude1

71% match

Loading thumbnail…

Lecture 3

This example demonstrates a full-screen SVG visualization of 100 vertical rectangles, each with a fixed width of 10 pixels and spacing of 20 pixels, filling the entire viewport height. It uses the Document Object Model API’s `createElementNS` method to construct SVG elements—specifically the `<svg>` and `<rect>` tags—within the `http://www.w3.org/2000/svg` namespace. The rectangles are generated in a JavaScript loop, with their `x` positions advancing by 20 pixels per iteration, creating a striped pattern across the window. The code sets the SVG’s width and height to the browser’s inner dimensions, ensuring the visualization scales responsively.

Jjajinkyaa

71% match