Fork of d3example1

100%

Fork of d3example1

✓ Published0🌍 Public

Last edited Jul 15, 2022

Created on Jul 15, 2022

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face with animated eyebrows. The code uses D3 v5 selections and the `arc` generator to draw the mouth, while chained `transition().duration()` calls shift the eyebrows up and down over two-second intervals. Circles and rectangles are appended to an SVG group, positioned relative to the center of a 960x500 viewport. The animation loops implicitly through the chained transitions, and all geometry is defined with fixed pixel constants.

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 Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face in SVG. The face includes two eyes, a mouth drawn using the `d3.arc` path generator, and rectangular eyebrows that animate vertically via chained `transition` calls with a 2-second duration each. The animation toggles the eyebrows up and down repeatedly, showing how D3’s selection methods and attribute updates, such as `attr` and `transition`, modify SVG elements over time. The code uses D3 v5 and imports `select` and `arc` from the library.

KKonstantinos Kotsiaridis

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face whose eyebrows move up and down in a looping animation. The visualization uses SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—centered within a 960×500 viewport. The code leverages D3 v5 selections, the `arc` generator for the mouth shape, and chained `transition().duration(2000)` calls to animate the eyebrow group’s vertical position. The face is static except for the eyebrows, showcasing how D3 binds data to visual properties.

Jjunior-armando

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows—rendered as rectangles—move up and down through a chained `transition().duration(2000)` sequence, shifting the transform attribute over time. The code uses D3 v5 selection methods like `append` and `attr`, plus the `arc` generator from the `d3` module, all rendered as SVG elements.

AAmandineM97

92% match

Loading thumbnail…

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

This example demonstrates basic D3.js DOM manipulation by constructing a yellow smiley face with green eyes, red arc mouth, and grey eyebrows that animate upward and back down in a looping transition. The code builds SVG shapes—circles, rectangles, and a path using the `d3.arc` helper—inside a centered group, then applies chained `transition().duration(2000)` calls to move the eyebrow group along the y-axis. The face is rendered in an SVG canvas with dimensions set from the HTML attributes, and all styling is applied directly via D3 attribute methods.

55577Satvik

92% match

Loading thumbnail…

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

This example demonstrates fundamental D3.js DOM manipulation by animating a yellow smiley face whose eyebrows move up and down in a continuous loop. The face is drawn using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with d3.arc() for the mouth. The animation is driven by chained transition() calls that alternately shift the eyebrow group’s transform attribute over two-second intervals. The code imports select and arc from D3 v5 and appends elements to a fixed 960×500 SVG canvas.

SSANEEM MOHAMMAD

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746

92% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face with animated eyebrows. The face is drawn using SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc()` for the mouth—all positioned within a group centered on an SVG canvas. The eyebrows move via chained `transition()` calls with specified durations, shifting their vertical position to create a raising effect. The code imports `select` and `arc` directly from the d3 module and uses attribute chaining to build the visualization.

SSravaniPosina

92% match