Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Sep 22, 2025

Created on Sep 22, 2025

This visualization renders a pizza using SVG circles and ellipses layered to depict the crust, sauce, cheese, spinach, purple pepperoni, and chili flakes. Built with D3 v7, the code uses `d3.select` to append elements and JavaScript loops with trigonometric functions to position toppings evenly around the center. Random chili flakes are placed using `Math.random()` to scatter dots across the pie.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This example uses D3.js v7 to draw a stylized pizza as an SVG composition of concentric circles and evenly distributed toppings. The code builds the pizza from a light-brown dough base, tomato-red sauce, and golden cheese layer, then adds spinach ellipses and purple pepperoni circles positioned mathematically using trigonometric formulas, along with randomly placed chili flakes. All elements are created through D3's `select`, `append`, and `attr` chain on an SVG canvas, with toppings positioned using polar coordinates converted to Cartesian coordinates.

Yybross2000@gmail.com

93% match

Loading thumbnail…

Pizza

This example uses D3.js version 6 to render an SVG illustration of a pizza. It layers concentric circles for the base, sauce, and cheese, then positions fixed pepperoni slices, draws eight slice-divider lines using trigonometric calculations, and scatters randomly generated chili flakes. The code demonstrates basic SVG element construction, data-driven point placement, and geometric coordinate generation within D3, all composited on a gradient-themed background.

UUday Kiran

84% match

Loading thumbnail…

Pizza

The pizza visualization depicts a stylized pizza built from concentric circles for crust, sauce, and cheese, with five pepperoni slices and a lattice of eight cut lines radiating from the center. Fifteen randomly positioned red dots represent chilli flakes. The code uses d3.select, d3.range, and d3 data joins with SVG circle and line elements to construct the graphic, rendered on a canvas sized 400 by 400 pixels.

UUday Kiran

83% match

Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Ssahithya.voleti@gmail.com

78% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG graphics drawn with D3.js, including two circles and three rectangles whose heights correspond to data values from a JavaScript array. The code uses D3's `select` API to target the SVG element and append shapes, while also utilizing vanilla JavaScript `querySelectorAll` to add click handlers. The visualization serves as a minimal starter template, combining static data-driven bar-like shapes with interactive alert functionality.

LLouisa Penrice

78% match

Loading thumbnail…

Fork of Fork of HTML Starter 2

This visualization displays the CSS named colors as a pie chart, with each slice colored by its corresponding hex value and sized equally. The chart uses React to manage the async loading of CSV data from a GitHub gist, while d3’s `arc` and `pie` generators compute the SVG paths. The rendering leverages React DOM to mount the SVG elements, and the dataset contains 148 rows of color names and hex codes.

LLeonardo Baron

78% 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

77% match

Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart of fruit types with their total weights derived from a CSV file hosted on GitHub. The visualization uses D3 v6 to compute the pie layout with `d3.pie()` and generate slices via `d3.arc()`, while `d3.rollup()` aggregates the raw weight data by fruit. Labels appear at each slice’s centroid showing the fruit name and total pounds, and a legend with color-coded rectangles identifies each category. The SVG rendering also includes custom axis titles for context.

Ssahithya.voleti@gmail.com

77% match