Skip to main content
SimilarExport ZIP
100%

Fork of Hi vizhub Smiley Face Part II

✓ Published2🌍 Public
RRuanzhenglin
Last edited Apr 8, 2021
Created on Apr 8, 2021

This example displays a simple smiley face composed of a yellow circle with a blue stroke, two eyes, and a curved mouth, all rendered using React and D3.js within an SVG. The visualization centers the face using a translated `<g>` group, while the mouth is generated with the `d3.arc()` function using specified start and end angles. The code imports `arc` directly from D3 v6 and uses React components to define each facial feature, demonstrating a functional approach to combining React's declarative UI with D3's geometric utilities.

AI-generated description

Half way towards a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hi vizhub Smiley Face Part V

This example builds a smiley face from modular React components, rendered as SVG shapes. A yellow circle with a blue stroke forms the head, while two black circles serve as eyes and an arc generated with d3.arc creates the mouth. The code imports React and ReactDOM to mount the app and relies on D3 v6 for the mouth’s arc path geometry. All proportions, such as radius and offsets, are defined as constants in index.js, and the components receive them as props.

RRuanzhenglin
94% match
Loading thumbnail…

Fork of Fork of Fork of Hi vizhub Smiley Face Part VI

This example shows a modular, React-based smiley face composed of reusable SVG components for the background circle, eyes, and mouth. The face is drawn using D3’s `arc` generator to create the mouth path, with all geometry parameterized by props for position, size, and stroke width. A `FaceContainer` wraps the SVG and applies a translation transform to center the drawing. The code demonstrates a component-driven approach to D3 visualization within a React framework, rendering static SVG without data binding.

RRuanzhenglin
94% match
Loading thumbnail…

Hi vizhub Smiley Face Part I

This example displays a yellow smiley face with blue eyes and a curved mouth, centered on an SVG canvas. The face is built using React components that render SVG circles and a path, with D3’s `arc` generator defining the mouth’s shape from specified start and end angles. The code uses React 17 and D3 v6, positioning all elements relative to the canvas center via a translation group.

RRuanzhenglin
92% match
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face using React and D3 v7, with an SVG drawing of a circular head, two eyes, and a curved mouth. The face is built from primitive shapes: circles for the head and eyes, and a D3 `arc` generator for the mouth, which is positioned using an inner and outer radius with angular start and end points. The visualization is centered via an SVG `<g>` transform and uses static, hardcoded data, demonstrating a simple, declarative approach to combining React components with D3’s geometry utilities.

TTchea JiaWei
92% match
Loading thumbnail…

Fork of Smiley Face Part II

This example displays a classic smiley face rendered as an SVG graphic, with a yellow circular head, two black eyes, and a curved mouth drawn using an arc path. The visualization is built with React and D3 v7, using the `arc` function to generate the mouth shape from specified inner and outer radii. The face is centered on the screen and dynamically sized based on the browser window dimensions, with all elements positioned relative to the center point. The code defines constants for eye offset, radius, and stroke width to control the facial features.

JJasmine Ye Han
92% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, rendered as SVG via React components. The example uses d3’s `arc` generator to draw the mouth path, while separate React components define the background circle and two eyes. The face is centered using a translated `<g>` group, with eye positions and mouth radius controlled by numeric constants. The visualization demonstrates how D3’s shape APIs integrate cleanly with React’s component model, producing a static, scalable graphic without interaction or data binding.

Lliuyuchen
92% match
Loading thumbnail…

Fork of Smiley Face Part 1

This is a React-based SVG visualization that draws a smiley face using D3.js and ReactDOM. The face consists of a yellow circle with a black stroke, two eyes, and a mouth arc created using the D3 arc generator with specified inner and outer radii and angle ranges. The SVG elements are positioned using the centerX and centerY coordinates, with eye offset values and a mouth radius defined as constants. The example demonstrates how D3's arc API can be integrated with React for geometric shape rendering.

Bbhavani44
92% match
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face using React components and SVG primitives, with a yellow circle for the head, two black eyes, and a curved mouth. The mouth is generated with the D3 `arc()` generator, which defines an annular sector path based on inner and outer radii and start/end angles. The face is centered within a 960×500 viewport, and all elements are positioned via a `<g>` transform. The code imports the `arc` function from D3 v7 and uses React 16.9 for component structure, while the SVG is drawn directly in JSX.

Pplusbeauxjours
92% match