Skip to main content
SimilarExport ZIP
100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public
Ssolution365
Last edited Sep 25, 2023
Created on Sep 25, 2023

This example shows a yellow smiley face drawn in SVG using D3.js, with its eyebrows animating up and down in a repeating cycle. The face is assembled from circles, rectangles, and a path created with D3’s `arc()` helper, all positioned within a centered `<g>` group. The code uses D3 v7, loaded via UNPKG, and demonstrates `import` of `select` and `arc` from the D3 module. Eyebrow motion is achieved with chained `transition().duration()` calls that alternate the group’s transform attribute.

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 of Create a face with d3.js!

This example draws a yellow smiley face in SVG using D3 v7, centered within a 960×500 canvas. It constructs the face from primitive shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all positioned using transforms and hardcoded coordinates. The code employs D3’s `select` and `arc` helpers, and animates the eyebrows by chaining two `transition().duration(2000)` calls that shift the eyebrow group vertically over four seconds. The rendering is purely SVG, with no external data source.

LLavinaThorat
96% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

A yellow smiley face rendered in SVG with D3.js v7 shows animated eyebrows that bounce up and down. The face is built from basic shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. D3 transitions animate the eyebrow group's transform over two-second intervals, while the geometry is positioned using translation and explicit pixel offsets. The code demonstrates modular imports from the d3 package, specifically `select` and `arc`.

HHarish.G
96% match
Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1
95% match
Loading thumbnail…

Fork of Create a face with d3.js

This example shows a smiley face drawn with D3.js v7 SVG primitives, including a yellow circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The face is centered using a group transformation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` tweening. The code imports `select` and `arc` from D3 and loads the library via UNPKG, demonstrating local ES6 module imports and dynamic SVG attribute updates in a VizHub environment.

KkarthikGT
95% match
Loading thumbnail…

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

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

DDharanitharan-J
95% match
Loading thumbnail…

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

This example shows a yellow smiley face built with SVG, whose eyebrows animate by moving up and down in a repeating two-second cycle. The face is centered using a translation transform on a group element, with circles for the eyes and an arc path for the mouth. The code uses D3 v5’s `select`, `arc`, and `transition` APIs to construct the shapes and drive the eyebrow motion, with dimensions and offsets defined as constants. The animation runs once on load, moving the shared eyebrow group downward, then back to its original position.

SSurajQWERTY
94% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

Nnofferdahl
94% match
Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating upward and downward in a repeating loop. The code builds the face using D3.js v5, appending circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Eyebrow motion is driven by chained `transition().duration()` calls that toggle the group’s translate transform. The visualization demonstrates fundamental DOM manipulation and animation with `d3.select`, `d3.arc`, and SVG element creation.

Fframptonb
94% match