Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Aarchanagoli@my.unt.edu
Last edited Feb 27, 2024
Created on Feb 27, 2024

A fork of the “Make a face with D3.js” tutorial, this example draws a cartoon duck from basic SVG shapes—ellipses, a polygon, circles, and lines—positioned around a 960×500 canvas. It demonstrates fundamental DOM manipulation with D3 v5, using `select` to target the SVG and chained `.append` and `.attr` calls to build the body, head, beak, eyes, wings, and legs. The code relies on explicit pixel coordinates and fixed dimensions rather than data binding, rendering a static, yellow duck with orange beak, wings, and thicker legs.

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!

A forked D3.js example builds a static penguin illustration using SVG shapes, including ellipses, circles, polygons, and paths, all positioned relative to a central group. The code demonstrates fundamental DOM manipulation with d3-selection, using `select` and `append` to construct the body, head, eyes, beak, legs, and wings from scratch. A gray body and orange beak and legs define the character, rendered entirely through hardcoded attributes rather than data binding or interaction. No animation or eyebrow movement is present, despite the original title referencing a moving face.

Aakshitha.rapala@gmail.com
87% match
Loading thumbnail…

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

This example draws a stylized eagle using D3.js v5 and SVG, composing the bird from geometric shapes such as ellipses, circles, polygons, and paths. The code builds the figure by appending elements to an SVG group, using D3 selections to set attributes like coordinates and fill colors for the body, head, eyes, beak, wings, tail, and feet. It demonstrates basic D3 data-joining and SVG rendering as a playful fork of the original "Let's make a face" tutorial, with a light sky-blue background.

Vvinodreddysagam929@gmail.com
86% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a static pond scene composed of SVG primitives. The visualization depicts a house, tree, ducks, lily pads, clouds, a sun, and water, each created using D3’s `select` and `append` methods to construct and style shapes like rectangles, circles, ellipses, and polygons. Positioning and visual properties such as fill colors are set via chained `.attr()` calls, while an external CSS file defines class-based styling. The scene is drawn entirely through SVG elements, with no interactivity or animation, showcasing how D3’s core API can be used for basic graphics composition.

Mms744311@gmail.com
86% match
Loading thumbnail…

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

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Jjlspangl
86% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow rectangular face with eyes, eyebrows, and a mouth. The eyebrows animate upward and downward using chained `transition()` calls with a 2-second duration. The code imports `select` and `rect` from D3 v5, appends SVG shapes via method chaining, and uses an `arc()` path from D3 to render the mouth. A static SVG canvas of 960×500 pixels serves as the rendering surface, with all elements positioned relative to the center of the viewport.

LLikhithaBodepudi@my.unt.edu
86% match
Loading thumbnail…

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

This example displays a simple cartoon face composed of SVG shapes, centered on a yellow circle with two eyes and an arc-based mouth. The face group is positioned using a transform, and the right eye animates downward over two seconds via a D3 transition. The code uses d3.arc to generate the mouth path and d3 selection/transition methods (transition.attr) to modify attributes, with the SVG drawn directly in the browser. It forks an existing "Let's make a face" example, adapting it for D3 v5.

Hhuizrh
86% match
Loading thumbnail…

Fork of Lets make a face with D3.js!

This example draws a simple face using D3.js, with a large yellow circle for the head, two black eyes, and an orange mouth. The rendering renders directly to an SVG canvas, with the face elements positioned relative to the center of the 960 by 500 viewport. The code uses `d3.select` and `d3.arc` from the D3 v6 library, along with `d3.line` to define the mouth’s path, applying fills and strokes to the shapes.

Ppangaotata
85% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example creates a simple yellow chick face using SVG shapes, including circles for the head and eyes and a polygon for the beak. Built with d3.v7, it imports `select` and `arc` from the D3 library to manipulate the SVG elements and generate an arc path for the mouth. The code loads D3 via UNPKG and uses local ES6 modules, with all geometry positioned relative to the center of a 960x500 canvas.

Kktvgs25@gmail.com
85% match