Skip to main content
SimilarExport ZIP
100%

Ice fork

✓ Published0🌍 Public
NNaveed945
Last edited Jun 19, 2022
Created on Jun 19, 2022

A yellow smiley face with black eyes, eyebrows, and a curved mouth is centered on a plain background. The eyebrows continuously raise and lower in an infinite loop using D3 transitions. The shape is drawn with SVG primitives like `circle` and `rect`, while the mouth is generated via the `d3.arc()` path generator. No external data is loaded; the graphic is purely code-driven.

AI-generated description

datraviz 2018 #4 - smiley w/ d3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-4

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is drawn as an SVG circle with two eye circles, a mouth created using the `d3.arc` path generator, and rectangular eyebrows. The eyebrows animate by chaining two `transition` calls with `duration(2000)`, moving them upward and then back to their original position. The code uses `d3.select` and `d3.arc` from D3 v5, with all elements appended to a centered `<g>` group within an SVG canvas.

PPrasanth Damarla
86% match
Loading thumbnail…

ICE-4

A yellow smiley face is drawn in the center of a 960x500 SVG canvas, with two eyes, a mouth, and eyebrows. The code uses D3.js v5 to select the root SVG element and append a group, circle, and path for the face and mouth. The animation animates the eyebrows upward and back down over four seconds by applying sequential D3 transitions to the group's transform attribute. All shapes are styled with SVG attributes for fill, stroke, and dimensions, and the example demonstrates fundamental DOM manipulation with D3's `select`, `append`, `attr`, and `transition` APIs.

PPrasanth Damarla
86% match
Loading thumbnail…

ice fork

This example shows a stylized smiley face built entirely from SVG shapes, with the facial features arranged around a central point using React components. The face includes a yellow background circle, elliptical eyes and eyebrows, and a mouth drawn as a d3.arc path. The React components (BackgroundCircle, Eyebrows, Eyes, Mouth) accept props for positioning and sizing, while the main App component translates the coordinate system to center the face within a 960×500 viewport.

NNaveed945
86% match
Loading thumbnail…

Fork of Smile

A yellow circle face with eyes, eyebrows, and a mouth forms a static smiley, but the right eyebrow performs a brief animated wink-like movement before settling back. The SVG is drawn using D3 v5 selections and the `arc` generator for the mouth path, with transitions applied to the eyebrow's vertical position over two timed stages. The face is centered at 960 by 500 pixels, using pure SVG shapes without any external data.

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

ice4

A smiling yellow face with black outlined eyes and rectangular eyebrows is drawn using D3.js v5 in an SVG. The animation shows the eyebrows moving up and down by chaining two `transition.attr` calls on a group element. The code uses `d3.select`, `d3.arc` for the mouth, and SVG primitives like `circle` and `rect`. Rendering is SVG-based with timed transitions.

Ssuchitra2602
85% match
Loading thumbnail…

ICE4 dj3

This D3.js example shows a large yellow smiley face with circular eyes and an arc-shaped mouth, animated by a pair of rectangular eyebrows that shift vertically in a repeating two-second loop. The SVG elements are constructed programmatically using D3's `select`, `append`, and `attr` methods, while the eyebrow animation relies on D3's `transition` API with a sequence of timed `attr` transforms. The illustration uses no external data source, instead generating its geometry from hardcoded constants for spacing, radii, and offsets within a 960-by-500 viewport.

SSai Kaushik
85% match
Loading thumbnail…

Fork of Ice4 Milind

A smiley face rendered in SVG uses D3.js to animate its eyebrows with a repeating transition. The code selects the SVG via `d3.select`, builds face shapes with `circle` and `rect` elements, and draws the mouth using `d3.arc`. Eyebrows move upward and downward through chained `transition.attr` calls on a group, showing basic DOM manipulation and animation. The face’s blue head, black stroke, and asymmetric eyes are hardcoded, with no external data source.

CCherukuriMilind
85% match
Loading thumbnail…

ICE4 Fork of Data_Visualization_YellowFace_PY

This example shows a static smiley face built from SVG shapes: an orange outlined circle for the head, two dark circles for eyes, and a curved mouth path. The visualization uses D3 v7 to select the SVG container and append a group element, while the mouth is generated with the `d3.arc` generator using predefined radius and angle values. The layout is hard-coded with pixel coordinates and the face remains fixed, with no interactivity or animation.

TTulluripallavi
85% match