Skip to main content
SimilarExport ZIP
100%

Basic Scene

✓ Published0🌍 Public
OONue_Y
Last edited Sep 14, 2022
Created on Sep 8, 2022
Forked from D3 Starter

This example demonstrates how to compose a static cartoon face using React components and D3.js v7. It shows a yellow circle with black stroke as the background, two black eyes, and a crescent-shaped mouth created with the d3.arc() path generator. The FaceContainer component renders an SVG element, positioning all features via a translated group. While the code imports Three.js and creates a Three.js scene object, that WebGL scene is not used for the visible output, which remains purely SVG-based.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example renders a simple cartoon face using React components and SVG. It shows a yellow circle face with two eyes and a mouth, centered on a 960x500 canvas. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, which use d3’s `arc` to generate the mouth path. The face is composed declaratively via React props in `Face.js`, with `FaceContainer` providing the SVG root and coordinate transforms. The main app sets dimensions and offsets directly in JSX, targeting plain HTML via ReactDOM.

Aask4jm
88% match
Loading thumbnail…

First program

This example shows a simple cartoon face rendered with React and D3.js in an SVG. It uses three reusable components—BackgroundCircle, Eyes, and Mouth—to compose a yellow circle with black outlined eyes and an arc-based mouth. The components accept props to control dimensions like radius, eye offset, and stroke width. D3’s `arc()` API generates the mouth path, while React handles component structure and SVG rendering. The face is centered via an SVG `<g>` transform, and all styling is applied through inline SVG attributes.

GGOKULKRISHNA22
88% match
Loading thumbnail…

Let's Make a Face

A yellow cartoon face composed of SVG shapes—two eyes, a mouth, and a circular head—renders in a React application. The code imports `arc` from d3 to generate the mouth path, while static circle elements define the eyes and head. The React component returns an `<svg>` element, positioning all shapes within a translated group using the center coordinates. D3 v7 is loaded globally, and ReactDOM renders the component into the page. This example demonstrates a simple declarative composition of geometric primitives without interactive behavior or external data.

Jjudietrich
87% match
Loading thumbnail…

Lets make a Face with D3.js

This example constructs a simple cartoon face using D3.js v5 in an SVG-based React setup. It shows a yellow circle for the head, positioned at the center of a 960x500 SVG, with two smaller black circles for eyes offset horizontally and vertically. The code uses D3 selections and the `append` method with `attr` chaining to set geometric properties like `cx`, `cy`, and `r`. All shapes are rendered as static SVG elements without interaction or data binding.

Nnick-yadav
87% match
Loading thumbnail…

SVG Fundamentals

This example shows a stylized cartoon face built entirely from SVG primitives, including a yellow circle for the head, two black eye circles, and a curved mouth generated with d3’s arc generator. The face is composed through reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept numeric props for positioning and sizing. The FaceContainer wraps all elements inside an SVG group that translates to the canvas center, while the mouth’s path is computed using d3.arc with specified inner and outer radii and angular ranges. The final rendering relies on React 18 and d3.v7, producing a static visualization without interaction or data binding.

SSerind Joshua McCue
87% match
Loading thumbnail…

lets make a face with d3.js

This example builds a cartoon face in SVG using D3.js v7 and React. It draws a yellow circular head, two black eyes, and a curved mouth path, all positioned within an SVG container. The code uses D3’s `select` and `arc` APIs to generate the mouth’s arc shape, while circles are created via appended SVG elements. The face is centered using a transform, and the rendering relies entirely on static SVG primitives with black strokes for outlines.

Sshatomouimena
87% match
Loading thumbnail…

face

A simple cartoon face is drawn using React and SVG, with a yellow circular background, two eyes, and a smiling mouth. The face is composed of separate React components, each responsible for a part (BackgroundCircle, Eyes, Mouth). The mouth is generated using the `arc` function from the d3 library to create a path with a specified inner radius, width, and angular range. The overall composition is centered and scaled through the `FaceContainer` component.

Ooeohomos
87% match
Loading thumbnail…

Face

This example builds a stylized cartoon face from reusable React components, including a yellow background circle, two eyes, and an arc-shaped mouth. The components are composed in a FaceContainer that centers all elements within an SVG using a transform. The mouth is drawn with the d3.arc() API, which generates the path using specified inner and outer radii and start and end angles. React 18 and D3 v7 handle the rendering, with visual properties like eye offset, radius, and stroke width passed as props to customize the face.

SSergey Shulzhenko
87% match