Skip to main content
SimilarExport ZIP
100%

D3 FACE!

✓ Published0🌍 Public
Bbl75d
Last edited Feb 26, 2020
Created on Feb 26, 2020
Forked from HTML Starter

This example draws a simple smiley face using D3.js and renders it as SVG. The visualization shows a yellow circle with black eyes and a mouth, all positioned using fixed coordinates derived from the SVG's width and height attributes. The code uses D3's `select` API to target the SVG element and the `arc()` generator to create the mouth path. The implementation relies on D3 v5.15.0 loaded from a CDN, with all geometric values hardcoded in JavaScript.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3 js

This example shows a simple smiling face constructed from SVG shapes using D3.js version 5. The visualization draws a large yellow circle for the head, two smaller black circles for eyes, and an arc for the mouth, all positioned relative to the SVG canvas dimensions. The code uses D3’s selection API to append circles and a path, with the mouth created via the `arc()` function specifying inner and outer radii and a half-circle angular range. The smiley is rendered directly into an SVG element defined in the HTML, with all styling applied through D3 attribute methods.

Aadmk840
94% 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
93% match
Loading thumbnail…

D3 face

This example renders a stylized smiley face using D3.js version 5 within a React framework, drawing an SVG scene onto a 960 by 500 canvas. The code constructs a yellow circular head, black rectangular goggles with handles, and circular eyes using SVG shape elements, while employing the `d3.arc` API to generate the mouth path. Through D3 selections and attribute chaining, it positions groups and elements relative to the SVG’s center, demonstrating a static, hand-coded vector illustration.

Rreddyakshitha
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with two black eyes and an arc-based mouth positioned relative to the center of the 960x500 viewport. The code explicitly sets circle radii, coordinates, and fill/stroke attributes, while the mouth uses the d3.arc() helper to generate a path with defined inner and outer radii and angle ranges. Static geometric values define the face’s proportions, with no dynamic data or interaction involved.

Jjediknight956
92% match
Loading thumbnail…

D3

A yellow smiley face is drawn on a red SVG canvas using D3.js v6, centered within a 500x500 viewport. The face includes two eyes, brief animated eyebrow movements via `transition().duration()`, and a mouth created with `d3.arc()`. The example demonstrates basic SVG shape creation, attribute manipulation, and animation in a React environment.

VVlad Bogo
92% match
Loading thumbnail…

d3

A minimal SVG rendering of a smiley face, centered within a yellow circle on a black stroke. Built with React and D3 v5, the code uses `select` to target the SVG, `arc` to generate the mouth path, and direct attribute chaining with `.attr` to position the eyes and body. The face is drawn via appended SVG elements—circle nodes for the eyes and face, and a path for the mouth—calculated from the viewport dimensions.

Mmegbridge
92% match
Loading thumbnail…

D3 and SVG smile

This example shows a simple smiling face constructed entirely with SVG shapes, drawn on a red background. The face consists of a yellow circle for the head, two small rectangles for eyes, two circles for pupils, and a black arc for the mouth. The code uses D3 version 6 to select the SVG element, set its dimensions and background, and append the geometric primitives with chained `.attr()` calls. It also uses `d3.arc()` to generate the path data for the smile, demonstrating how D3’s arc generator can be used with SVG paths.

EElena Dreosti
92% match
Loading thumbnail…

Let's make a face with D3

This example uses D3 v5 to render a simple yellow smiley face in SVG, with black circular eyes and a mouth drawn as an arc. The code demonstrates core D3 selection and joining through `select`, chained `.attr()` methods for styling, and the `arc()` generator to create the mouth path. It sets up a group element (`g`) translated to the center of a 960×500 SVG canvas, positions elements with explicit pixel coordinates, and relies on `d3.min.js` from unpkg. The face is static, showing SVG primitives without data binding or interactivity.

AAnuj Saboo
92% match