Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published1🌍 Public
Mmatheus-sa-ferreira
Last edited Mar 16, 2021
Created on Mar 16, 2021
Forked from Smiley Face Part I

This example renders a smiley face using React and D3.js, displaying a yellow circle with black outlines for the face, eyes, and mouth. The face includes two star-shaped pupils created with `d3.symbol()` and `d3.symbolStar`, positioned over white iris circles. The mouth is drawn as an arc using `d3.arc()` with specified inner and outer radii. The visualization is built with SVG elements within a React component, where D3 functions generate the geometric paths for the mouth and star shapes.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and D3. The face is composed of SVG elements, including a background circle, two eye circles, and a mouth arc, all positioned relative to the window center. The code uses D3’s `arc` function to create the mouth path with specified inner and outer radii and start/end angles. React components manage the SVG structure, while D3 v7 provides the geometric calculations. The visualization demonstrates a component-based approach to building a simple chart-like graphic.

AAoibhinnRed
95% match
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and D3.js version 7. The visualization is composed of three separate components: a yellow background circle with a black stroke, two black eye circles, and a mouth drawn with a D3 arc path. The code uses D3’s `arc()` API to generate the mouth’s curved shape, while the face elements are positioned relative to the center of the viewport. The SVG output is sized to match the browser window’s inner dimensions.

JJustin Olson
95% match
Loading thumbnail…

Fork of Smiley Face Part III

This example renders a classic smiley face using React and D3, with a yellow circle for the head, two black eyes, and a smiling mouth drawn as an arc. The visualization is built declaratively with React components that output SVG elements, while the mouth path is generated using D3’s `arc` generator with specified inner and outer radii and angular ranges. The code also defines a commented-out neutral mouth using D3’s `line` generator, though it is not rendered. The final SVG is mounted into the DOM via `ReactDOM.render`.

Hhommrich@web.de
95% match
Loading thumbnail…

Fork of Smiley Face Part II

This example demonstrates a classic smiley face rendered with React and D3, using SVG elements to form the face’s yellow circular head, black outline, and two eye circles. The visualization adapts dynamically to the browser’s window size, centering the face and scaling its radius based on the viewport height. React manages the component structure, while D3’s `arc` module is imported but not used in the visible code. Instead, the face is drawn with plain SVG `circle` elements, with positions and dimensions calculated from fixed offsets for the eyes and center coordinates.

EEmerson Castillo
95% match
Loading thumbnail…

Fork of Smiley Face Part III

This example renders a yellow smiley face using React and D3 in an SVG. The face is centered with two eyes and a semicircular mouth, all drawn with basic geometric shapes and an arc generator. The code uses React 16.9 for component structure, ReactDOM for mounting, and the `arc()` function from D3 v5 to create the mouth path. The face is built with explicit pixel offsets and radius values, and the background circle is positioned using a translation transform.

Ssd2beatles
94% match
Loading thumbnail…

Fork of Smiley Face Part II

This example builds a smiley face visualization with React and D3 v7, rendering the entire face as SVG elements. The code calculates the face dimensions based on the browser window size, then positions a yellow circular head with black stroke, two eye circles at fixed offsets, and a mouth using `d3.arc()` with specified inner and outer radii. The mouth path is generated from a half-circle arc spanning 90 to 270 degrees. React manages the component structure while D3 provides the arc generator for the mouth shape.

Ttshardey
94% match
Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face using React and D3, drawing a yellow circle with black stroke, two eyes, and a mouth as a single SVG path. The face is centered within a 960×500 viewport, with dimensions and positions defined by constants for offsets and radii. The code imports the `arc` function from D3 to generate the mouth’s curved shape by specifying inner and outer radii and start/end angles. React manages the SVG elements declaratively, while D3 v5 handles the geometric computation, with all rendering occurring via SVG markup.

CChang Kai Boon
94% match