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

100%

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

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 17, 2023

This example demonstrates a simple smiley face constructed entirely through D3.js v5 DOM manipulation. It uses `d3.select` and `.append` to create SVG circles and paths that form the face’s shape, eyes, pupils, tears, eyebrows, and mouth, with fixed coordinates and attributes set via `.attr`. The page loads D3 from a CDN and renders the face in a 960×500 SVG canvas, with static styling from a linked CSS file.

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

This example builds a smiley face in SVG using D3.js v5, demonstrating fundamental DOM manipulation. It uses `d3.select` to append SVG elements and `d3.arc` to generate the mouth path, while circles and rectangles form the eyes and eyebrows. The face is centered on a 960×500 canvas via a transformed `<g>` group, with static features positioned by absolute coordinates. The code shows how D3 creates and styles shapes directly, though the eyebrows remain fixed rather than animating.

MMouad Et-tali

94% match

Loading thumbnail…

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

This example demonstrates how to build a simple smiley face in an SVG canvas using D3.js v5. It shows fundamental DOM manipulation by appending circles for the face and eyes, positioning them with attributes like `cx` and `cy`. The code uses `d3.select` to target the SVG element and `append` to create shapes, while also setting styles like fill colors. The face is static, with no interactive or animated elements, and the data is hardcoded rather than loaded from an external source.

MMinaSSaleh

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

93% 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 smiley face from basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77

93% match

Loading thumbnail…

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

This example creates a smiley face in an SVG canvas, with animated eyebrows that move to express different emotions. It demonstrates fundamental DOM manipulation and data binding using D3.js v5, specifically leveraging the `select` method to target SVG elements and update their attributes. The face is constructed entirely in code rather than from external data, and the animation is achieved by repeatedly setting position attributes on the eyebrow shapes.

Ggabcee

93% match

Loading thumbnail…

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

This example demonstrates DOM manipulation with D3.js by rendering a smiley face in an SVG canvas on a red background. The code uses D3 v5’s `d3.select` to target the SVG element and apply styling, while the eyebrows move via animated transitions triggered through the bundled JavaScript. Although the index.js file only applies a background color, the associated README and video show the full interactive face, which updates facial features using D3’s data-binding and attribute methods. Rendering is entirely SVG-based, with no external data sources beyond the D3 library loaded from unpkg.

FFahad Bin Emran

93% match

Loading thumbnail…

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

An animated smiley face rendered in SVG demonstrates core DOM manipulation with D3.js v5. The face, built from circles, rectangles, and a path, features eyebrows that animate by chaining `transition().duration()` calls to shift their vertical position over time. The code constructs the facial features using D3’s `select` and `append` methods, with the mouth drawn via the `arc` function to generate a curved path. The example highlights basic D3 transitions and coordinate transformations within a fixed 960×500 SVG canvas.

Mmomopng

93% match