Skip to main content
SimilarExport ZIP
100%

New Year Theme

✓ Published0🌍 Public
SSree Likhith
Last edited Jan 13, 2024
Created on Jan 13, 2024

A festive New Year visualization renders a fireworks display of colorful circles, squares, and radiating lines on a light pink background. It uses D3.js selections and data joins to bind hardcoded arrays of circle and square coordinates, drawing 60-70 radial lines per circle to simulate sparks, with overlapping translucent shapes creating depth. The code also appends centered text reading "Happy New Year 2024" using D3's SVG text API. The data is static and embedded directly in the script, with no external sources.

AI-generated description

A blank starter for building with D3, using the VizHub 3 runtime with hot reloading.

MIT Licensed

Similar vizzes

Loading thumbnail…

New Year Theme

This example renders a New Year-themed composition on a light gray SVG canvas using D3.js. It displays a mix of semi-transparent circles, rectangles, and five-pointed star polygons scattered across the viewport, alongside radiating line spokes from each circle’s center. The visualization uses `d3.select` and data joins (`join`) to bind array data to SVG elements, including `circle`, `rect`, and `path` nodes. A centered text element reads “Happy New Year 2024” in dark blue, with all shapes positioned via hardcoded coordinates and styled with distinct fills.

SSree Likhith
88% match
Loading thumbnail…

Random circle shapes with react July 4,2022 -1

This visualization displays a collection of colorful, randomly generated circles and rectangles on a black background. Using React with D3, the code generates 200 data points through a mathematical formula, mapping them with sine and cosine functions to position shapes across the canvas. Each shape receives randomized stroke widths, opacity values, and RGB color values computed from the data points. The rendering approach combines D3's SVG manipulation with React components, specifically using D3 selection for the background canvas setup and React DOM for the interactive shape generation.

NNita
70% match
Loading thumbnail…

D3 Selection

Animated circles in navy float across the screen, their sizes and vertical positions oscillating smoothly in a wave-like pattern that changes over time. The number of visible circles also fluctuates rhythmically, creating a dynamic, generative composition. Using D3.js v6 with SVG, the code computes coordinates from trigonometric functions and a time variable within a `setInterval` loop. It employs the data-join pattern with `.selectAll`, `.data`, and `.join` to update circle attributes continuously, demonstrating D3's core selection mechanics in a responsive full-viewport canvas.

EEzhil-Kalai
68% match
Loading thumbnail…

D3 Selections

Two hundred blue circles form a sine wave that continuously animates across the screen, with each circle’s vertical position shifting based on a time-driven formula. The visualization demonstrates D3’s data join pattern using `selectAll`, `data`, and the `.join()` API to efficiently update existing SVG circle elements rather than recreating them. The example runs in a React framework with SVG rendering, updating every 16 milliseconds via a JavaScript `setInterval` timer, and pulls data from a procedurally generated range of 200 points.

LLewis Ward
68% match
Loading thumbnail…

Fork of Circles with D3

A fireworks rocket launches from a red tube, erupting into a burst of orange particles that scatter and fade against a black background. The animation begins after a two-second delay, with each particle expanding from the launch point and moving outward with randomized trajectories. Built with D3.js v7, the visualization uses SVG primitives and a transition with `easeCubicOut` easing to animate the particles' positions and opacity, creating a simple, looping firework effect.

Wwkj0713@gmail.com
68% match
Loading thumbnail…

Fork of Fork of yearwheel b4 animation

This radial calendar visualization, built with React and D3 v4, displays a year of events and seasons arranged in a circular wheel. The example maps categorized events (like meetings and festivals) to colored arcs and segments, with each month and quarter rendered as layered donut slices. The code uses D3’s SVG rendering and animation capabilities to draw the wheel, mapping event dates to angular positions. Data is hardcoded as JavaScript arrays, with CSS styling controlling the visual fill colors and hover effects for interactive tooltips. The visualization also includes a static year view without interactive animation, making it a static SVG layout.

LLiml
68% match
Loading thumbnail…

#HAW New Year's Resolutions

This interactive bubble chart visualizes New Year’s resolution survey responses by demographic category, with gender and age group buttons toggling the displayed percentages. The visualization arranges color-coded bubbles in an orbital layout around a central hub, using D3 transitions to animate circles and connecting lines into position. React manages state and container dimensions, while D3’s scaleLinear and selection APIs render the responsive SVG and handle click interactions that highlight individual responses.

Nng.tuoanh.cbn@gmail.com
67% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Random square shapes with react July 4,2022 - 2

This example displays a field of randomized, semi-transparent square outlines and circles arranged in a curved band across a dark background. The shapes are generated procedurally from a mathematical formula that computes 190 values, which determine each shape’s position, size, and RGB stroke color through trigonometric functions and random multiplication. Built with React and D3 v7, the visualization renders SVG elements, using a `<defs>` filter for drop shadows and mapping the computed array to custom React components. All geometry is computed client-side without external data.

NNita
67% match