Skip to main content
SimilarExport ZIP
100%

ICE5

✓ Published0🌍 Public
MMounika0927
Last edited Mar 2, 2023
Created on Feb 21, 2023

A red circle face with black-outlined eyes and a curved mouth is drawn using D3.js v7. The animation moves the rectangular eyebrows up and down via chained `transition` calls, each lasting two seconds. The face is constructed with SVG primitives, including `circle`, `rect`, and `path` elements, positioned relative to the SVG’s center. The page also loads employee data from a CSV file and displays its file size, row count, and column count as text.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE5

A D3.js animation renders a red smiley face with horns, mustache, beard, and teeth on a light blue background. The face’s eyebrows rotate and shift downward over two seconds using `transition.attr` and `transform` operations. The example demonstrates DOM manipulation and SVG shape generation with `d3.arc`, `d3.line`, and `d3.curveBasis`. It also loads COVID case metadata from a CSV file via `d3.csv`, displaying file size, row count, and column count as text.

Ssrividyabachina22
89% match
Loading thumbnail…

ICE-5 DV

This example uses D3.js to render a smiley face and animate its eyebrows through a sequence of `transition().duration()` calls. The face is drawn with SVG shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned via a central `g` element. It also fetches a CSV file of laptop purchase data and displays dataset metadata, including size, row count, and column count, in a pre element.

Ssiddu7147
85% match
Loading thumbnail…

ICE-5 DV

This example demonstrates a smiling face with animated eyebrows using D3.js v7. The page also displays metadata about a laptop-purchase dataset, loaded via `d3.csv` from a GitHub gist, reporting file size, row count, and column count. The SVG face is built with D3 selections, including circles for eyes, rectangles for eyebrows, and a path arc for the mouth. The eyebrows move vertically using chained `transition().duration()` calls to create a bouncing effect.

Ssiddu7147
84% match
Loading thumbnail…

ICE-5 DV

This example shows an animated smiley face whose eyebrows move up and down. It demonstrates fundamental DOM manipulation and animation using D3.js v7. The code uses D3's `select`, `append`, and `transition` APIs to create and animate circles, rectangles, and an arc-based mouth. A separate, static dataset is loaded from a CSV file, and its metadata (size, row count, column count) is displayed in an HTML pre element, but this data is not visually encoded in the chart.

Ssiddu7147
83% match
Loading thumbnail…

ICE-4 (11630234)

This example shows a stylized face rendered with red circular head, eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down through a two-stage transition sequence. The visualization uses D3 v7 to draw SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and arc-generated paths for the right eyebrow and mouth. The code applies D3 transitions to animate the eyebrow group’s vertical position over two seconds.

KKovvuri Supraj
83% 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
83% 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
82% match
Loading thumbnail…

ICE 4

This example animates a smiling face, constructed from a yellow circle head, two eyes, eyebrows, and a mouth, against a black stroke. The entire face is centered within an SVG canvas using a D3 translate transform. The code relies on D3’s `select` and `append` to build the SVG structure, and the mouth is drawn with a `d3.arc` path. A two-second `transition` sequence shifts the eyebrows up and down, creating a surprised or winking expression on the static face.

AAmar09nath
82% match