Skip to main content
SimilarExport ZIP
100%

Vamos fazer um rosto com D3.js

✓ Published1🌍 Public
AAlan Santos
Last edited Jun 1, 2022
Created on May 31, 2022

The visualization displays a grid of smiley faces, each generated with randomized facial features using React and D3.js v5. It shows how SVG components can be composed from reusable functional parts like circles for eyes and the background, and D3’s `arc` function for the mouth. The app renders multiple faces simultaneously, varying eye offset, radius, and mouth dimensions via `Math.random()`. Rendering occurs in an SVG container, with each face built from modular React components such as `FaceContainer`, `BackGroundCircle`, and `Eyes`.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello Face

The visualization displays a grid of procedurally generated smiley faces, each with randomized facial features and stroke widths. It demonstrates how React and D3 can be combined to create reusable SVG components, with d3’s `arc` API generating the mouth shapes while React’s component structure handles the face, eyes, and background circle. The faces are rendered as SVG elements, with each face’s properties like eye offset and mouth radius varied randomly to produce unique expressions.

MMATTE-blz
89% match
Loading thumbnail…

D3 Smiley Face

A grid of smiley faces is rendered using React components, with each face composed of SVG circles for the head and eyes and a d3.arc path for the mouth. The layout shows a 6-by-3 array of faces, each generated with randomized values for stroke width, eye offsets and radii, and mouth dimensions. The code uses d3.arc from D3 v6 to compute the mouth path, while React manages the component structure and renders the SVG output.

Lluispee
88% match
Loading thumbnail…

Hello HTML

This example renders a grid of smiley faces, each generated procedurally with randomized facial features. The code uses React components to compose SVG elements like circles and paths, while the D3 `arc` function creates each mouth. It demonstrates how to build reusable, nested visualization components with React and D3 together, rendering 18 distinct faces as SVG output.

Aajardev
88% match
Loading thumbnail…

Lets make a face pt1

A grid of eighteen randomly generated smiley faces is rendered in SVG, each with unique colors, eye offsets, eye radii, mouth widths and radii, and stroke widths. Built with React and D3 v7, the app uses reusable components like `SmileFace`, `Eye`, `Mouth`, and `BackgroundCircle`, with D3’s `arc` generating the mouth path. A custom `getRandomColor` function creates random hex background colors, while D3’s `range` drives the grid layout. Each face is centered in its own SVG container, with random properties passed as props to create visual variety.

SSteven McGrath
87% match
Loading thumbnail…

Multiple Faces (React & D3)

A grid of 18 smiley faces, each randomly varied in eye size, mouth width, and stroke thickness, demonstrates how React components can render SVG primitives while leveraging D3 for geometry. The example uses React to compose reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with D3's `arc` generator defining the mouth path and `range` creating the grid array. Each face is drawn with randomized parameters, showing how declarative UI structure and imperative D3 math can coexist within a single visualization.

SSonja Ek
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a grid of cartoon faces, each with randomly sized eyes, rendered as SVG in a React application. It demonstrates the use of D3 v6’s `arc` generator to construct the smiling mouth path, while React components compose the face from reusable parts like background circles and eye pairs. The data is generated with `d3.range`, and each face is positioned by a centered `<g>` transform. The rendering approach combines D3’s geometry utilities with React’s declarative SVG elements.

XXinya Gao
87% match
Loading thumbnail…

Smile Face Part I

This example renders a grid of smiling faces using React and D3, with each face composed of SVG circles for the background and eyes and an arc path for the mouth. The `Face` component composes reusable subcomponents—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that position elements relative to a centered translation. Randomly generated eye radii, mouth radii, and mouth widths vary each face’s appearance. The code leverages D3’s `arc` generator for the mouth shape and React’s component model to assemble the visualization efficiently.

TTaweewat Somboonpanyakul
87% match
Loading thumbnail…

DS3Viz-SmileyFaceP1

A grid of 18 randomly generated smiley faces fills the screen, each rendered as a yellow circle with black stroke, two eyes, and an arc-based mouth. The example shows how to compose reusable React components to build a data-driven face visualization. It uses D3 v7’s `arc` generator to create the mouth path, while React manages the SVG structure through components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. Random values for eye offsets, radii, and mouth dimensions vary every face.

CCaro Arriaga
87% match