Skip to main content
SimilarExport ZIP
100%

New Year Theme

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

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.

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

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.

SSree Likhith
88% match
Loading thumbnail…

MY NEW SVG PROJECT

This example shows a collection of concentric circles and lines rendered on a large SVG canvas using plain JavaScript within an HTML page. It uses the SVG API directly, with elements like `<circle>` and `<line>` to create layered color patterns and a target-like composition. The rendering approach relies on static SVG markup, with no dynamic data or interaction. The code includes a basic CSS style for text and a commented-out rectangle, while the main visual elements are defined inline in the document body.

Ssantoshmitra-05
72% match
Loading thumbnail…

Hello Data viz

This example displays five overlapping circles of varying sizes and colors, arranged to create a visually dense, colorful target-like composition on a 960 by 500 SVG canvas. The circles are manually positioned with fixed coordinates and radii, each using distinct fill and stroke colors such as red, green, purple, and magenta. The visualization is built with plain HTML, CSS, and JavaScript, rendering shapes directly through SVG circle elements without any external libraries or data-driven logic. It simply demonstrates static vector shapes with heavy strokes and overlapping layers for visual effect.

Iillyyo
71% 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
71% match
Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2
71% match
Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania
71% match
Loading thumbnail…

New Start

A blank blue SVG canvas displays no data. The visualization renders a 960 by 500 pixel SVG element, which the code sets to a blue background using the D3.js selection and style methods, `d3.select('svg')` and `.style('background-color', 'blue')`. The example, titled "New Start," loads D3 version 7 from a CDN and demonstrates basic SVG styling within an HTML page. No additional marks, axes, or datasets are present in the minimal implementation.

Vvenugopal-92
70% match
Loading thumbnail…

Circles with D3

This example uses D3 to draw a static set of colorful circles on a white background. The `select` function creates an SVG container, and the code binds an array of data objects to `circle` elements, setting each circle’s position, radius, and fill color via attributes. The circles vary in size and color, with an opacity of 0.708, arranged in a scattered pattern across the canvas. The implementation relies on D3’s data join method to render the shapes.

MM Hema
70% match