Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
IIlia Katkovnik
Last edited Mar 7, 2021
Created on Mar 2, 2021

A grid of yellow smiley faces is rendered, each face composed of SVG circles and an arc path to form the mouth. The code uses React with D3.js v6, leveraging D3's `arc` generator to construct the mouth shape and `range` to create multiple face instances. Each face's eye radius is randomized, producing subtle variations across the grid. The example demonstrates composing D3 primitives with React components for declarative visualization.

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 Face Part I

A grid of eighteen yellow smiley faces, each with black outlines, eyes, and a curved mouth, is rendered as SVG. The faces are generated in React and D3 v7, using `arc()` from D3 to create the mouth shapes and `range()` to produce the array of components. Random eye radii vary the faces.

LLai Yi Ohlsen
92% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of fifteen smiley faces, each with randomized eye and mouth sizes, rendered as yellow SVG circles with black outlines. Built with React and D3 v7, the visualization uses reusable components like `FaceCircle`, `Eyes`, and `Mouth` to compose each face. The `Mouth` component leverages D3's `arc` generator to create a curved smile path, while the `FaceContainer` wraps the SVG elements and centers them via a translation transform.

JJulia
92% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomized smiley faces is generated using React components and rendered as SVG. Each face is composed of a yellow background circle, two eyes, and a mouth, with positions and sizes varying per face through JavaScript’s `Math.random()`. The visualization uses d3’s `arc` API to construct the mouth path and React’s `ReactDOM.render` to display the output. Faces are arranged via a `range` from d3, mapping over an array to produce multiple independent instances.

SShashwat Kumar
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
92% match
Loading thumbnail…

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

This example displays a smiling face constructed from SVG shapes, including a yellow circle, two eyes, and a mouth path with a curved arc. Built with React and D3.js v7, it uses the `arc()` function from d3-shape to generate the mouth with specified inner and outer radii and angles. Positioning is handled through SVG transforms, with the face centered on an 960×500 viewport. The code demonstrates proportional sizing by calculating radii relative to the center coordinates and stroke width.

UUzoemeka Okechukwu Innocent
92% match
Loading thumbnail…

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

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

HHarishma Nallala
92% match
Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part I

This example renders a smiley face using React and D3.js, drawing a yellow circle with black stroke as the head, two black eye circles, and a mouth arc. The code uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angular bounds. SVG elements are positioned via a centered `<g>` transform, with constants for eye offset, radius, and stroke width. The visualization shows a static, geometric facial composition without interactivity, built entirely through React components and D3 utilities.

Bbhavani44
92% match
Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a grid of eighteen randomly generated smiley faces, each rendered as an SVG composed of a yellow circular background, two eyes, a mouth, and teeth. The code uses React components for each facial feature and leverages the D3 arc generator to create the smiling mouth shapes. Faces vary in eye radius, mouth radius, smile width, and mouth width, producing a playful collection of distinct expressions. The visualization is built with React and D3 v7, with each face drawn using SVG elements within a transformed group.

Yyz830620
92% match