Skip to main content
SimilarExport ZIP
100%

Fork of Blank Slate with Hot Reloading

✓ Published0🌍 Public
UUdayKalyanN
Last edited Feb 13, 2025
Created on Feb 13, 2025

A static cupcake illustration rendered as SVG, showing a pink paper wrapper, curved frosting, twelve randomly placed sprinkles, and a cherry with a stem, all positioned within a 600-by-500 canvas. A pink title, "Sweet Cupcake," sits above the graphic. The code uses D3.js version 7 to append and style SVG elements such as `path`, `rect`, `circle`, and `line`, with randomness from `Math.random()` controlling sprinkle placement and rotation. The visualization is drawn from hardcoded coordinates rather than external data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Blank Slate with Hot nice

This D3.js visualization renders a three-tiered birthday cake with distinct pastel layers, frosting scallops, candles with gradient flames, and decorative toppings like sprinkles and strawberries. The SVG is created dynamically using `d3.select().append()` to build shapes, while `d3.path()` constructs the curved frosting paths. Randomly positioned line elements generate the sprinkles, and radial gradients define the candle flames. The cake sits on an elliptical stand, with a bold text title anchoring the composition. The code explicitly sets the SVG dimensions and viewBox, with all elements drawn procedurally rather than from an external dataset.

NNita
86% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example displays a simple donut chart rendered as SVG shapes, including a base circle, a white hole, and three colored sprinkles, with a text label. It uses D3 v7 to append the SVG elements to the page. The code directly manipulates SVG circles and text, showing a basic static visualization workflow. It serves as a blank slate for exploring the VizHub V3 runtime.

Nniveshsyreddy@gmail.com
83% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

A fork of the Blank Slate example demonstrates VizHub V3's hot reloading environment by rendering a simple SVG donut with D3. The visualization constructs a pink frosted donut with glaze drips, random sprinkles, and a cherry using d3.select, append, and attr methods. The code builds static SVG shapes within a 500x500 viewport, with sprinkles positioned randomly and rotated via transform. This serves as a minimal interactive development sandbox for exploring real-time code editing.

11002.greeshma@gmail.com
82% match
Loading thumbnail…

Fork of slice

This visualization draws a three-layered birthday cake with a candle, flame, sprinkles, and strawberries using static SVG shapes. The code builds the scene with D3 v6 by appending rectangles for cake layers and the candle, circles for sprinkles, strawberries, and the flame, and positions elements through SVG transform and coordinate attributes. Random sprinkle positions are generated with d3.range and Math.random, while the cake is centered via a translate transform.

Llathabemanadham@my.unt.edu
80% match
Loading thumbnail…

11594097

This example renders a stylized decorated cake using D3. It builds the SVG scene from fixed-position shapes: layered rectangles form the cake tiers, while paths, circles, and ellipses add frosting, sprinkles, cherries, plate, and candles. The code relies on the D3 selection and append API to construct the drawing, with random sprinkle placement and a fixed color palette.

Hhalinswaroopch@gmail.com
79% match
Loading thumbnail…

Fork of Donut Platter

This visualization renders a pink-frosted donut with a plate, hole, and colorful sprinkles. It demonstrates fundamental SVG manipulation with D3.js v5, building each shape as an appended SVG element. The code uses `d3.select`, `svg.append`, and attribute setters to compose circles and paths, while generating random sprinkle positions with `Math.random()` and JavaScript loops. It also draws white drizzle lines using the D3 `path` helper.

Nnagasuryaharsha999@gmail.com
79% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example shows a playful static SVG composition of a sun with scattered yellow dots, a face-like shape in tan and pink, a red house with a roof, a kebab skewer with meat and vegetables, and a series of yellow rectangles resembling flames or sticks. The code renders directly to the DOM using a single SVG element with hardcoded coordinates and attributes, defined entirely within a JavaScript `main` function. It uses no external libraries, relying on native SVG primitives like `<circle>`, `<rect>`, `<polygon>`, and `<line>`. The constant `fontSize` is declared but unused, while the visualization changes only through manual edits to the source.

Hhone5t
79% match
Loading thumbnail…

11594097

This example displays a stylized, seasonal cake built from layered SVG shapes. Using D3.js version 7, the visualization constructs each cake component programmatically: brown rectangles form the base layers, pink ellipses create frosting, and circles represent sprinkles and decorative elements. A golden candle with an orange flame tops the cake, while random category-colored dots add a festive touch. The scene is drawn with vector graphics on a fixed 500x500 canvas, set against a warm background. The code demonstrates D3's selection API for creating and styling SVG primitives with custom attributes and transformations.

Hhalinswaroopch@gmail.com
79% match