Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ggeethanjalikotaru
Last edited Feb 25, 2023
Created on Feb 21, 2023

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.

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!

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
96% match
Loading thumbnail…

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

A face rendered in SVG with D3.js v5 shows a yellow smiley with eyes, pupils, nose, mouth, and a cap, all built from basic shapes. The code uses D3 selections to append circles and a path, with the mouth drawn via the `d3.arc()` generator. Static attributes set positions and styles, while the overall composition centers on an SVG group. The example demonstrates fundamental DOM manipulation through D3’s `select` and `append` methods.

DDeeraj Thakkilapati
95% match
Loading thumbnail…

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

This example demonstrates how to build a static smiley face using D3.js v3, combining basic SVG shapes to construct the head, eyes, ears, mustache, and mouth. It shows fundamental DOM manipulation by appending and styling SVG elements like circles, ellipses, lines, and polygons through D3’s selection methods. The code explicitly uses `d3.select`, `d3.append`, and `d3.arc` from the `d3` and `d3-shape` libraries, with the face centered in an SVG canvas via a translation transform. The rendering approach is purely SVG-based, with all geometry defined manually in the JavaScript source rather than loaded from external data.

Rranjithkmr598@gmail.com
95% 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 yellow smiley face from SVG shapes, including two eyes, movable eyebrows, and an arc-based mouth. The face is centered within an 960×500 SVG canvas, with all elements grouped and positioned using D3’s `select`, `append`, and `attr` methods. The code uses D3’s `arc` generator to draw the mouth and manually sets coordinates for circles and rectangles to form the eyes and eyebrows. Static SVG rendering emphasizes programmatic shape creation rather than data binding or interaction.

AAbdouEnsaj
95% match
Loading thumbnail…

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

This example shows a smiley face built with D3.js, featuring yellow circular head, eyes, rectangular eyebrows, and a curved mouth rendered as an SVG path. The face is centered using SVG groups and transformations, with fixed numeric values positioning each facial feature. The code uses D3 v5 selections to append and style elements, the `arc()` generator for the mouth shape, and imports specific functions (`select`, `arc`) from the D3 module. Static positioning defines the layout, with no interactive or animated behavior included.

AAlfaShivamKumar
95% match
Loading thumbnail…

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. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy
95% match
Loading thumbnail…

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

This example shows a yellow smiley face drawn as SVG, with black eyes and an arc-shaped mouth, while the eyebrows are not yet implemented. The code uses D3.js v5 selections to append and position the face elements, including `circle` for the head and eyes and a `path` generated with the `d3.arc` shape generator. The SVG canvas is 960 by 500 pixels, and the layout centers the face using fixed pixel offsets for the eyes and mouth. The example demonstrates fundamental DOM manipulation through D3’s declarative chaining of `.attr()` calls.

GGuilherme Caeiro
95% 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 building a smiley face from SVG primitives—a yellow circle, two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and downward over two two-second intervals using D3’s `transition()` and `attr()` methods. The code imports `select` and `arc` from D3, sets explicit constants for eye spacing and eyebrow dimensions, and renders everything on an SVG canvas with a centered group transform.

Mmanjushayarreddu
95% match