Skip to main content
SimilarExport ZIP
100%

Making a Smiley Face with D3

✓ Published2🌍 Public
Jjjacobatandover
Last edited Jul 4, 2021
Created on Jul 4, 2021

This example shows how to build a smiley face using React, SVG, and D3. It renders a yellow circle for the face, two smaller circles for the eyes, and a smile created with the `d3.arc` function from the `d3-shape` module. The code uses JSX to define the SVG elements and JavaScript to compute the arc path, with D3’s arc generator handling the start and end angles for the mouth. The face is centered using a translation transform based on computed dimensions.

AI-generated description

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

See also React Starter.

Half way towards a smiley face -- we used CSS to make the margins and the colors.

We used SVG to make the circles.

Feeling frustrated that we couldn't use math to define the DOM structure and use JSX to write HTML in JS and math from JS

Using React, we used JSX to allow us to include HTML in JS

In order to get the smile, we need to use an arc feature, but there's no such element in SVG. So we need to use D3.

We can use d3-shape to get the arc

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Smile Face

This example shows a yellow smiley face drawn using D3.js and React with SVG rendering, featuring two eyes and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the facial features, positioning circles for the eyes and a path for the mouth on a 960×500 canvas. The face is centered via a translation transform, with all shapes styled using SVG attributes like `fill`, `stroke`, and `r`.

Ttenghaoman
94% match
Loading thumbnail…

Creating a Smile with D3

This example shows a smiling face built from SVG shapes using D3 version 5 with React. It draws a yellow circle with black strokes for the head, two smaller circles for eyes, and a D3 arc path for the mouth. The code demonstrates D3 selections, attribute manipulation, and the `arc` generator, with positions computed from the SVG dimensions and helpers like `eyeRadius` and `eyeSpacing`.

GGustavo Maciel
94% match
Loading thumbnail…

Smiley face

This example uses React and D3 v6 to render a smiley face as an SVG. The face is composed of a yellow circle for the head, two smaller circles for eyes, and a mouth drawn with a D3 arc path generator. The code positions the head and features relative to calculated center coordinates, with the arc’s inner and outer radii defining the mouth’s thickness and its angles creating the smile. All shapes are centered within a 960×500 viewport using a translated group element.

KKibegwa
94% match
Loading thumbnail…

Smiley Face Part 1

This example builds a smiley face using React and D3, rendered as an SVG. It shows a yellow circle with a black border, two black eye circles, and a curved mouth created with the d3.arc function. The face is centered on a 960x500 canvas, with all shapes positioned using JavaScript calculations for offsets and radii. React manages the SVG element structure, while D3 provides the arc path generator for the mouth.

IIvan
93% match
Loading thumbnail…

Smile face in React and d3

This example renders a yellow smiley face as a static SVG graphic using React and d3. The composition combines a large yellow circle for the face, two smaller circles for eyes, and an arc path for the mouth, all centered within a 960×500 viewport. The code constructs the mouth with `d3.arc()`, using specified inner and outer radii and angular start/end points. React manages the DOM rendering through `createRoot`, while d3.v7 provides the arc generator and SVG elements are declared directly via JSX.

AAlexander Maina
93% match
Loading thumbnail…

Smiley Face

This example renders a classic smiley face as an SVG graphic using React and D3. The code constructs a yellow circle for the face, two smaller circles for the eyes, and leverages the D3 arc generator to define a mouth shape. The visualization is built with the ReactDOM library, while D3’s `arc()` API specifies the mouth’s geometry via inner and outer radii and start/end angles. The face is centered within a fixed viewport, with all dimensions and offsets declared as constants.

TTarek719
93% match
Loading thumbnail…

Smiley Face Part 3

This example demonstrates how to draw a smiley face using React and D3. It renders a yellow circle with black stroke for the face, two black eyes, and a mouth created with the `d3.arc()` path generator. The SVG elements are positioned using a centered `<g>` transform, with eye and mouth coordinates computed from fixed offsets and radii. The code uses React 16.9, D3 v5, and renders to SVG.

ZZachary Horvath
93% match
Loading thumbnail…

Smiley Face Part 1

This example renders a basic smiley face using React and D3 v7, drawing SVG shapes on a 960×500 canvas. It shows a yellow circle with a black stroke for the head, two black eye circles positioned symmetrically, and a smile created with the `arc` generator from D3. The arc uses inner and outer radii with start and end angles to form a mouth shape. All geometry is computed from center coordinates, radius, and offset variables, then transformed into place using an SVG group element.

AAriana
93% match