Skip to main content
SimilarExport ZIP
100%

d3-vis

✓ Published1🌍 Public
Ssandeep manepalli
Last edited Mar 13, 2021
Created on Mar 13, 2021
Forked from HTML Starter

This example renders a stylized yellow face composed of SVG circles and a D3-generated mouth arc. The React component hierarchy—FaceContainer, BackgroundCircle, Eyes, and Mouth—positions elements via a translated coordinate system. The mouth uses d3.arc with explicit inner and outer radii plus start and end angles. Static props define all dimensions, and ReactDOM renders the composition into the DOM.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Viz 1

This interactive face built with React and D3.js v7 renders a yellow circular head with black stroke outline, two eyes, and an arc-based mouth using SVG. The visualization uses D3’s `arc` generator from the `d3` module to construct the mouth path, while custom React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) organize the SVG elements. The code defines parameters like `eyeOffsetX`, `mouthRadius`, and `strokewidth` to control the face’s geometry, all within a fixed 960×500 viewport.

JJohn H
90% match
Loading thumbnail…

d3 intro

This example displays a yellow and red SVG face built with React and D3. It constructs a circle for the head, two offset circles for eyes, and a mouth path generated using the `d3.arc()` API with specified inner and outer radii and start/end angles. React renders the SVG elements, while D3 handles the arc geometry for the mouth.

Mmarrue15
89% match
Loading thumbnail…

Vis Playground

This example shows a simple cartoon face rendered as an SVG using React components and D3 shape primitives. The face consists of a yellow background circle, two black eyes positioned symmetrically, and a red mouth drawn with the d3.arc path generator. The React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—compose the SVG hierarchy, with FaceContainer applying a translate transform to center the drawing. ReactDOM renders the App component into the DOM, while D3’s arc API generates the mouth’s path data, demonstrating a hybrid React-D3 workflow.

PPaulDFPV
88% match
Loading thumbnail…

Hello HTML

This example renders a smiling face composed of SVG shapes, including a yellow background circle, two eyes, and a mouth created with a D3 arc path. The face is built from reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that accept props for positioning and sizing. The FaceContainer establishes an SVG coordinate system centered at a specified point, while D3’s `arc` generator defines the mouth’s curved shape. The visualization demonstrates how React and D3 can be combined to create declarative, parameterized graphics.

Ttatpiras
88% match
Loading thumbnail…

D3

A smiling face built from SVG shapes, rendered with React components and D3’s `arc` generator for the mouth and nose. The face is centered via a `g` transform, with a yellow background circle, two eye circles, and an outlined smile path. D3 v7 computes the arc paths, while React 17 manages the component hierarchy and SVG rendering. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting size or offset props to control the face’s geometry.

SShasvathan Pathmanaban
88% match
Loading thumbnail…

D3.js

This example uses SVG and D3.js v5 to render a simple face composed of a yellow circle, two black eye circles, and a mouth drawn with an arc path. The circle is centered using a translated group element, while the eyes are positioned relative to the SVG’s width and height. The mouth is generated with D3’s `arc()` helper, specifying inner and outer radii and start and end angles. The code relies on d3-selection and d3-shape APIs, with data-driven attributes set explicitly rather than bound to a dataset.

Bbilalaamer
88% match
Loading thumbnail…

D3.js Face

This example uses D3.js and React to render a simple, stylized face in an SVG. It draws a large yellow circle for the head, two black circles for the eyes, and a smiling mouth created with the `d3.arc` path generator, all centered within a 960×500 viewport. The code explicitly sets the head’s radius based on the SVG’s height, while the eyes and mouth use fixed pixel offsets and arc angles. The visualization demonstrates basic SVG shape creation and geometric positioning with D3’s `select` and `attr` methods.

Ssamwatersw15
88% match
Loading thumbnail…

D3

A cartoon yellow face is rendered as a reusable React component, assembled from separate SVG parts for its background circle, eyes, and mouth. The code builds each facial feature as an independent React component, then composes them in an `App` component using a `FaceContainer` that centers the drawing within an SVG canvas. The mouth uses the D3 `arc` generator to create a U-shaped smile, while the eyes are simple circles offset from the center, and the face’s dimensions are calculated from the viewport height. All drawing occurs via SVG within a React framework, with D3 v6 providing the arc path calculation.

KKenGondor
87% match