How you doing ?

100%

How you doing ?

✓ Published0🌍 Public

Last edited Sep 24, 2020

Created on Aug 29, 2020

This interactive visualization, titled "How you doing?", is a playful homage to a smiley face rendered as a static SVG graphic. Built with React and D3, it displays a large red circle with black stroke, two eyes, and a curved mouth drawn using a D3 `arc` function. The eyes are interactive, triggering a JavaScript `alert` popup that asks the viewer how they are doing. Additional SVG `rect` elements form the eyebrows and other facial features, with all positioning calculated relative to the canvas center. The composition uses D3's `arc` API to generate the mouth's path, demonstrating a hybrid of D3 geometry within a React component.

AI-generated description

Joey Smiley Face.

MIT Licensed

Similar vizzes

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…

interactive react

A stylized smiley face rendered as an SVG in React, using D3's `arc` generator to create the mouth path. The face is composed of a yellow circle with a blue stroke, two black eyes positioned symmetrically, and a semicircular mouth. React components define the background circle and face elements, while D3 v6 handles the arc calculation, with all shapes centered via SVG transformations.

RRuanzhenglin

82% match

Loading thumbnail…

[DataViz] Hello HTML

This example renders a stylized smiley face as an SVG using React and D3. It combines D3’s `arc` generator to create the mouth and a half-circle for the left eye, while drawing the head, right eye, and stroke with React markup. The face is centered on a 960×500 canvas, with the mouth positioned via angular coordinates and the left eye offset and rotated. The code imports only the `arc` function from D3, leaving the rest of the visualization as explicit React elements.

AAga Domanska

82% match

Loading thumbnail…

HTML Starter

This visualization displays a cheerful smiley face composed of a yellow circular background with black strokes, two eyes, a mouth drawn using D3's arc generator, and decorative flower-like polygons positioned around the face. The React-based code constructs the SVG scene using reusable components like BackgroundCircle, Eyes, and Mouth, while the Facecontainer manages the SVG dimensions and centering. D3 v7 provides the arc path for the mouth, and linearGradient fills add red-to-yellow color accents to select shapes.

Pppal41366@gmail.com

81% match

Loading thumbnail…

Hello HTML

This example renders a simple smiley face using React and D3.js, drawing SVG shapes on a yellow circular background with black stroke. The face features two eyes and a mouth created with the `arc()` generator from D3, positioned via a group transform. React manages the component structure and rendering into the DOM, while D3’s arc API defines the mouth’s inner and outer radii and angles. The result is a minimal, interactive-free visualization demonstrating how to combine React’s declarative UI with D3’s geometric utilities for static SVG output.

BBrendaQu

81% match

Loading thumbnail…

Sharanya_11597311

This interactive smiley face visualization uses React to render a cartoon-like face composed of layered SVG shapes, including circles for the eyes, an arc-based mouth, and elliptical ears. The face is drawn using D3’s `arc()` generator for the mouth and eye/ear paths, while custom line elements create subtle facial details. The rendering relies on React 17, D3 v7, and SVG transforms to position each component around a central coordinate system. The design demonstrates how D3 geometry helpers can be combined with React’s declarative JSX markup to construct a playful, static illustration without external data.

SSharanyaSriram

81% match

Loading thumbnail…

Smile face

This visualization draws a classic smiley face using D3’s `arc` generator for the mouth and SVG circles for the head, eyes, and outline. The face is centered on a 980×620 canvas, with a yellow circle, black eyes, and a filled arc representing the smile. React renders the SVG elements declaratively, while D3 v7 handles the arc path computation. The code uses degree-to-radian conversion to define the mouth’s start and end angles, creating a clean, symmetrical cartoon face with no interactivity or data input.

RRohit Singh

81% match

Loading thumbnail…

DataViz D3

This example renders a simple smiley face using React and D3 within an SVG canvas. It shows a yellow circle head with two black eyes and an open mouth outlined as an arc. The visualization uses D3’s `arc()` generator to compute the mouth path, with static coordinates for the eyes and face. React manages the component structure, while D3 v5 provides the shape-drawing API, all displayed through SVG elements in a fixed 960×540 viewport.

Kkdaily16

81% match