D3 Exercise - Smiley

100%

D3 Exercise - Smiley

✓ Published1🌍 Public

Last edited Nov 3, 2020

Created on Nov 3, 2020

This example renders a smiling face built from basic SVG shapes, centered within a 950×400 viewport. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth using the `d3.arc` generator. The code imports `select` and `arc` from D3 v6, applies geometric transforms to position the face, and demonstrates fundamental SVG composition within a React project. Source data is hardcoded rather than loaded externally, with all styling handled through inline attributes.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Assignment (D3)

This example uses React 17 and D3 v6 to draw a smiley face in an SVG. The face is constructed from a yellow circle for the head, two eye arcs created with `d3.arc`, a mouth arc, and a horizontal line for the teeth, all positioned around the center of the 960x500 viewport. The code defines each shape with D3’s `arc` API, using inner and outer radii and start/end angles, then renders them as SVG paths within a transformed group. The data is hardcoded in the JavaScript, with styling applied via SVG attributes.

EElvira Nassirova

92% 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

91% 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

91% match

Loading thumbnail…

Smiley Beginner D3

This example displays a simple smiley face composed of SVG shapes: a yellow circle for the head, two small circles for eyes, and a curved arc for the mouth. Built with React and D3 v7, it uses the `arc()` generator to define the mouth’s path with specified inner and outer radii and angles. The head and eyes are drawn with React’s `<circle>` elements, while coordinates are calculated relative to the center of the 960×500 viewport. Rendering occurs via ReactDOM, with D3 loaded alongside React.

ZZoe Ferencova

91% match

Loading thumbnail…

Making a Smiley Face with D3

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.

Jjjacobatandover

90% match

Loading thumbnail…

D3.js - Smiley Face

A yellow smiley face drawn entirely with SVG elements, including circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered within a 960×500 SVG canvas using D3.js selections and transformations. Constructed with the `select` and `arc` APIs from d3.v6, the code demonstrates manual positioning through `translate` attributes rather than data binding. The static visualization uses no external data source, relying instead on fixed dimensions and offsets defined as constants.

FFaris Sufyan

90% 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

90% match

Loading thumbnail…

Smiley face

This example creates a simple smiley face using D3.js and SVG. It draws a yellow circle for the face, two black circles for the eyes, and a mouth using an arc generator with specified inner and outer radii. The code uses D3 selections from the `d3` module, including `select` and `arc`, to create the shapes. The visualization is rendered in a React starter template with a fixed SVG size of 860 by 400 pixels.

Kkaviya-ds

90% match