Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Double Harmonic Black and white

✓ Published0🌍 Public
Xxani
Last edited May 19, 2021
Created on May 19, 2021

A web document displays a black-and-white composition of fifteen circles, all centered on a large, static canvas and rendered with an SVG. The circles are overlaid at the same center point, each with a fixed radius, creating a layered, harmonic pattern inspired by a double pendulum. The code uses d3.select to append an SVG element, d3.range to generate the data, and d3.enter to create the circle elements, with dimensions based on window.innerWidth and window.innerHeight.

AI-generated description

Double Pendulum inspired by sisyphus table.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Double Harmonic Black and white

A black-and-white animated line traces a double pendulum motion, with two connected arms sweeping from a fixed center point and a small circle riding at the tip. The circle alternates between white and black fills while a larger shadow circle follows underneath. The animation updates every 50 milliseconds using JavaScript’s `setInterval`, and d3 v6 selection methods like `selectAll`, `data`, and `join` bind new positions to SVG `<line>` and `<circle>` elements.

Wwgloss
83% match
Loading thumbnail…

Fork of Double Harmonic

A double pendulum animation built with D3.js v6 renders a black tracing line and white ball in SVG. The code uses `select`, `range`, and `setInterval` to update circle and line positions at each tick, computing the pendulum’s path from cosine and sine functions with a fixed psi ratio. The full-screen SVG shows two connected rods and the swinging tip, with ball radius and arm lengths as constants.

Wwgloss
80% match
Loading thumbnail…

Fork of Double Harmonic

A two-link pendulum traces a spherical path as two connected circles rotate around a fixed center point. The animation uses `setInterval` to update the positions every 50 milliseconds, with the second circle’s motion offset by a constant psi value that creates the harmonic fork effect. The SVG rendering uses `selectAll` and `join` to update circle and line elements, applying black strokes for the pendulum arms and a white circle with a black border for the joint. The visualization responds to browser window dimensions, setting its size based on `window.innerWidth` and `window.innerHeight`.

TTehran Mammadov
80% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example renders a set of seven semi-transparent, solid-colored circles positioned across an SVG canvas. The data is a hardcoded array of circle properties, including x, y, radius, and fill color, which the code binds to SVG circle elements using D3’s data join. The visualization is created with d3.select and d3.selectAll, while the fixed coordinates and radii produce a static, abstract composition. The code sets the SVG background to a light ivory and uses a concise, data-driven approach to generate the shapes.

Eeschuman20@gmail.com
80% match
Loading thumbnail…

Fork of Fork of D3 Starter

A grid of 40 white circles arranged horizontally on a black SVG canvas undulates vertically in a smooth, periodic wave, with each circle’s height determined by a sine function of its index and a shared time parameter. Using D3 v6, the example selects the SVG element, binds data to an array of 40 values, appends circle elements, and animates them with `d3.timer`, updating the `cy` attribute each frame. The rendering relies solely on D3’s selection and data-join methods without any external data source.

DDavid Sanderson
80% match
Loading thumbnail…

Fork of Sine Wave Circles

A D3.js animation renders a field of 100 white circles that oscillate vertically in a sine wave pattern across a black SVG canvas. Each circle's vertical position is calculated using the sine of its horizontal index divided by five, plus a time-based increment from the `d3.timer` callback, producing a smooth, continuous wave motion. The circles are evenly distributed horizontally based on the SVG width and sized proportionally. The example, a port of the P5.js Math Sine Wave, demonstrates D3's core selection and attribute-updating APIs, leveraging SVG circles as the primary rendering primitive for the animated visualization.

Jjmmoser7
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Hello HTML

A plain HTML page displays a single black circle centered in an SVG canvas. The visualization uses raw SVG markup for rendering, defining a 960 by 500 pixel viewport with a circle element. The page sets its body to have no margin and hidden overflow through inline CSS. No external libraries or data sources are present; the example simply demonstrates how SVG shapes can be embedded directly in HTML.

Bbgarci23@nd.edu
79% match
Loading thumbnail…

Fork of Double Harmonic

A double pendulum is drawn as two black line segments connected by a dark circle, with a white ring tracing the path of the second mass against a full-screen SVG. The animation runs on a 50-millisecond timer, updating the pendulum’s position based on trigonometric functions of a time variable. It is rendered with D3 v6, using `select`, `range`, and `join` operations to create and update the `line` and `circle` elements. The pendulum’s motion follows a classic two-arm harmonic pattern with a fixed frequency ratio.

Wwhiteswallow87
79% match