Fork of Sharmila Chowdary (D3) image.js

100%

Fork of Sharmila Chowdary (D3) image.js

✓ Published0🌍 Public

Last edited Feb 20, 2022

Created on Feb 20, 2022

This example shows a smiling face built from scalable vector graphics, rendered as an interactive SVG in a React application. It uses D3's `arc` API to draw the mouth and positions circles for the head, eyes, and outline, with a pink stroke set as the face’s border. The code demonstrates geometric composition with hardcoded coordinates and dimensions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of Smiley Face, using D3

This D3.js and React example renders a smiley face as a yellow circle with black eyes and a mouth, all drawn as SVG shapes. The code defines reusable React components for the face and eyes, and uses D3's `arc` function to create a path for the mouth. The SVG is centered using a transform, and constants control the circle radius, eye offset, and mouth dimensions. The visualization shows how D3 can be integrated with React to generate vector graphics programmatically.

Sshresthabhi

85% match

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders an emoji-like smiling face with eyes, eyebrows, and an open mouth using React and SVG. The face is drawn with circles, lines, and a path computed by d3’s `arc` generator, all positioned within a transformed group. Dimensions like eye offset, radius, and mouth width are stored as constants, and the full viewport is filled with the SVG using inline styles. The code demonstrates combining React’s component model with D3’s shape utilities for static, declarative visualization.

SSharanyaSriram

85% match

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a stylized smiley face using SVG elements composed through React components, with the D3 arc generator defining its mouth, eyebrows, and ears. The face features pink circular head with layered eyes, a black nose, a red tongue, and curved arcs for brows and lips. Built with React 16.9 and D3 v7, the code uses d3.arc() to create path geometries and React’s declarative JSX to position elements within an SVG canvas, offering a playful demonstration of combining D3’s geometric utilities with React’s component-based rendering.

Kkarumanchimanasa

84% match

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiling face as an SVG graphic using React to define the component structure and D3.js to generate the mouth path. The face is composed of a pink circle for the head, two black circles for eyes, and a D3 arc path for the smile, all positioned relative to the center of a 960 by 500 canvas. The `arc` function from D3 computes the mouth’s curved shape with specified inner and outer radii and angular range. The drawing is created declaratively with React’s JSX syntax, with all coordinates and dimensions defined as constants for easy adjustment.

Sssarowar

84% match

Loading thumbnail…

Fork of smiley

This example renders a stylized smiley face in SVG using React and D3 v7. The face includes a brown-stroked orange circle, white eyes with black pupils, pink cheeks, brown ears and hair-like line segments, and a black arc mouth. D3’s `arc` generator creates the mouth and eye arcs, while React JSX defines the circular and elliptical shapes. All elements are positioned relative to the center of an 840×455 viewport.

JJasvitha Allamsetty

84% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a static SVG smiley face with animated-looking features, including pink face, red eyes with black pupils, white eye arcs, purple ears, and a black mouth created using D3.js arc generators. The face is built with React components that use D3 v5's `arc()` API to construct the mouth, eye, and ear paths, while circles, ellipses, and lines handle the other facial elements. The code demonstrates fundamental DOM manipulation through D3.js within a React framework, with all coordinates and dimensions defined as constants before being rendered as SVG elements.

Mmanjushayarreddu

84% match

Loading thumbnail…

Fork of Fork of Smiling face part 3b

This example shows a smiling face composed of SVG shapes, rendered with React and D3. The face includes a yellow circle for the head, two smaller circles for eyes, and a mouth drawn as an arc using the `arc()` function from D3. The code sets up a React component that returns SVG elements, with the mouth’s path generated from inner and outer radii and start/end angles. D3 v6 and React 17 are loaded via CDN, and the SVG is centered within a 960x500 viewport.

Aadewole-top

84% match

Loading thumbnail…

Fork of Smiley Face Part III

This example visualizes a smiley face using React and D3, rendered as SVG with declarative circle and path elements. It shows a red circular face with yellow strokes, two black eyes, and a smile-shaped arc, centered dynamically within a 960×500 viewport. The code imports the `arc` function from D3 v5 to generate the mouth path, computing inner and outer radii and angular extents. React manages the component state and mounts the SVG via `ReactDOM.render`, while D3 handles the geometric calculations. Static data like eye offsets and mouth dimensions are hardcoded, and the drawing stays fully responsive to the fixed canvas size.

TTarun Kumar Bosupally

84% match