Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published1🌍 Public
Yybross2000@gmail.com
Last edited Sep 23, 2025
Created on Sep 23, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

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.

Yyazneshpara2@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
85% 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
81% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a basic HTML page that uses D3.js to draw three circles and three rectangles in an SVG container. The rectangles are positioned using hardcoded data from a small array, while the circles have fixed coordinates. The code demonstrates direct SVG manipulation through both D3 selections and native DOM methods, logging elements to the console and adding onclick handlers to each rectangle. The page includes simple CSS styling for the message text and circle appearance.

Gg_ivaska@coloradocollege.edu
80% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes and data binding using D3.js. It appends two circles and three rectangles to an SVG container, with the rectangle heights determined by values from a hardcoded array. The code uses `d3.select` to access the SVG element and `append` functions to create visual elements. Interactive behavior is added by attaching `onclick` handlers to the rectangles via the browser's `querySelectorAll` and `setAttribute` methods.

Cchris.shimotake@gmail.com
80% 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
79% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes created with D3.js and vanilla JavaScript, rendering two circles and three rectangles of varying heights on a blank canvas. The code uses D3’s `select` to append the shapes to an SVG element, with an array `myData` supplying rectangle heights. It also queries all `rect` elements via `document.querySelectorAll` and attaches a click handler that logs a message to the console. The page is styled with CSS, including a large centered greeting and red circles.

HHOURPRIMERA@GMAIL.COM
79% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic pie chart built with D3 version 7, rendering four slices as SVG paths. It uses the `d3.pie()` layout to compute angular data from a simple array of numbers, and `d3.arc()` to generate the path geometry. The chart is centered on a 500×500 SVG canvas, with each slice filled by a color function. The code also includes a linked video tutorial and is styled as a starter template for learning D3.

NNigel
79% match