Skip to main content
100%

Fork of slice

✓ Published0🌍 Public
Llathabemanadham@my.unt.edu
Last edited Feb 23, 2025
Created on Feb 23, 2025
Forked from Pizza

This example renders a simple three-layered cake using React with D3.js (v6) and SVG. It draws stacked rectangles for the cake layers, adds randomly positioned red circles as sprinkles, and places fixed circles as strawberries on top. A white rectangle represents the candle with an orange circle for the flame. The visualization uses D3's selection and append methods to construct the SVG elements, with styling applied via an external CSS file.

AI-generated description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
    • Show the margins, which can be easily removed by deleting the showMargins={true} prop
MIT Licensed

Similar vizzes

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

Fork of slice

A fork of the Slice example draws a strawberry cheesecake using D3.js v7 with SVG rendering. The code constructs the dessert from layered geometric shapes: rectangles form the crust and cheesecake layers, an ellipse creates the strawberry glaze, and circles represent strawberries and whipped cream. Green triangles serve as strawberry leaves, while a path provides a chocolate drizzle. All shapes are positioned absolutely on a 500x500 canvas, with data arrays defining strawberry and whipped cream positions through `forEach` loops.

Llathabemanadham@my.unt.edu
86% match
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
83% match
Loading thumbnail…

cake 11714828

This example shows a stylized cake built with three layered rectangles, blue frosting strokes, red and pink sprinkles, three strawberries, and a candle with a flame. The code uses D3.js v6 to select an SVG container and append shapes, with randomized sprinkle positions generated via `d3.range` and `Math.random`. A static cake group translates to the center, and each layer, strawberry, and candle element is positioned with explicit coordinates, rendered as SVG rects and circles.

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

Fork of Rendering Data with React & d3

This example displays a radial burst of colored slices representing CSS named colors, loaded from a CSV file via d3.csv. Each slice corresponds to one color entry, with its fill set to the color’s RGB hex value. React manages the component state and renders the SVG, while d3’s pie and arc functions compute the angular layout and path geometry, creating a full circular visualization from the dataset.

MMd. Jakir Hosen
81% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst of pie slices, with each slice filled by its corresponding RGB hex value. The visualization is rendered in SVG, positioned at the center of the canvas, and uses React to manage state and render the components. The code employs D3 utilities, including `csv` for data loading, `arc` for generating the arc paths, and `pie` for computing the pie slice angles, all within a React application.

JJean David
81% match
Loading thumbnail…

A Code Baked Layered Cake

This example uses D3.js to draw a layered birthday cake in an SVG canvas. It demonstrates fundamental DOM manipulation by appending SVG shapes such as rectangles, ellipses, paths, and circles to create the cake base, icing, cherries, and candles. The cake is constructed from three distinct layers, each with a different height and dripping icing, with decorative elements added through custom functions that calculate positions. The code directly uses `d3.select` and `.append` methods to build the static illustration without any data-driven interaction.

Ssanthoshdachepally333@gmail.com
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
80% match