Skip to main content
SimilarExport ZIP
100%

one more time

✓ Published0🌍 Public
Mmauricio-acosta-reyes
Last edited May 6, 2021
Created on May 4, 2021

This example shows a smiley face built from a radial pie chart, where the face’s features are composed of labeled arcs. It uses React components to assemble the face from separate parts like the background circle, eyes, and mouth, while the main radial chart is rendered with SVG paths generated by d3.pie and d3.arc. The pie’s data comes from an array of values, and each arc is filled with a categorical color from d3.scaleOrdinal, with labels placed at the arc centroids. The visualization demonstrates a playful blend of charting and character design, with the face centered in a fixed SVG canvas.

AI-generated description

My take on making a smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part One

This example shows a radial visualization of CSS named colors, rendering each color as a pie slice arranged around a central point. The data is fetched as CSV from a GitHub gist and processed using d3.csv and d3.pie. The SVG output is generated through React components, with `BackgroundCircle` and `Eyes` forming a stylized smiley face overlay, while `DataFetchedRadial` maps each color to an arc using d3.arc. A separate tracker component moves a circle in response to mouse events, though it is not rendered in the final view.

LLorenzo Casbarra
85% match
Loading thumbnail…

Smiley Face Part One

This example displays a static smiley face constructed with React and rendered as SVG. It uses D3’s `arc` function to generate a mouth shape from a pie-like path, while the face outline and eyes are drawn with `circle` elements. The code sets dimensions, offsets, and radii as constants, and computes the mouth’s arc angles from π/2 to 3π/2. The entire graphic is centered using a `g` transform.

Nnj889
83% match
Loading thumbnail…

smiley face

The visualization displays a simple smiley face composed of SVG circles and a d3.arc-generated mouth path. The face is rendered through React components, with randomized values for eye offset, eye radius, mouth radius, and mouth width passed as props to generate a single face. The background circle uses a yellow fill with a black stroke, while the eyes are solid black circles positioned symmetrically. The code imports d3’s arc function to create the mouth shape, and d3’s range utility to map over an array, though only one face is rendered. The SVG is centered using a group transform.

PPUUDI
82% match
Loading thumbnail…

Smiley Face Part II

The example renders a yellow smiley face composed of SVG circles and a d3.arc path, centered within a React component hierarchy. It shows how reusable React components (FaceContainer, BackgroundCircle, Eyes, Smile) compose a static graphic using fixed numeric props for positioning and sizing. The smile employs d3.arc with inner and outer radii and angular extents, while all elements are drawn in a single SVG group translated to the face’s center. No interactivity or data is involved; the visualization purely demonstrates component-based SVG assembly with D3’s arc generator.

11993-INDALKAR
82% match
Loading thumbnail…

Smiley Face Max: React Round 2

This visualization presents a large, stylized smiley face constructed from overlapping SVG circles and a custom arc for the mouth. Built with React and D3.js, it demonstrates component-based rendering where separate modules define the face's background, body, eyes, and mouth. The eyes feature layered circles of varying sizes and colors, creating a complex, cartoonish appearance. The static composition uses D3’s `arc` generator to shape the smile, while React manages the SVG elements and their positioning within a 960x500 canvas.

MMichael Milano
82% match
Loading thumbnail…

smily face p1

This example renders a grid of procedurally generated smiley faces, each built from SVG circles and an arc path. The React code maps over an array of random values to vary the face components’ sizes and positions, while the d3 `arc` API constructs the mouth shape. Each face is drawn within a reusable container that applies a centered translation, with the background circle and eyes defined as separate React components. All visualization occurs client-side in the browser using SVG output.

Sshimos12468
82% match
Loading thumbnail…

Smiley Face Part I

This example renders a smiley face using React and D3’s `arc` generator, with SVG circles for the face and eyes. The mouth is drawn as an arc path, while the background circle and facial features are positioned via D3’s `centerX` and `centerY` coordinates within an SVG group. React manages the component structure, and D3 v7 computes the arc’s path data. The visualization uses static hardcoded values for dimensions and colors, with no data source or interaction.

CChuka Ekwenze
82% match
Loading thumbnail…

Smiley Face Part 1

This example shows a yellow smiley face built from layered SVG shapes, with a black-bordered background circle, two eyes, and a curved mouth. The code uses React components to compose the face from separate SVG elements, while D3’s `arc` generator creates the mouth path and a `d3.symbol` adds a small star shape to the face. The visualization demonstrates a modular approach to building reusable chart components with React and D3 in an SVG rendering pipeline.

Aalexcholmsky
82% match