Fork of sriram

100%

Fork of sriram

✓ Published0🌍 Public

Last edited Feb 22, 2023

Created on Feb 22, 2023

This example uses D3 v5 to construct a cartoon smiley face entirely from SVG shapes. The code demonstrates fundamental DOM manipulation by appending circles, lines, and rectangles for the face, eyes, nose, hair, ears, and teeth. It also uses D3’s `arc()` generator to draw the mouth as a path, and applies basic attributes like `fill` and `stroke` to style each element. The scene is static, with no interaction or animation.

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

A smiling face rendered in SVG is centered and built entirely with D3.js shape primitives. The static face consists of yellow circles for the head and eyes, black strokes, and a donut-shaped mouth path created with the `arc` generator. An animation is driven by chained `transition().duration(2000)` calls, which move the two rectangular eyebrows up and down in a repeating cycle. All elements are appended to a group translated to the SVG center, using explicit pixel coordinates for positioning.

SSravaniPosina

85% 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

84% 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 cartoon smiley face from SVG elements, including a circle for the face, white eyes, colored eyebrows, a nose, mouth, ears, hair, and teeth. The code uses d3.select to append and style each shape with class-based CSS transformations. It relies on D3 v5 via a CDN link, rendering entirely in SVG without data binding, instead showcasing direct element creation and attribute assignment as a beginner-friendly exercise.

SSomu1433

84% match

Loading thumbnail…

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

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula

84% match

Loading thumbnail…

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

This example displays a cartoon smiley face built with SVG shapes using D3.js v5. The face includes animated eyebrows that move up and down via chained `transition.duration` calls, along with static features such as eyes, a nose, mouth, teeth, hair, beard, and sunglasses. The code uses D3 selections and the `arc` generator to create the mouth path, and demonstrates fundamental DOM manipulation by appending circles, rectangles, and paths to an SVG canvas. A video tutorial is embedded in the README.

Ssreesushmavad

84% match

Loading thumbnail…

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

This example shows a static smiley face built entirely with SVG primitives, including a yellow head, eyes, eyebrows, ears, nose, mouth, beard, and mustache. The code constructs the face using D3.js `select` and `append` methods to create and position circles, rectangles, paths, and lines. It uses `d3.arc` to generate the curved shapes for the nose, mouth, and beard. The face is centered within the canvas using a `transform` attribute, demonstrating fundamental DOM manipulation in D3.

Ggeethanjalikotaru

84% match

Loading thumbnail…

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

An animated smiley face with moving eyebrows, rendered as SVG via D3.js, demonstrates fundamental DOM manipulation. The face is built using basic D3 shapes—circles, rectangles, and an arc-generated mouth—positioned within a centered group. The eyebrows transition vertically through chained `transition().duration()` calls, creating a repeating bobbing effect. Additional elements include ears, hair, and teeth, all styled with simple fill and stroke attributes. The code imports `select` and `arc` from D3 v5 to construct the geometric components and drive the animation.

CChandrashekharRamamuthi

83% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This visualization demonstrates fundamental D3.js DOM manipulation by constructing a cartoon smiley face from primitive SVG shapes, including a circular head, eyes, pupils, nose, eyebrows, rectangular teeth, a mouth arc, and semi-transparent blush circles. The code uses a mix of `d3.select` and chained `.attr()` methods to create and position elements on an SVG canvas, with an `arc()` generator defining the nose and mouth paths. A static flower-like arc forms the nose, while the mouth is drawn as a curved path with a distinct inner radius. The `d3.v5` library manages the SVG rendering, and hardcoded pixel coordinates (e.g., 390, 150 for the eyes) position the facial features rather than data-driven layout.

NNikitha123171

83% match