Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a boba tea

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.

Bbharathavulapati@gmail.com
88% match
Loading thumbnail…

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

This example demonstrates how to construct an animated face using SVG elements and D3.js v5. The visualization builds a face from basic geometric shapes, applying custom styling through CSS classes that define stroke colors and line properties. The code initializes an SVG canvas with fixed dimensions and relies on D3’s selection and data-binding methods to render the face components. The design emphasizes round line joins and caps for a smooth, illustrated appearance, with a compact layout that avoids page scrolling.

CChromosin13
84% match
Loading thumbnail…

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

This example uses D3.js to compose a simple SVG scene with circles, rectangles, and paths, mixing raw shapes with grouped elements. It demonstrates styling via CSS classes, including black strokes on lines and paths with rounded joins. The code appends a circle to an existing SVG using D3’s `select` and `append` methods, while the HTML markup defines the initial geometry and coordinates. Rendering relies on the SVG DOM, with a minimal React setup noted in the README.

PPuja229
83% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a static pond scene composed of SVG primitives. The visualization depicts a house, tree, ducks, lily pads, clouds, a sun, and water, each created using D3’s `select` and `append` methods to construct and style shapes like rectangles, circles, ellipses, and polygons. Positioning and visual properties such as fill colors are set via chained `.attr()` calls, while an external CSS file defines class-based styling. The scene is drawn entirely through SVG elements, with no interactivity or animation, showcasing how D3’s core API can be used for basic graphics composition.

Mms744311@gmail.com
82% match
Loading thumbnail…

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

This example demonstrates how to build a simple animated face using D3.js v5, where a green triangular face with eyes and a curved mouth is rendered as static SVG elements. The code explicitly sets the polygon points, circle positions, and path arc for the mouth, while the D3 `select` and `append` methods handle DOM creation. The visualization focuses on fundamental DOM manipulation and attribute binding, using a fixed data-driven approach with no external data sources. The rendering relies on SVG shapes inside a centered group, with dimensions derived from the SVG element’s attributes.

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

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a cartoon smiley face from SVG elements, including a circle for the face, white eyes, colored eyebrows, a nose, mouth, ears, hair, and teeth. The code uses d3.select to append and style each shape with class-based CSS transformations. It relies on D3 v5 via a CDN link, rendering entirely in SVG without data binding, instead showcasing direct element creation and attribute assignment as a beginner-friendly exercise.

SSomu1433
82% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This example demonstrates fundamental DOM manipulation with D3.js by constructing a static smiley face out of SVG elements, including eyes, pupils, eyebrows, a nose, ears, glasses, blush circles, a mouth, teeth, and a beard. The code uses d3.select to create and style each shape, d3.arc to generate the nose and mouth paths, and a data join with d3.selectAll to bind an array of numbers to rectangular teeth. The purple face, black features, and red glasses are rendered entirely in SVG, with fixed coordinates and transforms, showing how D3 can build complex graphics through direct attribute manipulation.

NNiharika-Guthikonda
82% match
Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The face, composed of circles, ellipses, and a path-based mouth, is assembled through chained `append` calls and coordinate transformations. The most prominent behavior is the animated eyebrows, which move up and down using a `transition().duration(2000)` sequence. This example showcases D3’s core API for selecting elements, applying transforms, and creating simple timeline-based animations without any external datasets.

Ssaiyogesh9911@gmail.com
82% match