Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of D3 Starter

✓ Published0🌍 Public
Zzakirkhan11
Last edited Sep 18, 2021
Created on Sep 17, 2021

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and an arc-shaped mouth rendered via d3.arc. The code uses D3 v7 selections to append SVG elements, centering a group with a translate transform. Eye spacing, offsets, and radii are defined as variables, while the mouth path is generated from inner and outer radii with specified start and end angles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with blue eyes, animated eyebrows, and a curved mouth forms a stylized face rendered in SVG. The code uses D3 v7 selections to append SVG primitives, and a D3 arc path generator to create the mouth based on specified inner and outer radii and angles. Two rectangles represent eyebrows and use chained `transition().duration()` calls to move them vertically over two seconds before returning. The example demonstrates basic D3 shape generation, SVG group elements for shared eye styling, and timed attribute transitions.

AAsmitha-Sa
89% match
Loading thumbnail…

Fork of D3 Starter

A yellow smiley face rendered in SVG uses D3 v7 selections to build concentric circles for the head, eyes, and pupils, plus an arc-generated mouth. A continuous while loop chains `transition()` calls on the pupil elements, animating their `cx` and `cy` attributes to shift diagonally, then downward, and back to center. The code imports `select` and `arc` from the D3 module, with the mouth path’s shape defined by inner and outer radii and angular start and end values.

DDerrick Mulwa
89% match
Loading thumbnail…

Fork of Fork of Face with d3.js!

This example builds a stylized cartoon face in SVG using D3 v7, rendering a yellow circular head, elliptical eyes, curved eyebrows, and a smiling mouth. The face is centered by translating a group element to the middle of the viewport, with shapes positioned using absolute pixel offsets. The code imports `select` from D3 and uses the `arc()` generator to create the eyebrow and mouth paths, while eye spacing and radii are defined as constants. All visual elements are drawn directly into an SVG canvas without external data.

Mmukundakrishna.r@gmail.com
88% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with black stroke and two blue eyes with black strokes are drawn on an SVG canvas, along with a black arc-shaped mouth and two rectangular eyebrows. The eyebrows animate by moving up and down over time using D3 transitions. The visualization uses D3.js v7 to select the SVG element, append circles, a path, and rectangles, and apply attributes. The arc for the mouth is generated with the D3 `arc` function, and the eyebrow movement uses chained `.transition().attr()` calls over 2000ms durations.

MMithunshanjai
88% match
Loading thumbnail…

Fork of D3-1: Making a face

This example uses D3.js v7 to draw a cartoon face entirely with SVG shapes. It shows a yellow circle head with two black eyes, rectangular eyebrows, and a mouth created using the d3.arc path generator. The code selects the SVG element from the HTML, then appends and positions each shape using attributes like cx, cy, and r, with the arc function defining the mouth's inner and outer radii and angles.

NNikitha123171
88% match
Loading thumbnail…

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

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

SSerena Fang
88% match
Loading thumbnail…

Fork of Fork of D3 Starter

This example uses D3 v7 to draw a simple yellow smiley face in an SVG canvas. It demonstrates basic shape creation and positioning, using `d3.select` to target the SVG element and `d3.arc` to generate the mouth path with specified inner and outer radii and angles. Circles are appended for the face and eyes with fixed radii and coordinates, while the mouth is placed in a translated group. The code shows how to compose SVG primitives with D3’s selection and path-generation APIs.

Mminaadel6600
88% match
Loading thumbnail…

Fork of Fork of Face with d3.js!

A smiling face built with d3.js renders as a yellow circle with elliptical eyes and arched eyebrows, all drawn as SVG shapes on a 960 by 500 canvas. The code uses d3.select and append to construct the face, while d3.arc defines the curved mouth and eyebrow paths. Eyebrows and eyes are positioned with SVG transform translations, and the face is centered using a group element. This example demonstrates basic d3.js v7 shape generation and SVG manipulation in a static, data-free visualization.

Mmukundakrishna.r@gmail.com
88% match