Skip to main content
SimilarExport ZIP
100%

Smiley face part 1

✓ Published0🌍 Public
MMohamed Ali
Last edited Jul 27, 2022
Created on Jul 26, 2022
Forked from HTML Starter

This example shows a single gray circle centered in an SVG canvas, rendered using React and D3 v7. The circle is positioned statically at the midpoint of the 960×500 viewport, with no interactive data binding. It demonstrates React’s `ReactDOM.render` method to mount a functional component that returns an SVG `<circle>`, while a separate static SVG in the HTML displays two additional unfilled circles. A mouse move handler logs events to the console, but no visual feedback occurs. The rendering relies on React’s virtual DOM and D3’s SVG utilities.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 2

A smiley face remains static and centered, while a single gray circle tracks the mouse movement across the SVG canvas. The React component uses `useState` and `useCallback` to update the circle's `cx` and `cy` attributes on every `mousemove` event, rendering via ReactDOM. The example demonstrates interactive SVG rendering with React and D3 v7, though it does not use D3-specific APIs beyond the imported library.

GGutManuel85
92% match
Loading thumbnail…

Smiley Face Part 1

A single gray circle follows the mouse cursor across an SVG canvas, its position updating live as the pointer moves. The visualization demonstrates React state management with the `useState` and `useCallback` hooks, where mouse coordinates from the `onMouseMove` event drive the circle’s `cx` and `cy` attributes. Rendered via ReactDOM into a root div, the SVG uses D3 v6 for its helper functions, with a fixed 960×500 viewport and a 30-pixel radius. No external data is loaded; the interaction is purely event-driven.

MMark Mburu
92% match
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a single gray circle centered in an SVG canvas, with no interactive behavior beyond its static position. The circle is rendered using React’s JSX syntax inside an `<svg>` element, with dimensions fixed at 960 by 500 pixels. The code imports React and ReactDOM to mount the component, and loads D3 v5 as a dependency, though it does not use any D3 functions. The rendering approach relies on declarative React state and SVG primitives, with the circle’s center coordinates and radius defined as constants.

JJacob Potvin
91% match
Loading thumbnail…

smiley face pt1

This example draws a single gray circle at the center of an SVG canvas, representing the first step of a smiley face. The circle is positioned using hardcoded coordinates and radius values. The code uses React to render the SVG element and d3.v7’s `arc` function, though the arc is not currently utilized. Mouse movement over the SVG triggers a `handleMouseMove` event that logs the cursor’s client coordinates to the console. The visualization demonstrates a minimal interactive setup with React and D3.

Sshre1310
91% match
Loading thumbnail…

Smiley face part 1

This example renders a simple smiley face using SVG circles. It shows a central yellow circle with a black outline, accompanied by two smaller black circles representing eyes, all positioned within a 960 by 500 canvas. The visualization is built with React, leveraging the `react` and `react-dom` libraries, and renders the graphic statically via inline SVG markup in the HTML file. The shape is defined declaratively through SVG elements with specified coordinates and radii, without any interactive or dynamic behaviors.

HHasheef Riyas
90% match
Loading thumbnail…

Smiley Face Part I

A static smiley face rendered with SVG circles uses React 18 to log its presence in the browser console, while D3 v7 is loaded but not actively used for drawing. The markup defines a large yellow circle for the face and two smaller black circles for eyes, all with fixed coordinates and stroke attributes. Although the page includes React and D3 scripts, the visualization itself relies purely on declarative SVG elements without any data binding or interaction logic.

SSRL132
90% match
Loading thumbnail…

Smiley Face Part I

This example uses React to render a simple smiley face as a static SVG graphic. It displays a yellow circle with a black stroke for the head, plus two smaller filled circles positioned symmetrically as eyes. The code draws shapes using D3’s `arc` import, though only SVG circle elements are used. The face is centered on a 960x500 canvas, with eye offsets and radii defined mathematically. React 17 and D3 v7 are loaded via UMD bundles.

PPatrick Asante Owusu
90% match
Loading thumbnail…

Smiley face part 1

This example renders a smiley face using React and D3.js version 6, drawing SVG shapes onto a 960-by-500 canvas. The face consists of a yellow circle with a black stroke for the head, two dark circles for eyes, and a mouth created with D3’s `arc` helper, which defines an annular sector path with specified inner radius, outer radius, and angle range. The React component computes layout constants such as center coordinates, eye offsets, and mouth dimensions, then applies a transform to center the group. The rendering uses static SVG elements without interaction or animation.

Ddjfeld01
90% match