Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNyakundi Jnr
Last edited Feb 22, 2025
Created on Feb 22, 2025

This example demonstrates how to build a stylized ice cream sundae with D3.js, using fundamental DOM manipulation to append and position SVG shapes. It constructs a bowl from an ellipse, adds scoops as circles, and layers a chocolate drizzle via the `d3.arc` generator. The visualization also includes a cherry with a stem and random sprinkles colored from `d3.schemeCategory10`, showing how to create a complete graphic using only `select`, `append`, and attribute setters on a 960×500 SVG canvas.

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 shows a playful lollipop character rendered as an SVG face, complete with a red head, stick, purple bow, and randomly placed, multicolored sprinkles. It uses D3.js v5 with the `select` and `append` APIs to build and style the graphic, positioning elements within a centered group via the `transform` attribute. A pink box containing the text “Alpenliebe” is placed at the top. The code creates geometry procedurally, assigning fill colors and stroke attributes directly to SVG elements.

Ssreeyakadari2024@gmail.com
84% match
Loading thumbnail…

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

This example demonstrates how to construct an animated face using SVG elements and D3.js v5. The visualization builds a face from basic geometric shapes, applying custom styling through CSS classes that define stroke colors and line properties. The code initializes an SVG canvas with fixed dimensions and relies on D3’s selection and data-binding methods to render the face components. The design emphasizes round line joins and caps for a smooth, illustrated appearance, with a compact layout that avoids page scrolling.

CChromosin13
84% match
Loading thumbnail…

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

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Jjlspangl
82% match
Loading thumbnail…

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

This example builds a stylized yellow face from primitive SVG shapes—circles, rectangles, and an arc—using D3.js methods like `select`, `append`, and `attr`. The face is centered via a D3 selection transform, and its eyebrows animate vertically through chained transitions, first lowering and then returning to their original position. The arc for the mouth is generated with the D3 `arc` helper, while all shapes are drawn in an SVG container. Data is minimal, with hardcoded dimensions controlling eye spacing, radius, and eyebrow offsets.

IIc1200010
82% match
Loading thumbnail…

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

A smiling face built with SVG elements responds to a looping two-second animation that raises and lowers its rectangular eyebrows. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG canvas, appending grouped circles for eyes, a mouth path created with `d3.arc`, and applying `transition` calls to shift a `g` element’s transform attribute. It uses D3 v5 with import statements for `select` and `arc`.

Vvanseveren.m@northeastern.edu
82% match
Loading thumbnail…

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

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

NNavaneeth-Ragi
81% 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
81% match
Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The face, composed of circles, ellipses, and a path-based mouth, is assembled through chained `append` calls and coordinate transformations. The most prominent behavior is the animated eyebrows, which move up and down using a `transition().duration(2000)` sequence. This example showcases D3’s core API for selecting elements, applying transforms, and creating simple timeline-based animations without any external datasets.

Ssaiyogesh9911@gmail.com
81% match