Practicing Javascript

100%

Practicing Javascript

✓ Published0🌍 Public

Last edited May 26, 2020

Created on May 26, 2020

Three animated SVG shapes practice D3 transitions in a React-free setup. An arc pulses between inner and outer radii, while two diagonal lines stretch and contract in sync, each cycling through uptime, wait, and downtime intervals. The code uses `d3.arc` to compute the arc’s path and chained `transition().duration()` calls with `on('end')` callbacks to loop the animations. A static HTML page loads D3 v5 and runs the script in a 200×200 SVG.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes Practice

Animated SVG composition of 300 rectangles and 300 circles, rendered with D3 v6 in a React framework. Rectangles initially draw as thin gray strokes, then transition to transparent fills with pink outlines before expanding to fill the entire canvas. Circles begin as large transparent rings with thin white strokes that thicken, then shrink to small points while drifting downward. Transitions sequence over 15-20 second durations, creating a slow rhythmic interplay of shape transformations across the 960x500 viewport.

MModalMBS

83% match

Loading thumbnail…

Shapes Practice

Shapes Practice generates 300 rectangles and circles in an SVG canvas, each animated through long transitions that morph their size, stroke, and fill over time. The rectangles expand from thin strips to full canvas dimensions, while circles shrink from radius 100 to nearly invisible points. Built with D3 v6 and React, the code uses `selectAll`, `data`, and chained `transition` calls with duration attributes to drive the sequential transformations.

MModalMBS

81% match

Loading thumbnail…

D3 practice

An animated wave of circles moves across the screen, with fifteen evenly spaced circles rising and falling in a smooth sinusoidal pattern. Each circle is rendered as an SVG element, with its vertical position recalculated at 60 frames per second using a time-based sine function. The code uses D3’s `select`, `range`, and `join` methods to bind data and update the circle positions, while a `setInterval` drives the animation loop, updating a time variable that shifts the wave phase.

Aaidarshafeev1@gmail.com

80% match

Loading thumbnail…

SVG practice

This example demonstrates basic SVG shape rendering, showing circles, rectangles, lines, and paths composed within grouped transformations. It uses React to render the SVG markup directly in the browser. The visualization applies scaling and translation transforms to position elements, while CSS classes control stroke and fill styles. The code employs raw SVG elements like `circle`, `rect`, `line`, and `path` without any external data source, serving as a practice exercise for layout and styling techniques.

DDannie2020

78% 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

78% match

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

78% match

Loading thumbnail…

SVG and CSS

This example creates an animated SVG face using React and D3 v5. The visualization shows two large eyes and eyebrows rendered as circles and rectangles within a yellow circle on a black stroke, with a smile drawn using an arc path. The eyebrows animate upward and back down over two seconds via chained `transition()` calls that modify the group’s transform attribute. The code imports `select` and `arc` from D3 to manipulate SVG elements and generate the mouth shape, all within a fixed 960x500 canvas.

PPraneeth Varma

78% match

Loading thumbnail…

Practice

A smiling face built from D3.js SVG shapes demonstrates sequential animation with transition chains. The yellow circle, eyes, and arc-based mouth are drawn using D3 selections and the `d3.arc` helper, while two rectangular eyebrows animate upward and back down over four seconds. The movement uses chained `transition().duration()` calls on the eyebrow group's transform attribute, illustrating basic DOM manipulation and timed updates.

Hhossaphul

78% match