Skip to main content
SimilarExport ZIP
100%

11650230

✓ Published1🌍 Public
Ppethavenu
Last edited Feb 22, 2023
Created on Feb 22, 2023

A smiling animal face built from D3.js SVG shapes demonstrates basic DOM manipulation. The example constructs the figure using circles and lines for features like eyes, pupils, ears, whiskers, and a nose, all positioned with the `attr` method. It uses `d3.select` to append elements to an SVG canvas. No data or interactivity is present; the sketch is static, showing only how D3 can create and style primitive vector shapes.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives. A single circle is appended to the SVG canvas and positioned at the center with a radius of 225 pixels, though its fill is left undefined. The code uses the D3 v5 selection and append methods (`select`, `append`) to build the shape step-by-step, revealing how D3’s API interacts with SVG elements. The static face serves as a starting point for interactive features shown in an accompanying video.

FFred Kellner
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a smiley face using D3.js version 5, focusing on fundamental DOM manipulation with SVG elements. The code explicitly appends a group and a circle element to the SVG canvas, positioning them at the center of a 960×500 viewport. It uses the `select` and `append` methods from the `d3` namespace to build the geometric face outline, with a transparent fill and black stroke. The visualization is purely programmatic, with no external data source, and includes a static smile path defined directly in the HTML markup.

TTheRoadSign
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a static smiley face built with SVG shapes: a yellow circle for the head, black circles for the eyes, and a curved line for the mouth. The code demonstrates fundamental DOM manipulation by using D3.js v5 selection and append methods to create and position each shape. It draws directly from the index.js file, which uses `select` and `append` to construct elements on an SVG canvas, with coordinates derived from the `width` and `height` attributes. The project is minimal, focusing on basic shape creation rather than interactive or animated behavior.

Mmirna981
85% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is constructed entirely from SVG shapes using D3.js v5, with red background fill and static circular facial features. The example demonstrates fundamental DOM manipulation through D3 selections and the `arc` generator from the `d3` module, though the visible code only styles the SVG container and imports these tools. The face itself appears as a playful composition of geometric elements, highlighting how D3’s declarative data-binding approach can drive basic SVG rendering for abstract illustrations rather than data-driven charts. The bundled `bundle.js` contains the remaining face-assembly logic not shown in the excerpt.

Wwen787
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG elements, including a polygon for the nose and animated eyebrows. It uses d3.select, append, and attr methods to build the face centered within an SVG canvas. The code imports the select and arc functions from D3 v5, and sets up a transformation group to position elements relative to the center of the 600×400 viewport. The result shows how D3’s data-driven approach can create simple, interactive graphics through direct SVG manipulation.

CCameron Yick
84% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG reacts to mouse movement by shifting its eyebrows, demonstrating basic DOM manipulation with D3.js. The example uses `d3.select` to target the SVG element and `d3.arc` to construct the facial shapes, with interactive behavior driven by event listeners. The code is structured as an ES module importing from D3 v5, and the rendering relies purely on SVG elements styled with CSS. The face is the sole visual element, and no external data source is used.

TTheRoadSign
84% match
Loading thumbnail…

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 code selects the SVG element and appends a circle with a radius of 200 pixels, while the accompanying stylesheet hides body margins and overflow. Using D3 v5’s `select` and `append` methods, the visualization shows how to programmatically create and style SVG elements, with related video content explaining animated eyebrow movement.

DDiavek
84% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by constructing a smiling face from SVG primitives. Using d3-selection methods like `select` and `append`, it creates a yellow circle, two eyes, a path-based smile (built with the `d3.arc` function), and rectangular eyebrows, with one eyebrow rotated to create asymmetry. The SVG is centered via a transform, and the code imports `select` and `arc` directly from the D3 module, showcasing how to build and style static SVG elements programmatically with D3 v5.

Ddev-snip
84% match