Skip to main content
SimilarExport ZIP
100%

FORK 1

✓ Published0🌍 Public
PPKISHON
Last edited Sep 22, 2023
Created on Sep 22, 2023

A yellow circle with black outlines forms a face, featuring two eyes and animated eyebrows that dip down and return over a four-second cycle. A mouth is drawn as an arc path. Built with D3 v7, the SVG elements are selected and appended via `d3.select` and `d3.arc`, while `transition` attributes handle the eyebrow movement.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork sample

A yellow circle with black eyes, eyebrows, and a blue arc mouth forms a simple face. The eyebrows animate upward and then return to their original position over a two-second cycle. The code uses D3 v6 selections and transitions, with `arc` for the mouth path. All shapes are drawn in SVG within a 900x350 viewport, centered by a translated group.

SSravan0818
89% match
Loading thumbnail…

Fork Face

A yellow circle face with black eyes and eyebrows is drawn using D3 selections, with a curved mouth created via the `d3.arc` path generator. The eyebrows animate upward and back down using `transition.attr` over two-second intervals. The example demonstrates importing specific D3 modules like `select` and `arc`, and renders entirely as an SVG with a static yellow background and animated facial features.

MMouniesh
89% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle face with blue eyes, black eyebrows, and a mouth formed by an arc sits centered in an SVG canvas. Two rectangular eyebrows animate upward simultaneously over two seconds, then return to their original positions. The code uses D3 v7 selections, including `d3.select` and `d3.append`, with SVG elements like `circle`, `rect`, and `path`, plus the `d3.arc` API for the mouth shape. Transitions are applied via `.transition().duration()` to animate the eyebrow movement.

AAbishekprabakaran
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
87% match
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
87% match
Loading thumbnail…

Fork of Fork of d3js

A yellow circle face with eyes, eyebrows, and a mouth rendered in SVG animates as the eyebrows move upward and then back down. Built with d3.js v5, the example uses `select` and `arc` to construct the facial features, while `transition().duration()` drives the eyebrow motion. The SVG canvas is 960 by 500 pixels, with elements positioned via transform attributes and styled through a linked CSS file.

FFarhodXoliyarov
87% match
Loading thumbnail…

Forkwithk

A smiling face built from SVG shapes animates its eyebrows upward and downward in a looping motion. Drawn on a yellow circle with black strokes, the face uses separate groups for eyes, eyebrows, and a mouth created with D3's `arc` path generator. The eyebrows animate using the `transition` API with a two-second duration, while the SVG is transformed and centered within a 960 by 500 canvas.

KKeerthana
87% match
Loading thumbnail…

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

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
86% match