Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ttrivikramcheluri@gmail.com
Last edited Feb 28, 2024
Created on Feb 28, 2024

This visualization displays a colorful Mickey Mouse face constructed entirely with D3.js v5, using basic SVG shapes to form the character’s features. It shows the face, ears, eyes, nose, and hat as distinct geometric elements, with no underlying dataset—pure vector drawing. The code appends circles, ellipses, paths, and a rect to an SVG canvas, setting attributes like `cx`, `cy`, `r`, and `fill` directly. It uses D3’s selection and attribute methods to build the composition programmatically, relying on hardcoded coordinates for each shape to create the final playful portrait.

AI-generated description

Creating and Using it for Assignment by Trivikram Cheluri

MIT Licensed

Similar vizzes

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

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

A smiling face built with D3.js v5 uses SVG circles and a path to render its head, eyes, and mouth. The eyebrows are rectangles that animate up and down using chained `transition` calls with a two-second duration each. The visualization demonstrates core DOM manipulation by selecting an `svg` element and appending groups and shapes based on fixed pixel dimensions. The code imports `select` and `arc` from the D3 library to create the face and generate the mouth's curved path.

Kkatpyt
85% match
Loading thumbnail…

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

This visualization builds a smiling face from basic SVG shapes using D3.js v5. The code appends a yellow circle for the face, two eyes, and a mouth path generated with the `d3.arc` function, all centered via a group transformation. It demonstrates animated DOM manipulation by applying a looping `transition` with a 2-second duration to the eyebrows group, moving it up and down. The example uses `d3.select`, `d3.append`, and attribute setters like `.attr` to construct the scene, with styles handled in an external stylesheet.

Rrohitchavan007
85% match
Loading thumbnail…

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

This example demonstrates how to build a simple animated face using D3.js v5, where a green triangular face with eyes and a curved mouth is rendered as static SVG elements. The code explicitly sets the polygon points, circle positions, and path arc for the mouth, while the D3 `select` and `append` methods handle DOM creation. The visualization focuses on fundamental DOM manipulation and attribute binding, using a fixed data-driven approach with no external data sources. The rendering relies on SVG shapes inside a centered group, with dimensions derived from the SVG element’s attributes.

LLikhithaBodepudi@my.unt.edu
85% 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
84% match
Loading thumbnail…

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

This example uses D3.js to draw a cartoon face with SVG shapes, including a blue head, red outline, eyes, and a mouth. The code selects the SVG element and uses `append` with `g`, `circle`, `rect`, and `path` to construct the face, while setting coordinates and dimensions through `attr`. A D3 `transition` chain animates the eyebrows, moving them up and down over a four-second loop. The face displays fundamental DOM manipulation and animation techniques in D3 v5.

RRahulSai05
84% match
Loading thumbnail…

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

A playful SVG face built with D3.js v5 features a large pink circular head, black eyes, and animated eyebrows that shift upward and back. The face includes a nose, mouth, teeth, and additional facial features drawn using D3’s `arc` generator and basic SVG shapes like `circle` and `rect`. The code demonstrates fundamental DOM manipulation through selections and chained `transition().duration()` calls to create the eyebrow motion on a yellow background.

PPrathyusha Jampala
84% match
Loading thumbnail…

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

This visualization uses D3.js to build a smiling face from basic SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth path generated with the `d3.arc` function. The eyebrows animate upward and back down over four seconds using chained `transition.attr` calls, demonstrating DOM manipulation and data binding in D3 v5. The face is centered on a 960×500 SVG canvas, with all shapes positioned relative to a central group.

RRayed12
84% match