Fork of D3 and React Smiley

100%

Fork of D3 and React Smiley

✓ Published1🌍 Public

Last edited Apr 7, 2021

Created on Apr 7, 2021

This example demonstrates a modular React component approach to rendering a smiley face using SVG. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` sub-components, with the mouth drawn using D3’s `arc` generator with specified inner and outer radii and start/end angles. The face is positioned within an SVG container via a `<g>` transform, and all visual properties—such as eye offset, radius, and stroke width—are passed as props from the top-level `App` component. React renders the SVG declaratively, while D3 handles the geometric path calculation.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a modular, reusable smiley face built as a React component hierarchy, composed of separate circle and arc elements for the background, eyes, and mouth. It demonstrates how to combine React’s declarative component model with D3’s `arc` generator to produce SVG shapes. The `Face` component assembles the `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with all geometry controlled via props such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius`. The resulting SVG is rendered to the DOM using `ReactDOM.render` with fixed pixel dimensions.

KKonstantinos Kotsiaridis

94% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a modular, component-based smiley face built with React and rendered as SVG. The face’s features are separated into reusable components—FaceBackground, Eyes, and Mouth—each accepting props for size, position, and styling. The mouth uses D3’s `arc` generator to create a curved path, while the face background is a simple circle with a yellow fill and black stroke. The app assembles these components in `index.js`, passing fixed dimensions and coordinates to create a single centered face on a 960×500 canvas.

MMateus Marodim

93% match

Loading thumbnail…

Fork of Smiley Face (React and d3)

This example shows a stylized smiley face built with React and D3, rendered as SVG. The face is composed of separate React components for the background circle, eyes, and mouth, all positioned within a centered group. D3's `arc` function generates the mouth path, while the eyes use hardcoded circle coordinates. The code uses React 16 and D3 v6, with styling applied through a simple CSS file.

DDouglas J Dougan

93% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face built with React and D3, rendered as SVG shapes. The code combines React’s component model with D3’s `arc` generator to draw the mouth as a path, while circles define the face, eyes, and stroke. It uses fixed numeric constants for dimensions and positioning, and renders the entire composition inside a single SVG element. The example demonstrates an idiomatic hybrid approach where D3 handles geometry generation and React manages the DOM updates.

BBurak Senel

92% match

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example renders a smiling face as a reusable React component, composed of separate SVG elements for the background circle, eyes, and mouth. The mouth uses d3’s `arc` generator to create a curved path based on configured radius and width values. All shapes are drawn in SVG within a single `<g>` container that translates the drawing to the center of a 960-by-500 viewport. The code explicitly defines constants for dimensions and positions, demonstrating a modular, parameter-driven approach to building simple visualizations with d3.v7 and React 17.

AAmir

92% match

Loading thumbnail…

Fork of smiley face refactoring into react components

This example demonstrates a modular React approach to rendering a smiley face using SVG. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` components, each receiving explicit props for positioning and sizing. The `FaceContainer` renders the SVG wrapper and a translated `<g>` group, while `Mouth` uses `d3.arc` to generate a path for a smile. Hardcoded offsets from earlier versions are replaced with configurable numeric props passed from a top-level `App` component, which renders the face into the DOM via `ReactDOM.render`.

Ddmr

92% match

Loading thumbnail…

Fork of Smiley Face Part III

This example builds a smiley face entirely with React and D3.js, rendering SVG components. It defines React components for the face’s background circle, eyes, and mouth, with the mouth drawn using the D3 `arc` function to create a precise arc path. The SVG canvas is 960 by 500 pixels, centered with a yellow circle, black stroke, and positioned eyes and mouth via transforms and offsets. The code uses ReactDOM to render the composed `App` component into the HTML root element.

AAga Domanska

92% match

Loading thumbnail…

Fork of Fork of smiley face modules

This example renders a modular smiley face using React components and D3’s arc generator. The face is assembled from reusable parts—background circle, eyes, and mouth—drawn as SVG elements within a container. D3’s `arc()` function creates the mouth’s path with specified inner and outer radii and angle ranges. The face’s dimensions, eye offsets, and mouth radius are passed as props, demonstrating a component-based approach to data-driven SVG visualization.

EEkuremaro

92% match