Fork of Viz

100%

✓ Published0🌍 Public

Last edited Feb 25, 2023

Created on Feb 25, 2023

Forked from Let's make a face with D3.js!

A fork of an existing D3.js visualization renders an animated smiley face using SVG primitives, with a yellow head, purple fill, and white eyes. The code uses fundamental DOM manipulation methods like `select`, `append`, and `attr` from D3 v5 to build the face, while `transition().duration()` animates the eyebrows moving up and down over two seconds. The face is constructed from circles, rectangles, and arc paths, drawn on a 960×500 SVG canvas. This example demonstrates basic D3.js shape creation and animation without any external data source.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Viz

A cartoon face rendered with D3.js v5 in SVG animates its eyebrows with chained transitions. The code builds a yellow circular head, two eyes, and a mouth shaped by an arc generator with defined inner and outer radii. Eyebrow rectangles transition vertically up and down over two seconds each, using `selection.transition()` to create a looping bounce. The visualization runs in a React framework on a fixed 960×500 canvas, demonstrating basic SVG shape construction and timed attribute interpolation without external data.

Ggunasindhuja

90% match

Loading thumbnail…

Fork

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—demonstrating DOM selection and manipulation via `d3.select` and `d3.append`. The eyebrows repeatedly shift vertically using a chained `transition().duration(2000)` sequence. All positioning relies on fixed numeric coordinates and transforms, with no external data source.

Nnsatyaprakash22

89% match

Loading thumbnail…

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

A yellow smiley face rendered with SVG in D3.js demonstrates fundamental DOM manipulation. The face is centered within a 960x500 viewport, with its eyes, eyebrows, and a mouth built from circles, rectangles, and an arc path. The code uses the `d3.select`, `append`, `attr`, and `transition` methods to construct the shapes and animate the eyebrows, which move upward and return over four seconds. This fork of a tutorial example shows basic data-visualization primitives without external data, focusing on creating and transforming SVG elements dynamically.

ZzKhaled305

88% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a static smiley face from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes, rectangular eyebrows, and a path-based mouth arc. The visualization demonstrates fundamental DOM manipulation by appending and positioning graphical elements with methods like `select`, `append`, and `attr` on an SVG canvas. The eyebrows are positioned but do not animate in the provided code.

RRadha246

88% match

Loading thumbnail…

Fork of Visualization

A smiley face drawn with SVG elements animates its eyebrows in a continuous up-and-down motion. Built with D3.js v5, the code constructs the face using circles for the eyes, rectangles for the eyebrows, and a path created with the `d3.arc` function for the mouth. The animation relies on D3's `.transition().duration(2000)` method, sequentially shifting the eyebrow group's transform attribute to create the repetitive movement. The SVG canvas is 960 by 500 pixels, with the face centered via a transform.

Ggunasindhuja

88% match

Loading thumbnail…

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

A D3.js v5 visualization draws a yellow smiley face with eyes, eyebrows, and a mouth as an SVG group, centering it in a 960×500 canvas. The eyebrows animate vertically over four seconds using a chained `transition().duration(2000)` sequence that moves them down then back up. A mouth is rendered with the `arc()` shape from D3's shape utilities, while circles and rects construct the face. The code demonstrates fundamental DOM manipulation, including attribute selection, SVG element appending, and transform transitions.

Vvanesola

88% match

Loading thumbnail…

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

This example demonstrates fundamental D3.js DOM manipulation by constructing a yellow smiley face from SVG shapes. The code uses the `arc` generator for the mouth and appends circles for the eyes. Two rectangular eyebrows repeatedly animate upward and downward using chained `transition` calls, each lasting two seconds. The visualization renders entirely in SVG via D3 v5, with the face centered in a 960×500 viewport.

VVighnesh Gawad

88% match

Loading thumbnail…

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

This example creates an animated smiley face using D3.js v5. The visualization renders a yellow circle head with eyes, eyebrows, and a mouth as SVG elements. The eyebrows animate by moving up and down over two seconds using D3's transition system. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending shapes with attributes like position and fill color. It also uses D3's arc function to generate a path for the mouth.

JJyothicherukuri

88% match