Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
AAbdouEnsaj
Last edited Jul 26, 2022
Created on Jul 26, 2022

This fork of the “Let's make a face with D3.js!” tutorial demonstrates fundamental DOM manipulation by rendering a static yellow smiley face with eyes, eyebrows, and a curved mouth in an SVG canvas. The code uses D3 v5 selections, `append` and `attr`, along with the `arc` generator to shape the mouth path. All facial elements are positioned using translated coordinates and fixed numeric offsets. The example serves as a clear introduction to building SVG graphics programmatically with D3's declarative approach.

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 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
96% 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 eyes, eyebrows, and a mouth as SVG shapes. The code uses `d3.select` to access the SVG element and `d3.arc` to define the mouth's path. Eyebrows and the right eyebrow animate upward using chained `transition().duration(2000)` calls, moving via `attr('transform', ...)`. The face is centered using a `translate` transform, with static parameters like `eyeSpacing`, `eyeRadius`, and `eyebrowHeight` controlling the layout. All shapes are drawn directly without external data sources.

AAbdoulaye DIOP
95% match
Loading thumbnail…

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

A yellow smiley face rendered with SVG in D3.js demonstrates fundamental DOM manipulation. The face is centered within a 960x500 viewport, with its eyes, eyebrows, and a mouth built from circles, rectangles, and an arc path. The code uses the `d3.select`, `append`, `attr`, and `transition` methods to construct the shapes and animate the eyebrows, which move upward and return over four seconds. This fork of a tutorial example shows basic data-visualization primitives without external data, focusing on creating and transforming SVG elements dynamically.

ZzKhaled305
94% match
Loading thumbnail…

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

This fork of “Let’s make a face with D3.js!” builds a yellow smiley face in an SVG canvas using D3 v5. It demonstrates fundamental DOM manipulation by selecting the `svg` element, appending a group, and composing circles and rectangles for eyes, a path-arc mouth, and rectangular eyebrows. The code uses `d3.select` and `d3.arc` to shape the smile, then animates the eyebrow group with `transition.attr` over two seconds, moving it up and down to create a lively facial expression.

HHuy Truong
94% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

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

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

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation, with black circular eyes positioned via `d3.select` and SVG attributes. The mouth is drawn using the `d3.arc` shape generator, which creates a crescent path based on inner and outer radii and start/end angles. The example loads D3 v5 from a CDN and uses plain attribute setters like `.attr` to construct the face dynamically. Though the README mentions animated eyebrows, the code shown in `index.js` does not implement any movement or interaction, focusing solely on static shape creation.

Ccelesteleclezio
94% 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
94% match