Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTrustPaul
Last edited May 9, 2021
Created on May 9, 2021

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face consists of a large yellow circle for the head and two smaller black circles for eyes, all positioned using D3’s `select` and `append` methods with explicit `attr` calls for coordinates and styling. The code imports only `select` from D3’s module API, computes dimensions from the SVG element, and hardcodes eye spacing and offsets. No interactive or animated behavior is present, focusing purely on static shape construction.

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

This example creates a yellow smiley face by drawing circles with D3.js onto an SVG canvas. The face features two black eyes and a mouth formed using D3's `arc` shape generator, which defines the path as a semi-circular stroke. It demonstrates fundamental DOM manipulation by selecting the SVG element with `d3.select` and appending shapes with chained `.attr` methods. The code also uses a `g` group element with a translate transform to position the facial features relative to the canvas center.

TTrustPaul
95% match
Loading thumbnail…

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

A yellow smiley face rendered with SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face’s eyebrows animate upward and downward through chained `transition()` calls that shift their `transform` attribute over two-second intervals. The author constructs the head, eyes, and eyebrows with `select()` and `append()`, while the mouth uses the `arc()` generator from D3’s shape module with specified inner and outer radii and angular ranges. Both circles and rectangles are positioned via fixed pixel offsets in a centered group.

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

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

A D3.js visualization renders a yellow smiley face in SVG, centered within a 960 by 500 canvas. The face features a black-outlined circle, two eyes, and an arc-shaped mouth created using D3’s `arc()` generator. The code demonstrates fundamental DOM manipulation by using `d3.select` to target the existing SVG element, then appending groups and shapes with `append` and setting attributes like `r`, `cx`, and `transform`. The eyes are positioned via translation offsets, while the mouth’s path uses an inner and outer radius, with angles specified in radians to define the arc’s sweep.

Llizard1111
95% match
Loading thumbnail…

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

A smiley face drawn with SVG elements demonstrates fundamental DOM manipulation and animation with D3.js v5. The face features a yellow circle, two eyes, and a mouth created using the `arc` generator, while the eyebrows animate upward and downward via chained `transition` calls. The code uses `select` and `append` to build the SVG structure, and CSS hover and active states change the face's fill color. The example focuses on showing how D3 can construct and transform visual elements through data-independent selection methods.

XXenos Panagiotis
94% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
94% 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