Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

100%

Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

✓ Published8🌍 Public

Last edited Feb 23, 2023

Created on Feb 20, 2023

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

A D3.js visualization constructs a stylized smiley face in SVG, featuring a yellow circular head, eyes, pupils, nose, teeth, ears, eyebrows, blush, glasses, and a beard. The eyebrows are static rotated rectangles; no animation is present, despite the README mentioning movement. The code builds elements using D3 v5 selections, methods like `attr`, the `arc` generator for the nose and mouth, and data binding for the teeth. The fixed SVG canvas is 960 by 480 pixels, with shapes positioned via absolute coordinates and transforms.

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 Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This D3.js visualization builds a static smiley face from basic SVG shapes, including a yellow head, eyes, pupils, nose, eyebrows, ears, mouth, and teeth. It demonstrates fundamental DOM manipulation using the `select` and `arc` functions from the d3 library, appending elements like circles, rectangles, and paths directly to the SVG. The face is centered with an SVG `g` group, and the mouth is generated using an arc generator with specified radii and angles. No interaction or animation is present; the code renders a fixed cartoon illustration.

KKiran Jyothi Bodduluri-11604571

97% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This visualization demonstrates fundamental D3.js DOM manipulation by constructing a cartoon smiley face from primitive SVG shapes, including a circular head, eyes, pupils, nose, eyebrows, rectangular teeth, a mouth arc, and semi-transparent blush circles. The code uses a mix of `d3.select` and chained `.attr()` methods to create and position elements on an SVG canvas, with an `arc()` generator defining the nose and mouth paths. A static flower-like arc forms the nose, while the mouth is drawn as a curved path with a distinct inner radius. The `d3.v5` library manages the SVG rendering, and hardcoded pixel coordinates (e.g., 390, 150 for the eyes) position the facial features rather than data-driven layout.

NNikitha123171

95% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This example demonstrates fundamental DOM manipulation with D3.js by constructing a static smiley face out of SVG elements, including eyes, pupils, eyebrows, a nose, ears, glasses, blush circles, a mouth, teeth, and a beard. The code uses d3.select to create and style each shape, d3.arc to generate the nose and mouth paths, and a data join with d3.selectAll to bind an array of numbers to rectangular teeth. The purple face, black features, and red glasses are rendered entirely in SVG, with fixed coordinates and transforms, showing how D3 can build complex graphics through direct attribute manipulation.

NNiharika-Guthikonda

94% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This example constructs a cartoon face entirely with D3.js v5, using SVG shapes such as circles, rectangles, and paths to add eyes, eyebrows, ears, teeth, and glasses. The code demonstrates fundamental DOM manipulation by selecting the root SVG and appending each facial feature with methods like `attr`, while also using `d3.arc` to generate the nose and mouth. The face is static, with no animation or interactivity, and displays a yellow head, black features, and pink blush on a white canvas.

JJasvitha Allamsetty

93% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

JJasvitha Allamsetty

93% match

Loading thumbnail…

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

This example shows a static smiley face built entirely with SVG primitives, including a yellow head, eyes, eyebrows, ears, nose, mouth, beard, and mustache. The code constructs the face using D3.js `select` and `append` methods to create and position circles, rectangles, paths, and lines. It uses `d3.arc` to generate the curved shapes for the nose, mouth, and beard. The face is centered within the canvas using a `transform` attribute, demonstrating fundamental DOM manipulation in D3.

Ggeethanjalikotaru

93% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a static smiley face from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes, rectangular eyebrows, and a path-based mouth arc. The visualization demonstrates fundamental DOM manipulation by appending and positioning graphical elements with methods like `select`, `append`, and `attr` on an SVG canvas. The eyebrows are positioned but do not animate in the provided code.

RRadha246

93% match

Loading thumbnail…

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

A smiley face is constructed entirely with D3.js v5 SVG primitives, combining circles, rectangles, paths, and lines to form facial features like eyes, glasses, a nose, and a beard. The code demonstrates fundamental DOM manipulation by appending elements to the SVG canvas with chained `.attr()` calls, and uses `d3.arc` for the mouth and nose shapes, while positioning features with absolute and transformed coordinates. The face's eyebrows are static rectangles, and the rendered result is a fixed, non-animated SVG illustration built from hard-coded values.

NNikitha123171

92% match