Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
HHannah Zong
Last edited Jul 7, 2024
Created on Jul 6, 2024
Forked from Hello VizHub

This example demonstrates a simple animated visualization of fifteen circles moving horizontally across an SVG canvas. Each circle’s vertical position follows a sine wave, creating a wavy pattern that updates every second. The code imports `select` and `range` from D3 v5, builds the SVG with `select('body').append('svg')`, and uses `setInterval` with the `.join('circle')` operation to update the circle positions. The data for each frame is generated on the fly with `range(15).map(...)`, and `console.log` outputs the sine value. The rendering is SVG-based with no external data source.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub : Making circles 1

This example displays 150 randomly generated circles scattered across an SVG canvas. The code uses D3 v5 APIs such as `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data values to positions and colors. Each circle’s radius, x-coordinate, and y-coordinate are derived from the random data multiplied by additional random factors. The circles are rendered with semi-transparent fills and strokes using RGB strings, demonstrating basic data binding and SVG element creation.

Iiamsrihari28
84% match
Loading thumbnail…

Fork of select d3 functions

This example demonstrates an animated sine wave generated from a dynamic dataset, rendered as a set of circles that move vertically across the screen. The number of points fluctuates over time, creating a breathing effect. The visualization uses D3’s `select` and `selectAll` APIs to manage an SVG canvas, updating circle positions via the data join. Data is produced by `makeData.js`, while a 60Hz interval drives the animation, and `vizData` handles the rendering. The code relies on the `d3.range` function for data generation and D3’s SVG circle elements for display.

FFrancisco Ibelles
84% match
Loading thumbnail…

Fork of HTML Starter

A wave-like pattern of 15 circles oscillates across the screen, moving vertically in a sine wave that shifts over time. The visualization uses D3's `select` and `range` functions to generate the data, and the `join` method to bind it to SVG circle elements. Each frame updates the `cx` and `cy` attributes based on the current time value `t`, which increments by 0.01. The animation runs continuously via `setInterval` at 60 frames per second, rendering in an SVG canvas sized to the browser window.

Ffdrigui
83% match
Loading thumbnail…

Fork of Fork of Hello VizHub : Making circles 1

This example displays a scattered field of semi-transparent, randomly colored circles over a dark background, with each circle’s position and radius derived from random numbers. The visualization uses D3 v5 to generate the SVG elements, employing `scaleLinear` for the x and y axes, `scaleOrdinal` with `schemeCategory10` for potential color mapping, and manually computed `rgb()` strings for fill and stroke. The code also includes a large embedded SVG path, though it is not rendered in the visible output.

NNita
83% match
Loading thumbnail…

Fork of D3 Selection Exploration

Animated sine-generated circle sequences flow across the canvas, with horizontal position fixed and vertical position and radius oscillating sinusoidally over time. The visualization demonstrates D3's selection and join API. Using D3 v7.8, the code updates at 60 FPS via `setInterval`, calling a `vizData` function that employs the `.join()` operator to merge entering and exiting SVG circles with animated attributes.

Lliu yang
83% match
Loading thumbnail…

Fork of Sine Wave Circles

This example visualizes a sine wave as a row of 30 circles that oscillate vertically in sequence, creating an undulating wave pattern across a 960-by-500 SVG canvas. Each circle’s y-position is determined by a sine function whose phase shifts with time and varies with the circle’s index, producing a smooth, continuous wave animation. The code uses D3 v7’s `range` and `timer` APIs to drive the animation, updating circle positions via selection attributes. It is a direct port of a p5.js sine wave example, implemented with SVG elements and vanilla JavaScript.

PPeiyang Li
83% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a dynamic data-join animation using D3 v7, where fifteen circles move horizontally in a sine-wave pattern that updates every second. The visualization uses `setInterval` to increment a time variable, generating new x and y coordinates for each circle based on its index and the sine of its position plus time. The code employs D3's `selectAll().data()` join method to enter and update SVG circle elements, animating their `cx` and `cy` attributes smoothly as the wave oscillates vertically. The SVG rendering adapts to the full browser window dimensions.

Hhyeonukim91
83% match
Loading thumbnail…

Fork of Hello VizHub 3

This example demonstrates animated, semi-transparent circles overlaid on a lime-green background, with blue squares arranged across the top. Using D3.js’s `select`, `transition`, and `join` APIs, circles enter with staggered delays, update their position, size, and color, and can exit by shrinking. The data comes from a CSV file with fields `id`, `x`, `y`, `r`, and `fill`. The code also imports CSS to apply a multiply blend mode to the circles.

Ssachings9210@gmail.com
82% match