Fork of Parcel Sandbox

100%

Fork of Parcel Sandbox

✓ Published1🌍 Public

Last edited May 22, 2023

Created on May 21, 2023

A yellow smiley face rendered as SVG via React, with a black-outlined circle, empty eyes, and a D3 arc path forming the mouth. The example demonstrates composing D3 shape generators with React components, using `d3.arc` to define the mouth’s inner and outer radii and angular range. The face is centered in a 960×500 viewport, with D3 v7 and React 16 loaded from CDNs. It shows how D3’s geometric utilities integrate into a React rendering pipeline without a simulation or data binding.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows a yellow smiley face rendered as an SVG, with black-outlined circular eyes and an arc-shaped mouth. It demonstrates how to build a reusable D3 shape generator—specifically `d3.arc()`—and integrate it with React components. The visualization uses React 16.9 and D3 v6, with the face centered in a 960×500 viewport, and the mouth path is generated from an arc with inner and outer radii. The React component renders the SVG elements directly, while D3 handles the geometry calculations for the mouth.

Ddena burd

90% match

Loading thumbnail…

Fork of D3 Playground

A yellow smiley face rendered as SVG using React, with black circle eyes and a curved mouth drawn via the D3 arc generator `d3.arc()`. The face is centered at 960×500 pixels, using fixed offsets for eye placement and a stroke-width of 10 for the outline. The code mixes React elements for circles with a D3-generated path, and loads React 17, ReactDOM, and D3 v7 from CDN. The rendering happens through `ReactDOM.render` into a root div, with no external data source.

SSanthosh Kumar

89% match

Loading thumbnail…

Fork of Hello HTML

This example creates a yellow smiley face rendered as an SVG using React and D3. The code defines circle elements for the face and eyes, with a mouth path generated by D3’s `arc` generator using specified inner/outer radii and angles. React manages the component structure, while D3 v6 provides the `arc` function for the mouth shape. The visualization demonstrates a simple integration of React and D3 for static, geometric SVG drawing without interactive or data-driven features.

AArmin Mazoochian

89% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple SVG smiley face composed of a yellow circle, two eyes, and an arc-shaped mouth, centered within a fixed 960×500 viewport. Built with React 18 and D3 v7, it uses the `arc` generator from `d3-shape` to compute the mouth’s path, while hard-coded `circle` and `path` elements render the facial features. The visualization demonstrates a basic hybrid approach, leveraging React for component structure and D3 for geometric calculations, with all drawing done in SVG.

BBongani Praise

89% match

Loading thumbnail…

Fork of Smiley Face Part II

A React-rendered SVG smiley face fills the browser window, centered with a yellow circular head, black stroke, two offset eyes, and a curved mouth path. The example demonstrates integrating D3's `arc()` generator with React components, using JSX to position circles and a path element. It imports `arc` from d3.v7, computes dimensions dynamically from `window.innerWidth` and `innerHeight`, and renders via `ReactDOM.render` into a root div. The code shows a static visualization without interaction or data binding, purely illustrating geometric composition through declarative React markup combined with D3 shape utilities.

EEthan Black

89% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example displays a simple smiley face rendered as SVG, composed of a yellow circle background, two black eye circles, and a mouth arc drawn with D3’s `arc` generator. The face is built using React components, with the `BackgroundCircle` reusable component and the `App` component setting SVG dimensions and transforms. D3 v7 supplies the arc path, while React 18 handles the DOM rendering. The code defines fixed geometry constants for positioning and sizing, and the eyes are offset horizontally and vertically around the center point.

JJason Summercamp

88% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow smiley face rendered as an SVG inside a React application. It uses D3’s `arc` generator to create the mouth path, while the face’s eyes and outer circle are drawn with basic SVG `<circle>` elements. The code imports React and ReactDOM for component rendering, and D3 v7 for the arc calculation, with all shapes positioned relative to the SVG’s center. The face is static, with no interactivity or animation, and serves as a minimal demonstration of combining React’s declarative JSX with D3’s geometric helpers.

Rraviteja-sqa

88% match

Loading thumbnail…

Fork of D3 with React

This example shows a yellow smiley face rendered as an SVG inside a React component, combining D3’s arc generator with React’s declarative element creation. The face uses D3’s `arc()` function to draw the mouth path, while the background circle and eyes are plain React `<circle>` elements. D3 v7 supplies the arc geometry, and React 17 handles mounting the component into the DOM via `ReactDOM.render`. The visualization is fully static, with no interactions or data binding.

MMahbub hussain

88% match