Smile Part 1

100%

✓ Published0🌍 Public

Last edited Jan 10, 2022

Created on Jan 10, 2022

This example draws a static smiley face using raw SVG shapes within a React application. The code renders three circles—a large yellow face with a black stroke, and two smaller black eyes—directly in the JSX markup of the HTML file. It uses React and ReactDOM from CDN links, with D3 loaded but not actively used for any data or simulation. The visualization follows a margin convention through a custom `VizContainer` component, which abstracts the SVG group structure and can display margins via a `showMargins` prop.

AI-generated description

Boilerplate code for a React + D3 visualization with:

CDN links for React, ReactDOM, and D3
Basic React boilerplate
Variables for dimensions and margins
A VizContainer component that:
- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the showMargins={true} prop

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using raw SVG elements inside a React application. The visualization shows a yellow circle with a black outline for the face, plus two smaller unfilled circles positioned as eyes, all defined directly in the markup. The code loads React and ReactDOM from CDN and attempts to render a simple JSX heading into a root div, while the smiley face is drawn separately via an inline `<svg>` tag. It demonstrates basic SVG drawing without any interaction or data-driven mapping.

RRoberto Camberos

93% match

Loading thumbnail…

smiley part 1

This example renders a static smiley face using inline SVG elements. It shows a large yellow circle for the head and two smaller black circles for the eyes, all with thick black strokes. The page uses React and ReactDOM to inject a simple JSX heading into an HTML root element, while the SVG markup is written directly in the index.html file. The visualization is minimal, focusing on basic shape drawing without interaction or data.

Ttdinh09

93% match

Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face drawn with three SVG circles: a large yellow circle for the head and two smaller black circles for eyes, all positioned within a 960 by 500 pixel viewport. The HTML file defines the SVG elements directly in markup, while the React files contain only a minimal “Hello JSX” component that is not rendered. The face itself is created using basic SVG attributes like `cx`, `cy`, `r`, and `stroke-width`, with React 18 and ReactDOM loaded via CDN but not actively used for the visualization.

Wwjnaramore

93% match

Loading thumbnail…

Smiley - Part 1

This example renders a static smiley face using SVG primitives within a React 18 application. It displays a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the SVG markup. The code loads React from a UMD bundle and logs a JavaScript message to the console, while the visualization itself relies solely on SVG circle elements with explicit coordinates and styling, without any interactive or animated behavior.

Eericbleibtnet

93% match

Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using SVG primitives within a React application. The face is constructed from three circles: a large yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The page is built with React 17, loaded via the UMD distribution, and ReactDOM, though the JavaScript file only logs the React objects. The SVG is hardcoded directly in the HTML file, with dimensions set to 960 by 500 pixels. No external data sources or interaction logic are present.

Gguohao77

93% match

Loading thumbnail…

Smiley part 1

This example displays a static smiley face drawn with SVG circles: a yellow face with black outline and two smaller circles for eyes, rendered at 960 by 500 pixels. The HTML page loads React and ReactDOM from unpkg, while the SVG markup sits directly in the body rather than inside the React component tree. The accompanying index.js imports React and ReactDOM, logs ReactDOM to the console, and defines a simple “Hello JSX” component rendered into the root div. The visual itself does not use React rendering for the smiley shape.

Lluisforonda

93% match

Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes. The visualization uses React 18 and ReactDOM to mount a simple “Hello JSX” app, while the face itself is drawn directly in the HTML markup with SVG circle elements, each specifying explicit cx, cy, and r attributes. The page includes CSS for centered text and hidden overflow, and loads the React libraries from CDN.

DDineth-Mudalige

93% match

Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face rendered as a simple SVG graphic. The face consists of three circles: a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the HTML markup. The code uses React 16.9.0 and ReactDOM to mount a separate “Hello JSX” component, though the smiley face itself is plain SVG without React involvement. The rendering approach relies on explicit SVG attributes for positioning and styling, with a viewport of 960 by 500 pixels.

Bbartlomiejkoszek

92% match