Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
SSiva Srinivasa Reddy Yakkanti
Last edited Feb 12, 2025
Created on Feb 12, 2025

This example shows a smiley face with animated eyebrows, built entirely with D3.js v5 in a React component. The face is rendered on an HTML5 Canvas using the Canvas 2D API, with `ctx.arc` drawing the head and `ctx.fillRect` creating random sprinkles. The code demonstrates fundamental DOM and canvas manipulation, using React’s `useEffect` hook to execute drawing logic once on mount. No data source is used; it relies purely on hardcoded shape positions and random color generation for decoration. The result is a playful static illustration of basic graphics programming.

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 Fork of Let's make a face with D3.js!

This interactive D3.js example demonstrates fundamental DOM manipulation by creating a smiley face with animated eyebrows. The visualization renders an SVG face with circular eyes, a curved mouth using the `d3.arc` API, and eyebrows that move position. Built with React and D3 v5, the code constructs the face geometry using constants for eye offset, radius, and mouth dimensions. The mouth is drawn as an arc between specified angles, while the overall composition is centered within an 850x455 pixel SVG canvas. The example showcases how to combine D3's shape primitives with React's component architecture for dynamic visual elements.

JJasvitha Allamsetty
93% match
Loading thumbnail…

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

This example shows a static SVG smiley face with animated-looking features, including pink face, red eyes with black pupils, white eye arcs, purple ears, and a black mouth created using D3.js arc generators. The face is built with React components that use D3 v5's `arc()` API to construct the mouth, eye, and ear paths, while circles, ellipses, and lines handle the other facial elements. The code demonstrates fundamental DOM manipulation through D3.js within a React framework, with all coordinates and dimensions defined as constants before being rendered as SVG elements.

Mmanjushayarreddu
92% match
Loading thumbnail…

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

This example shows a static smiley face built with React and D3.js v5, rendered as SVG. The face consists of a yellow background circle, two black eyes positioned symmetrically, and a smile created using the D3 `arc()` generator with specified inner and outer radii. All shapes are defined as React components that receive numeric props for dimensions and positioning. The drawing is centered within an SVG viewport using a group transform, with the face’s radius derived from the viewport height minus stroke width.

AAdaman32
91% match
Loading thumbnail…

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

This example shows a static smiley face drawn as a single SVG circle, centered within a 960×500 viewport. It demonstrates fundamental DOM manipulation with D3.js v5, loading the library from a CDN while also including React 16.7. The code defines circle coordinates and radius as constants, then renders the element via React’s `createElement` structure. Although the project title mentions moving eyebrows, the provided code only renders the basic face without animation or additional facial features. The SVG output is styled with a full-bleed body and hidden overflow.

JJohn H
91% match
Loading thumbnail…

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

This example shows a smiling cartoon face built with D3.js v5, featuring animated eyebrows that move up and down over time. The face is constructed from SVG primitives, including a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and a mouth drawn using an arc path. The code uses D3’s `select` and `arc` APIs, along with chained `transition` calls to animate the eyebrow position. Rendering is set up in a React-free HTML page with an SVG canvas, though the framework metadata indicates React integration is possible.

JJOSHUA BUSINGE
91% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example shows how to build a stylized smiley face using D3.js and React, with a playful mix of SVG shapes layered onto a yellow circle. It demonstrates the rendering approach by combining static HTML/SVG markup with dynamic D3 selections, using `d3.select` to append and style elements like ellipses, rects, and an arc path for the mouth. The code also imports the `arc` function from D3 to generate the mouth's curved path, while React handles the component structure and D3 manages the visual updates. The result is a fun, colorful illustration of basic shape composition and coordinate positioning.

SSai Hemanth Babu Sunkari
91% match
Loading thumbnail…

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

This example renders a smiling cartoon face as a static SVG scene, but adds a looping animation that moves the eyebrows up and down over time. The face is constructed using D3.js primitives: a yellow circle for the head, smaller circles for the eyes, rectangles for the brows, and a path generated with `d3.arc` to form the mouth. The code uses D3 v5’s selection and transition API to animate the eyebrow group’s transform attribute, creating a simple, expressive effect.

SSaiSree0122
91% match
Loading thumbnail…

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

This example creates a smiley face in an SVG canvas, with animated eyebrows that move to express different emotions. It demonstrates fundamental DOM manipulation and data binding using D3.js v5, specifically leveraging the `select` method to target SVG elements and update their attributes. The face is constructed entirely in code rather than from external data, and the animation is achieved by repeatedly setting position attributes on the eyebrow shapes.

Ggabcee
91% match