Skip to main content
SimilarExport ZIP
100%

Satish

✓ Published0🌍 Public
SsatishbabuNalajala
Last edited Jun 24, 2022
Created on Jun 24, 2022

A smiling face built with SVG shapes demonstrates D3.js DOM manipulation and animation. Yellow circles form the head and eyes, while rectangular eyebrows and an arc-based mouth complete the figure. The code uses D3 v5 selections and transitions, with `transition.attr` moving the eyebrow group upward and back over two 2-second intervals. The `arc` generator from the d3-shape module creates the mouth path, and explicit SVG attributes position each element relative to a centered group.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Satya vineeth.js

A yellow face with black-outlined eyes, animated eyebrows, and a curved mouth is drawn using SVG shapes in D3 v5. The code selects an SVG element and uses D3's `arc` generator to create the mouth path, while transitions animate the eyebrow group vertically over two seconds. The visualization is built within a React framework, rendering circles and rectangles for facial features with a fixed 960×450 viewport.

SSatyaVineeth
86% match
Loading thumbnail…

Satya Vineeth

A smiling face rendered as a yellow SVG circle with black stroke, featuring detailed eyes, eyebrows, ears, and a mouth built from D3 arc paths and React-generated shapes. The visualization uses React 17 for component structure and D3 v7’s `arc` generator to define the mouth, eye arcs, and ear paths, with additional circles and lines for facial features. Data is hardcoded in the component, and the SVG is centered within an 850×455 viewport, all rendered to the DOM via ReactDOM.

SSatyaVineeth
85% match
Loading thumbnail…

VarshaG

A smiling yellow face drawn with SVG shapes demonstrates basic D3.js DOM manipulation. The page uses D3 selections to append and position the head, eyes, eyebrows, and an arc-based mouth. An animated transition shifts the eyebrow group up and down repeatedly using chained `transition().duration()` calls, creating a blinking-like motion. The example relies on D3 v5’s `select`, `arc`, and attribute methods, with all coordinates computed from the SVG’s width and height attributes.

VVReddy913
84% match
Loading thumbnail…

Face

A smiling face drawn with SVG shapes animates its eyes and eyebrows. The yellow circle head contains two black eye circles and rectangular brows that rise and fall via chained transitions, while a mouth arc uses the `d3.arc` helper. The code selects the SVG element, centers a group, and applies `transition.attr` with specified durations to move facial features vertically, demonstrating coordinate transforms and timed animations with D3 v5.

MManoharURK20AI1057
84% match
Loading thumbnail…

d3example1

A smiling face rendered as SVG demonstrates D3.js DOM manipulation and animation. Yellow circles, black-stroked elements, and an arc path form the face, eyes, and mouth. The eyebrows, appended as rectangles, move upward and return via chained `transition().duration(2000)` calls on a group. The code uses `select`, `arc`, and attribute setters to build the static geometry and animate the eyebrow group's `transform` attribute.

Aanandbabu-k
84% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall in a looping two-second cycle. The example demonstrates core D3.js v5 DOM manipulation, using d3-selection methods like `select`, `append`, and `attr` to construct the face, and `transition` with a duration to move the eyebrow group. Rendered at 960 by 500 pixels, the face centers itself and draws a yellow circle, eyes, and an arc-based mouth using d3-shape's `arc`.

Ssunilkrishnav
83% match
Loading thumbnail…

face

A smiley face drawn with D3.js animates its eyebrows up and down in a looping transition. The SVG face uses a yellow circle, two eye circles, and an arc-generated mouth, while the eyebrows are rectangles that move via chained `transition.attr` calls over two-second intervals. D3 v5’s `select` and `arc` APIs build the static elements, with the animation driven by D3’s transition system.

Ssatishnarne99@gmail.com
83% match
Loading thumbnail…

Let's make a face with D3.js

A yellow SVG face with black-outlined features is drawn using D3.js v5. The code builds concentric circles for the head and eyes, rectangles for the eyebrows, and an arc path for the mouth. A 2-second animated transition moves the eyebrows upward and back, while a 3-second transition tweens the mouth’s path into a wide arc. All shapes are positioned relative to the SVG’s center via a translated group, using D3’s `select`, `arc`, and `.transition()` APIs.

HHarish M A
83% match