Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a boba tea

✓ Published0🌍 Public
Bbharathavulapati@gmail.com
Last edited Feb 24, 2025
Created on Feb 23, 2025

This example displays a stylized boba tea cup with a green lid, a red straw, black tapioca pearls, and semi-transparent ice cubes, all rendered as static SVG shapes. The code builds the visualization by appending D3-selected SVG elements—rectangles, ellipses, and circles—positioned relative to a centered group. It uses d3.select, .append, and .attr to set coordinates and styles, with random placement for the boba and ice cubes to distribute them within the cup. The visualization demonstrates basic SVG drawing techniques with D3 v5, relying on hardcoded dimensions and no external data source.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.j

This example demonstrates fundamental DOM manipulation with D3.js by constructing a boba tea cup using basic SVG shapes. The visualization builds a cup, cap, straw, and tea layer with d3 selections and attribute methods, while randomly positioning black circles to represent boba pearls. Using d3.v5, the code appends elements to an SVG container and applies transforms like rotation to the straw. The rendering approach relies on static SVG geometry rather than data binding, showcasing how D3 can create custom graphics through programmatic element creation and styling.

Bbharathavulapati@gmail.com
88% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates how to build a stylized ice cream sundae with D3.js, using fundamental DOM manipulation to append and position SVG shapes. It constructs a bowl from an ellipse, adds scoops as circles, and layers a chocolate drizzle via the `d3.arc` generator. The visualization also includes a cherry with a stem and random sprinkles colored from `d3.schemeCategory10`, showing how to create a complete graphic using only `select`, `append`, and attribute setters on a 960×500 SVG canvas.

NNyakundi Jnr
72% 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
71% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

Cchris.shimotake@gmail.com
71% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

Cchris.shimotake@gmail.com
71% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

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

Fork of Circles with D3

This visualization demonstrates the creation and dynamic styling of SVG circles using D3.js. The code selects an SVG element, sizes it to the container, and binds an array of circle objects to render four circles with distinct positions, radii, and colors. It uses D3’s data binding with `selectAll`, `data`, and `join` to manage the SVG circle elements, along with attribute setters like `attr` for `cx`, `cy`, `r`, and `fill`. The background is set to a light green via inline styling, and each circle receives a fixed opacity of 0.9.

Aanilthapa1.at23@gmail.com
70% match