Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
MMinaSSaleh
Last edited Feb 21, 2021
Created on Feb 21, 2021

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.

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 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 the basics of DOM manipulation with D3.js by building a static smiley face in an SVG canvas. The face consists of a yellow circle with a black stroke, positioned using the `cx` and `cy` attributes on a 960-by-500-pixel SVG element created in the HTML. The JavaScript code uses D3’s selection API (`d3.select`) to target the SVG and chain `.append()` and `.attr()` methods to construct the shape. The rendering relies on vector graphics, with styling defined in an external stylesheet.

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

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

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.

Ssiddu7147
93% match
Loading thumbnail…

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

This example demonstrates how to build a smiley face using D3.js, with the ability to animate its eyebrows. It uses basic SVG elements—circles for the face and eyes, and a path generated by the `d3.arc` function for the mouth. The code sets up an SVG canvas and positions elements using translation and coordinate attributes. It relies on D3 v5’s selection and arc APIs to create the static face, which serves as a foundation for adding interactive or animated features.

Ggopiganta
93% match
Loading thumbnail…

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

This example shows a simple smiley face drawn on an SVG canvas, with yellow circular head and black outline. The code demonstrates fundamental DOM manipulation with D3.js by appending a circle element to an existing SVG. Using d3.select and append, the example sets the circle’s radius, center coordinates, fill, and stroke attributes. The face is static; the title mentions moving eyebrows, but the JavaScript only renders the circle, leaving facial features absent. The implementation relies on D3 v5 and SVG rendering, with no data binding or animation.

SShengHao-Shi
93% match
Loading thumbnail…

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

A smiley face rendered with SVG circles in D3.js demonstrates basic DOM manipulation by drawing a yellow head with two black eyes. The example uses D3 v5 to select SVG elements and bind data, with the page structure defined in HTML and styled through CSS. Although the code includes the potential for moving eyebrows, the current implementation only presents a static face with fixed eye positions. The visualization serves as a simple introduction to D3.js for creating and controlling graphical elements within an SVG canvas.

NNeenu514
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