Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public
Ssimpleguy86@gmail.com
Last edited Jan 9, 2025
Created on Jan 9, 2025

This fork of “Let’s Make a Face” builds a smiley face by incrementally adding points, lines, and shapes on an SVG canvas. The visualization uses D3 v3’s `d3.forceSimulation` to position the face’s features, with each element appearing in a sequence controlled by JavaScript timers. The code also relies on `d3.select` and `transition.attrTween` to animate the drawing of the mouth and eyes. The final result shows a complete, semi-circular smile and two round eyes, rendered from simple geometric data.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face” demonstrates building a smiley face from a set of scattered nodes that gradually arrange into a recognizable shape. The visualization uses d3.forceSimulation to position the nodes into a circular face outline, with the final layout revealing eyes and a smile. The project is based on v3 of D3.js, rendering directly into an HTML page without an external data source. The embedded YouTube video provides a walkthrough of the code, while the live example shows the force-directed animation in action.

Yyanaltingliu
92% match
Loading thumbnail…

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

This example uses D3.js to build an animated smiley face in SVG, with eyebrows that rise and fall in a repeating cycle. The code constructs the face by appending SVG circles, a path for the mouth, and rectangles for the eyebrows, then applies chained transitions to move the eyebrow group. D3’s `select` and `arc` APIs handle DOM selection and mouth shape generation, while the animation relies on `transition` with a two-second duration for each movement phase. The face is centered within a 960-by-500 SVG canvas.

AAlmatrom
91% match
Loading thumbnail…

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

This interactive D3.js example builds a stylized smiley face entirely from SVG shapes, including circular eyes, a path-based mouth, and rectangular teeth. An animated sequence moves the eyebrows up and down by chaining two `transition().duration(2000)` calls, demonstrating how to create simple motion via DOM attribute transforms. The code uses `d3.select` and `d3.arc` from the D3 v5 API to construct the face's components, with all geometry centered through a single transformed group. The result shows how D3's declarative SVG manipulation can produce playful, character-driven visualizations.

BBrian Gilmore
90% match
Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face entirely from SVG shapes. A circle forms the face, with smaller circles for eyes and cheeks, rectangles for eyebrows, nose, and mouth, all positioned relative to the center. The code demonstrates fundamental DOM manipulation with `d3.select` and `append`, while `setInterval` triggers D3 transitions that move the eyebrows and enlarge the cheeks in a looping animation.

Ssatishnarne99@gmail.com
90% match
Loading thumbnail…

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

This example uses D3.js to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc-generated mouth, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while a chained `transition().duration()` animation moves the eyebrows up and down in a repeating cycle. The face is drawn using static attributes for radius, spacing, and colors, with the mouth created via the `d3.arc()` helper.

Ssimpleguy86@gmail.com
89% match
Loading thumbnail…

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

This example uses D3.js to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc-generated mouth, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while a chained `transition().duration()` animation moves the eyebrows up and down in a repeating cycle. The face is drawn using static attributes for radius, spacing, and colors, with the mouth created via the `d3.arc()` helper.

Ssimpleguy86@gmail.com
89% match
Loading thumbnail…

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

A forked D3.js v5 example renders a smiley face in SVG with animated brows, a hat, and a mouth that bounce between positions over repeated transitions. The code uses `d3.select`, `d3.arc`-less path strings, and `transition.attr` to move circles, rectangles, and ellipses. It demonstrates fundamental DOM manipulation and chained transitions on SVG elements, with the face’s components like eyes and eyebrows spaced via explicit coordinates rather than a data-binding layout.

SSanjib Paudel
89% match
Loading thumbnail…

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

A smiley face, rendered as SVG elements, demonstrates fundamental DOM manipulation with D3.js. The face's eyebrows animate by repeatedly shifting their vertical position via chained `transition()` calls, each lasting two seconds. The code uses D3's `select`, `append`, and `attr` methods to build the circle, eyes, and rectangular eyebrows, while an `arc()` path creates the mouth. The animation loops the eyebrows up and down continuously.

MMaurice Huang
89% match