Let's Make a Face Part I (.V)

100%

Let's Make a Face Part I (.V)

✓ Published4🌍 Public

Last edited Jan 24, 2020

Created on Jan 23, 2020

This visualization rebuilds a classic smiley face using React and D3, drawing each facial feature as a separate component. The code constructs a yellow SVG face with green eyes, a red nose, and an arc-based mouth, while a transform rotates a hat into position. React components define the hat, eyes, and nose, using D3’s `arc` function to generate the mouth path, and the app renders everything into a root div via `ReactDom.render`.

AI-generated description

I've forked 'Half way towards a smiley face.' to see if I can REMEMBER how to build the smile...

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part I (.V)

A smiling face built from SVG primitives is drawn with yellow head, hat, eyes, nose, and mouth. The React components (`Hat`, `Eye`, `Eyes`, `Nose`, `Mouth`) construct the scene, while D3's `arc` API generates the mouth path. The viewport is fixed at 600×480, and the SVG uses a 960×500 canvas with a translated group. Custom CSS classes style each facial feature, and the code imports `arc` from `d3` and uses ReactDOM to render the app.

RRussell Watson

94% match

Loading thumbnail…

Let's Make a Face Part I

A modular React component builds a smiley face from SVG shapes, with a yellow background circle, two eyes, and a curved mouth rendered via d3.arc. The face’s position, sizes, and offsets are passed as props, while a FaceContainer groups elements around a translated origin. The example demonstrates reusable SVG composition with React and D3 v5.

Sseanware

91% match

Loading thumbnail…

Let's Make a Face Part III (React & D3)

This example shows a yellow smiley face drawn with SVG shapes, including a circular head, two eyes, and a mouth arc. The code combines React for component structure and D3’s `arc` generator to create the mouth path. The face is centered using a `g` transform, with fixed pixel dimensions for the SVG canvas, eye offsets, and stroke width. The project uses React 16.9, ReactDOM 17.0.2, and D3 v6, rendering the final graphic to the DOM.

JJadeJOy

91% match

Loading thumbnail…

Lets Make a Face

This visualization builds a smiley face from primitive SVG shapes using React and D3. It draws a yellow circle with a black border as the face, two small circles for eyes, and a path for the mouth generated with the `d3.arc` API. The code defines reusable React components, such as `BackgroundCircle`, and positions elements relative to a centered transform. The mouth is rendered as an arc with inner and outer radii, spanning a half-circle angle range, demonstrating how to compose geometric forms programmatically.

MM Haris Khan

91% match

Loading thumbnail…

Let's Make a Face Part IV (React Components & ES6)

A yellow smiley face is drawn as an SVG, with a filled circle for the head, two small circles for the eyes, and an arc for the mouth. The face is built using React components, with the background circle and mouth path defined as separate reusable elements. The mouth is generated using the D3 `arc` function, while the SVG is rendered by ReactDOM. All values are computed from constants for width, height, and offsets, reflecting a component-based approach to structuring the visualization.

JJadeJOy

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I (.V)

This example renders a cartoon smiley face with a hat, eyes, nose, and mouth using React and D3 v5. The face is constructed from SVG shapes, including circles for the head and features, and a D3 arc path for the mouth. The component-based React code defines each facial part, such as eyes, nose, and hat, which are then positioned and transformed using SVG groups and React’s JSX syntax. The data is hardcoded visual parameters, not external data, and the visualization is rendered entirely as SVG within an HTML page.

RRahulChaitu999

90% match

Loading thumbnail…

Let's Make a Face Part III

A smiling face rendered with SVG, built using React and D3. The code draws a yellow circle with a black stroke, two black eyes, and a mouth created via the `d3.arc()` generator with specified inner and outer radii and angular range. React components define the SVG elements, while D3’s arc path computes the mouth shape. The face is centered using SVG group transformations.

PPolina Sysoeva

90% match

Loading thumbnail…

Let's Make a Face React

This example renders a yellow smiley face built from reusable React components, including a circular background, two eyes, and an arc-based mouth. The face is centered within an SVG container using a translated `<g>` element. The code uses React 17 and D3 v6, with the mouth path generated via the `d3.arc()` API. The visualization is static, but the component-based structure allows easy customization of facial features and dimensions through props.

JJoseIGuzman

90% match